Android 輪播圖Banner切換圖片的效果
阿新 • • 發佈：2018-11-15
Android XBanner使用詳解
2018年03月14日 08:19:59 AND_Devil 閱讀數：910前言:現如今的很多APP都介入了廣告,不過,大多數都是以輪播圖的形式展現的,我之前使用的是viewpage和自定義控制元件實現的這些功能,不過,相比於banner來說,效果還顯示很遜色的,畢竟,現在的手機,效能都過剩,這些消耗,也不會太影響APP的效能!
之前接入的是Banner,現在突然間很想使用banner的升級版,我借鑑了XBanner的github介紹
一、XBanner簡介
支援圖片無限輪播的控制元件，可進行自定義功能。
- 支援根據服務端返回的資料動態設定廣告條的總頁數
- 支援大於等於1頁時的無限迴圈自動輪播、手指按下暫停輪播、擡起手指開始輪播
- 支援自定義狀態指示點位置 左 、中 、右
- 支援自定義狀態指示點
- 支援監聽 item 點選事件
- 支援設定圖片輪播間隔
- 支援指示器背景的修改及隱藏/顯示
- 支援顯示提示性文字功能
- 支援圖片切換動畫,目前支援10種切換動畫，具體可看demo
- 支援設定圖片切換速度
- 支援設定數字指示器
- 支援Glide/Fresco等主流圖片載入框架載入圖片
效果圖
基本使用
1.新增Gradle依賴
dependencies {
compile 'com.xhb:xbanner:1.3.1'
}2.在清單檔案中新增網路許可權
<uses-permission android:name="android.permission.INTERNET" />3 由於XBanner中有可能從網路載入圖片，因此也需要匯入一些圖片載入框架的依賴，如Glide
`compile 'com.github.bumptech.glide:glide:3.7.0'
compile 'jp.wasabeef:glide-transformations:1.0.6'` 4 在佈局檔案中新增XBanner
<com.stx.xhb.xbanner.XBanner xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/banner_1" android:layout_width="match_parent" android:layout_height="180dp" app:AutoPlayTime="3000" app:pointsContainerBackground="#44aaaaaa" app:pointNormal="@drawable/shape_noraml" app:pointSelect="@drawable/shape_selected" app:pointsPosition="RIGHT" app:tipTextSize="12sp" app:isShowNumberIndicator="true" app:isShowIndicatorOnlyOne="true" app:pageChangeDuration="800"/>5 XBanner屬性
屬性名 屬性說明 屬性值
isAutoPlay 是否支援自動輪播 boolean型別，預設為true
autoPlayTime 圖片輪播事件間隔 int型別，預設5000ms
pointNormal 指示器未選中時的狀態 drawable型別，不指定的話使用預設狀態點
pointSelect 指示器選中時的狀態 drawable型別，不指定的話使用預設狀態點
pointsVisible 是否顯示指示器 boolean型別，預設為true
pointsPosition 指示點位置 CENTER、LEFT、RIGHT，預設CENTER
pointsContainerBackground 指示器條背景 color型別、drawable型別、mipmap型別等 pointContainerPosition 指示器條位置 TOP、BOTTOM，預設BOTTOM pointContainerLeftRightPadding 指示點容器左右內間距 dimension型別，預設10.0dip pointTopBottomPadding 指示點上下內間距 dimension型別，預設6.0dip pointLeftRightPadding 指示點左右內間距 dimension型別，預設3.0dip tipTextColor 提示文字的顏色 reference型別 tipTextSize 提示文字的大小 dimension型別，預設10.0dp6.在Activity或者Fragment中配置
banner = (XBanner) findViewById(R.id.banner);
List<String> imgesUrl = new ArrayList<>();
imgesUrl.add("http://img3.fengniao.com/forum/attachpics/913/114/36502745.jpg"); imgesUrl.add("http://imageprocess.yitos.net/images/public/20160910/99381473502384338.jpg"); imgesUrl.add("http://imageprocess.yitos.net/images/public/20160910/77991473496077677.jpg"); imgesUrl.add("http://imageprocess.yitos.net/images/public/20160906/1291473163104906.jpg"); // 為XBanner繫結資料 banner .setData(imgesUrl,null);//第二個引數為提示文字資源集合 // XBanner適配資料 banner.setmAdapter(new XBanner.XBannerAdapter() { @Override public void loadBanner(XBanner banner, View view, int position) { Glide.with(MainActivity.this).load(imgesUrl.get(position)).into((ImageView) view); } }); // 設定XBanner的頁面切換特效，選擇一個即可，總的大概就這麼多效果啦，歡迎使用 banner.setPageTransformer(Transformer.Default);//橫向移動 banner.setPageTransformer(Transformer.Alpha); //漸變，效果不明顯 banner.setPageTransformer(Transformer.Rotate); //單頁旋轉 banner.setPageTransformer(Transformer.Cube); //立體旋轉 banner.setPageTransformer(Transformer.Flip); // 反轉效果 banner.setPageTransformer(Transformer.Accordion); //三角換頁 banner.setPageTransformer(Transformer.ZoomFade); // 縮小本頁，同時放大另一頁 banner.setPageTransformer(Transformer.ZoomCenter); //本頁縮小一點，另一頁就放大 banner.setPageTransformer(Transformer.ZoomStack); // 本頁和下頁同事縮小和放大 banner.setPageTransformer(Transformer.Stack); //本頁和下頁同時左移 banner.setPageTransformer(Transformer.Depth); //本頁左移，下頁從後面出來 banner.setPageTransformer(Transformer.Zoom); //本頁剛左移，下頁就在後面 // 設定XBanner頁面切換的時間，即動畫時長 banner.setPageChangeDuration(1000);7 監聽廣告 item 的單擊事件
banner.setOnItemClickListener(new XBanner.OnItemClickListener() {
@Override
public void onItemClick(XBanner banner, int position) { Toast.makeText(MainActivity.this, "點選了第"+position+"圖片", Toast.LENGTH_SHORT).show(); } });8 為了更好的體驗，建議j在新增以下程式碼
/** 為了更好的體驗效果建議在下面兩個生命週期中呼叫下面的方法 **/
@Override
protected void onResume() { super.onResume(); banner.startAutoPlay(); } @Override protected void onStop() { super.onStop(); banner.stopAutoPlay(); }9 混淆配置
##XBanner 圖片輪播混淆配置
-keep class com.stx.xhb.xbanner.**{*;}