1. 程式人生 > >Android (github開源專案1)首頁輪播圖控制元件----banner

Android (github開源專案1)首頁輪播圖控制元件----banner

前段時間因為公司原因再加上自己比較懶,已經很久沒有更新部落格了。最近閒置下來,為大家帶來一些我在我專案中使用到的一些比較好用的github上面的開源控制元件。今天就為大家帶來首頁banner的控制元件。這個控制元件主要解決的就是首頁輪播圖。目前這個框架可以進行不同樣式、不同動畫設定, 以及完善的api方法能滿足大部分的需求。而且此框架的原始碼是按MVP的模式搭建的,對正在學習的我也是受益匪淺。除此之外,該控制元件沒有指定圖片載入,所以可以自定義圖片載入方式。好了,說了這麼多,接下來我就帶大家如何使用該控制元件。

    第一步:依賴banner(compile 'com.youth.banner:banner:1.4.8'

     

    第二步:新增網路許可權

<!-- 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"
/>
    第三步:在佈局檔案中新增banner,可以設定自定義屬性
說明:selected:圖片指示器(我的是圓點)選中狀態---unselected:未選擇中狀態

     第四步:重寫圖片載入器(此處構造你自己的圖片載入模式,我使用的是ImagerLoader)


        github給的例項程式碼:

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; } }
         第五步:在Activity中配置Banner的倆種使用方法(我的是簡單使用)
--------------------------簡單使用-------------------------------
@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();
}

          第六步:提高程式體驗

@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.** {
    *;
 }

         後記:載入其他圖片資源(github上面給的程式碼的使用的glide的例項)

//資原始檔
Integer[] images={R.mipmap.a,R.mipmap.b,R.mipmap.c};
//Uri
Uri uri = resourceIdToUri(context, R.mipmap.ic_launcher);
Uri[] images={uri};
//檔案物件
File[] images={"檔案物件","檔案物件"};
//raw 兩種方式
String[] images={"Android.resource://com.frank.glide/raw/raw_1"};
String[] images={"android.resource://com.frank.glide/raw/"+R.raw.raw_1"};
//ContentProvider
String[] images={"content://media/external/images/media/139469"};
//assets
String[] images={"file:///android_asset/f003.gif"};
//sd卡資源
String[] images={"file://"+ Environment.getExternalStorageDirectory().getPath()+"/test.jpg"};
    到此,banner控制元件就可以使用了,如果需要更加詳細的API或者下載原始碼的,可以