Android (github開源專案1)首頁輪播圖控制元件----banner
阿新 • • 發佈:2018-12-22
前段時間因為公司原因再加上自己比較懶,已經很久沒有更新部落格了。最近閒置下來,為大家帶來一些我在我專案中使用到的一些比較好用的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第五步:在Activity中配置Banner的倆種使用方法(我的是簡單使用)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; } }
--------------------------簡單使用------------------------------- @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或者下載原始碼的,可以