Android 輪播圖Banner切換圖片的效果

Android XBanner使用詳解

2018年03月14日 08:19:59 AND_Devil 閱讀數：910

 

版權聲明：本文爲博主原創文章，未經博主容許不得轉載。 https://www.cnblogs.com/huangzedong/p/9961371.html

前言:現現在的不少APP都介入了廣告,不過,大多數都是以輪播圖的形式展示的,我以前使用的是viewpage和自定義控件實現的這些功能,不過,相比於banner來講,效果還顯示很遜色的,畢竟,如今的手機,性能都過剩,這些消耗,也不會太影響APP的性能!

以前接入的是Banner,如今忽然間很想使用banner的升級版,我借鑑了XBanner的github介紹

1、XBanner簡介

支持圖片無限輪播的控件，可進行自定義功能。

1. 支持根據服務端返回的數據動態設置廣告條的總頁數
2. 支持大於等於1頁時的無限循環自動輪播、手指按下暫停輪播、擡起手指開始輪播
3. 支持自定義狀態指示點位置 左 、中 、右
4. 支持自定義狀態指示點
5. 支持監聽 item 點擊事件
6. 支持設置圖片輪播間隔
7. 支持指示器背景的修改及隱藏/顯示
8. 支持顯示提示性文字功能
9. 支持圖片切換動畫,目前支持10種切換動畫，具體可看demo
10. 支持設置圖片切換速度
11. 支持設置數字指示器
12. 支持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.0dp

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