Android XBanner使用詳解

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

之前接入的是Banner,現在突然間很想使用banner的升級版,我借鑒了XBanner的github介紹

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