Android--圖片輪播（banner）

使用步驟

Step 1.依賴banner

 

Gradle

dependencies{
    compile 'com.youth.banner:banner:1.4.10'  //最新版本
}

或者引用本地lib

compile project(':banner')

Step 2.添加權限到你的 AndroidManifest.xml

<!-- 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" />

Step 3.在布局文件中添加Banner，可以設置自定義屬性

！！！此步驟可以省略，直接在Activity或者Fragment中new 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="高度自己設置" />

Step 4.重寫圖片加載器

public class GlideImageLoader extends ImageLoader {
    @Override
    public void displayImage(Context context, Object path, ImageView imageView) {
        /**
          注意：
          1.圖片加載器由自己選擇，這里不限制，只是提供幾種使用方法
          2.返回的圖片路徑為Object類型，由於不能確定你到底使用的那種圖片加載器，
          傳輸的到的是什么格式，那么這種就使用Object接收和返回，你只需要強轉成你傳輸的類型就行，
          切記不要胡亂強轉！
         */
        eg：
        
        //Glide 加載圖片簡單用法
        Glide.with(context).load(path).into(imageView);

        //Picasso 加載圖片簡單用法
        Picasso.with(context).load(path).into(imageView);
        
        //用fresco加載圖片簡單用法，記得要寫下面的createImageView方法
        Uri uri = Uri.parse((String) path);
        imageView.setImageURI(uri);
    }
    
    //提供createImageView 方法，如果不用可以不重寫這個方法，主要是方便自定義ImageView的創建
    @Override
    public ImageView createImageView(Context context) {
        //使用fresco，需要創建它提供的ImageView，當然你也可以用自己自定義的具有圖片加載功能的ImageView
        SimpleDraweeView simpleDraweeView=new SimpleDraweeView(context);
        return simpleDraweeView;
    }
}

Step 5.在Activity或者Fragment中配置Banner

• 注意！start()方法必須放到最后執行，點擊事件請放到start()前，每次都提交問題問為什么點擊沒有反應？需要輪播一圈才能點擊？點擊第一個怎么返回1？麻煩仔細閱讀文檔。

--------------------------簡單使用-------------------------------
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    Banner banner = (Banner) findViewById(R.id.banner);
    //設置圖片加載器
    banner.setImageLoader(new GlideImageLoader());
    //設置圖片集合
    banner.setImages(images);
    //banner設置方法全部調用完畢時最后調用
    banner.start();
}
--------------------------詳細使用-------------------------------
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    Banner banner = (Banner) findViewById(R.id.banner);
    //設置banner樣式
    banner.setBannerStyle(BannerConfig.CIRCLE_INDICATOR_TITLE);
    //設置圖片加載器
    banner.setImageLoader(new GlideImageLoader());
    //設置圖片集合
    banner.setImages(images);
    //設置banner動畫效果
    banner.setBannerAnimation(Transformer.DepthPage);
    //設置標題集合（當banner樣式有顯示title時）
    banner.setBannerTitles(titles);
    //設置自動輪播，默認為true
    banner.isAutoPlay(true);
    //設置輪播時間
    banner.setDelayTime(1500);
    //設置指示器位置（當banner模式中有指示器時）
    banner.setIndicatorGravity(BannerConfig.CENTER);
    //banner設置方法全部調用完畢時最后調用
    banner.start();
}
-----------------當然如果你想偷下懶也可以這么用--------------------
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    Banner banner = (Banner) findViewById(R.id.banner);
    banner.setImages(images).setImageLoader(new GlideImageLoader()).start();
}

Step 6.（可選）增加體驗

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

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

混淆代碼

# glide 的混淆代碼
-keep public class * implements com.bumptech.glide.module.GlideModule
-keep public enum com.bumptech.glide.load.resource.bitmap.ImageHeaderParser$** {
  **[] $VALUES;
  public *;
}
# banner 的混淆代碼
-keep class com.youth.banner.** {
    *;
 }

Demo

MainActivity.java

import android.app.Activity; import android.content.Context; import android.os.Bundle; import android.widget.ImageView; import android.widget.Toast; import com.bumptech.glide.Glide; import com.youth.banner.Banner; import com.youth.banner.BannerConfig; import com.youth.banner.listener.OnBannerListener; import com.youth.banner.loader.ImageLoader; import java.util.ArrayList; public class MainActivity extends Activity { private Banner mBanner; private ArrayList<String> images; private ArrayList<String> imageTitle; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mBanner = findViewById(R.id.banner); //初始化數據 initData(); //初始化view initView(); } private void initView() { mBanner = findViewById(R.id.banner); //設置樣式,默認為:Banner.NOT_INDICATOR(不顯示指示器和標題) //可選樣式如下: //1. Banner.CIRCLE_INDICATOR 顯示圓形指示器 //2. Banner.NUM_INDICATOR 顯示數字指示器 //3. Banner.NUM_INDICATOR_TITLE 顯示數字指示器和標題 //4. Banner.CIRCLE_INDICATOR_TITLE 顯示圓形指示器和標題 //設置banner樣式 mBanner.setBannerStyle(BannerConfig.CIRCLE_INDICATOR_TITLE); //設置圖片加載器 mBanner.setImageLoader(new GlideImageLoader()); //設置標題集合（當banner樣式有顯示title時） mBanner.setBannerTitles(imageTitle); //設置輪播樣式（沒有標題默認為右邊,有標題時默認左邊） //可選樣式: //Banner.LEFT 指示器居左 //Banner.CENTER 指示器居中 //Banner.RIGHT 指示器居右 mBanner.setIndicatorGravity(BannerConfig.CENTER); //設置是否允許手動滑動輪播圖 mBanner.setViewPagerIsScroll(true); //設置是否自動輪播（不設置則默認自動） mBanner.isAutoPlay(true); //設置輪播圖片間隔時間（不設置默認為2000） mBanner.setDelayTime(1500); //設置圖片資源:可選圖片網址/資源文件，默認用Glide加載,也可自定義圖片的加載框架 //所有設置參數方法都放在此方法之前執行 mBanner.setIndicatorGravity(BannerConfig.CENTER); mBanner.setImages(images) .setOnBannerListener(new OnBannerListener() { @Override public void OnBannerClick(int position) { Toast.makeText(MainActivity.this, "你點了第" + (position + 1) + "張輪播圖", Toast.LENGTH_SHORT).show(); } }) .start(); } private void initData() { //設置圖片資源:url或本地資源 images = new ArrayList<>(); images.add("http://img.zcool.cn/community/0166c756e1427432f875520f7cc838.jpg"); images.add("http://img.zcool.cn/community/018fdb56e1428632f875520f7b67cb.jpg"); images.add("http://img.zcool.cn/community/01c8dc56e1428e6ac72531cbaa5f2c.jpg"); images.add("http://img.zcool.cn/community/01fda356640b706ac725b2c8b99b08.jpg"); images.add("http://img.zcool.cn/community/01fd2756e142716ac72531cbf8bbbf.jpg"); images.add("http://img.zcool.cn/community/0114a856640b6d32f87545731c076a.jpg"); //設置圖片標題:自動對應 imageTitle = new ArrayList<>(); imageTitle.add("十大星級品牌聯盟，全場2折起"); imageTitle.add("嗨購5折不要停"); imageTitle.add("雙12趁現在"); imageTitle.add("嗨購5折不要停，12.12趁現在"); imageTitle.add("實打實大優惠"); imageTitle.add("買到就是賺到"); } /** * 網絡加載圖片 * 使用了Glide圖片加載框架 */ public class GlideImageLoader extends ImageLoader { @Override public void displayImage(Context context, Object path, ImageView imageView) { Glide.with(context) .load((String) path) .into(imageView); } } @Override protected void onResume() { super.onResume(); } @Override protected void onStop() { super.onStop(); } @Override protected void onDestroy() { super.onDestroy(); } }

main_layout.xml

 

<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="300dp" />