banner輪播

原創

2020-02-22 13:16

現在的很多app都有banner界面，實現循環播放多個廣告圖片和手動滑動循環等功能。因爲ViewPager並不支持循環翻頁，所以要實現循環還得需要自己去動手，因此可以使用banner更爲方便。先來看一下效果：

一.添加依賴banner

 dependencies {
     compile fileTree(include: ['*.jar'], dir: 'libs')
     testCompile 'junit:junit:4.12'
     compile 'com.android.support:appcompat-v7:25.1.1'
     compile 'com.github.bumptech.glide:glide:3.7.0'

     compile 'com.youth.banner:banner:1.4.9'
 }

二.在清單文件中添加權限

 <!-- if you want to load images from the internet -->
 <uses-permission android:name="android.permission.INTERNET" />

 <!-- if you want to load images from a file OR from the internet -->
 <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />

三.在XML佈局中添加banner控件

 <com.youth.banner.Banner
     xmlns:app="http://schemas.android.com/apk/res-auto"
     android:id="@+id/banner"
     android:layout_width="match_parent"
     android:layout_height="高度可以自己設置" />

四.重寫圖片加載器

 private class GlideImageLoad implements ImageLoaderInterface {
     @Override
     public void displayImage(Context context, Object path, View imageView) {

         //Glide加載圖片
         Glide.with(context).load(path).into((ImageView) imageView);
         Uri uri = Uri.parse((String) path);
         ((ImageView) imageView).setImageURI(uri);
     }

     @Override
     public View createImageView(Context context) {
         return null;
     }
 }

五.在Activity或Fragment中添加所要加載的數據資源

 banner= (Banner) findViewById(R.id.banner);
 listUrl=new ArrayList<>();
 listTitle=new ArrayList<>();
 listUrl.add("http://i1.shouyou.itc.cn/2012/win8/2012/10/29/201211622345391739.png");
 listUrl.add("http://dynamic-image.yesky.com/300x-/uploadImages/2014/142/45/4K87MG440MLB_500.jpg");
 listUrl.add("http://att.bbs.duowan.com/month_1007/20100720_8367bb3fda85d6010db3SoXRNknuNpkF.jpg");
 listTitle.add("圖片1");
 listTitle.add("圖片2");
 listTitle.add("圖片3");

六.在Activity或Fragment中配置banner

 //設置圖片加載器
 banner.setImageLoader(new GlideImageLoad());
 //設置banner樣式,CIRCLE_INDICATOR_TITLE_INSIDE爲輪播指示器在標題的內部的右邊
 banner.setBannerStyle(BannerConfig.CIRCLE_INDICATOR_TITLE_INSIDE);
 //設置圖片集合
 banner.setImages(listUrl);
 //設置標題集合
 banner.setBannerTitles(listTitle);
 //設置自動輪播,默認爲true
 banner.isAutoPlay(true);
 //設置指示器位置（當banner模式中有指示器時）
 banner.setIndicatorGravity(BannerConfig.CENTER);
 //設置輪播時間
 banner.setDelayTime(1500);
 //banner設置方法全部調用完畢時最後調用
 banner.start();

七.（可選）

 //如果你需要考慮更好的體驗，可以添加這些操作
 @Override
 protected void onStart() {
     super.onStart();
     //開始輪播
     banner.startAutoPlay();
 }

 @Override
 protected void onStop() {
     super.onStop();
     //結束輪播
     banner.stopAutoPlay();
 }