【Android - 框架】之XBanner的使用

一、XBanner簡介

        XBanner是一個非常優秀的無限自動輪播框架，也是一個控件。這里是XBanner的GitHub地址

        XBanner的主要功能如下：

• 根據傳入的數據條數自動調整廣告頁數
• 當圖片數量大於一張時，可以無限循環自動播放、手指按下停止輪播、抬起手指繼續輪播
• 可以自定義指示器的位置：左下角、下側中間、右下角
• 自定義指示點：正常狀態和選中狀態
• 監聽Item的點擊事件
• 支持設置圖片輪播時間間隔
• 可以設置指示器的背景及其顯示/隱藏
• 可以顯示提示性文字並設置其顏色、大小
• 支持改變圖片切換動畫，框架中默認支持10中動畫
• 可以設置圖片切換動畫的時長

 

二、XBanner用法

1、導入依賴

        使用XBanner框架之前，需要先導入其引用：在build.gradle文件中加入依賴，代碼如下：

    compile 'com.xhb:xbanner:1.2.2'
    compile 'com.nineoldandroids:library:2.4.0'

        由於XBanner中有可能從網絡加載圖片，因此也需要導入一些圖片加載框架的依賴，如Glide，代碼如下：

    compile 'com.github.bumptech.glide:glide:3.7.0'
    compile 'jp.wasabeef:glide-transformations:1.0.6'

        如果是從網絡加載數據，還需要在Manifest文件中注冊網絡訪問權限，代碼如下：

<uses-permission android:name="android.permission.INTERNET" />

 

2、布局

        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

        本DEMO中布局文件中的代碼如下：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <com.stx.xhb.xbanner.XBanner
        android:id="@+id/banner"
        android:layout_width="match_parent"
        android:layout_height="200.0dip"
        app:AutoPlayTime="3000"
        app:pointNormal="@drawable/shape_pointer_normal"
        app:pointSelect="@drawable/shape_pointer_selected"
        app:pointsContainerBackground="#44AAAAAA"
        app:pointsPosition="RIGHT"
        app:tipTextColor="#FFFFFFFF"
        app:tipTextSize="16.0sp" />

    <!-- 翻頁動畫單選按鈕組 -->
    <RadioGroup
        android:id="@+id/transforms"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <RadioButton
            android:id="@+id/rb_default"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:checked="true"
            android:text="Default"
            android:textSize="16.0sp" />

        <RadioButton
            android:id="@+id/rb_alpha"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Alpha"
            android:textSize="16.0sp" />

        <RadioButton
            android:id="@+id/rb_rotate"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Rotate"
            android:textSize="16.0sp" />

        <RadioButton
            android:id="@+id/rb_cube"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Cube"
            android:textSize="16.0sp" />

        <RadioButton
            android:id="@+id/rb_flip"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Flip"
            android:textSize="16.0sp" />

        <RadioButton
            android:id="@+id/rb_accordion"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Accordion"
            android:textSize="16.0sp" />

        <RadioButton
            android:id="@+id/rb_zoomfade"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="ZoomFade"
            android:textSize="16.0sp" />

        <RadioButton
            android:id="@+id/rb_zoomcenter"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="ZoomCenter"
            android:textSize="16.0sp" />

        <RadioButton
            android:id="@+id/rb_zoomstack"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="ZoomStack"
            android:textSize="16.0sp" />

        <RadioButton
            android:id="@+id/rb_depth"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Depth"
            android:textSize="16.0sp" />

        <RadioButton
            android:id="@+id/rb_stack"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Stack"
            android:textSize="16.0sp" />
    </RadioGroup>
</LinearLayout>

 

3、綁定數據

        在Activity中通過XBanner控件在布局文件中的id屬性找到控件，代碼如下：

banner = (XBanner) findViewById(R.id.banner);

        初始化XBanner中需要展示的數據，分為一個圖片URL的集合和一個提示性文字的集合：

        // 初始化XBanner中展示的數據
        images = new ArrayList<>();
        titles = new ArrayList<>();
        images.add("http://img3.fengniao.com/forum/attachpics/913/114/36502745.jpg");
        titles.add("這是第1張圖片這是第1張圖片這是第1張圖片這是第1張圖片這是第1張圖片這是第1張圖片這是第1張圖片這是第1張圖片這是第1張圖片");
        images.add("http://imageprocess.yitos.net/images/public/20160910/99381473502384338.jpg");
        titles.add("這是第2張圖片這是第2張圖片這是第2張圖片這是第2張圖片這是第2張圖片這是第2張圖片這是第2張圖片這是第2張圖片這是第2張圖片");
        images.add("http://imageprocess.yitos.net/images/public/20160910/77991473496077677.jpg");
        titles.add("這是第3張圖片這是第3張圖片這是第3張圖片這是第3張圖片這是第3張圖片這是第3張圖片這是第3張圖片這是第3張圖片這是第3張圖片");
        images.add("http://imageprocess.yitos.net/images/public/20160906/1291473163104906.jpg");
        titles.add("這是第4張圖片這是第4張圖片這是第4張圖片這是第4張圖片這是第4張圖片這是第4張圖片這是第4張圖片這是第4張圖片這是第4張圖片");

        XBanner綁定數據並適配：

        // 為XBanner綁定數據
        banner.setData(images, titles);
        // XBanner適配數據
        banner.setmAdapter(new XBanner.XBannerAdapter() {
            @Override
            public void loadBanner(XBanner banner, View view, int position) {
                Glide.with(MainActivity.this).load(images.get(position)).into((ImageView) view);
            }
        });

        設置XBanner默認的頁面切換動畫及動畫時長：

        // 設置XBanner的頁面切換特效
        banner.setPageTransformer(Transformer.Default);
        // 設置XBanner頁面切換的時間，即動畫時長
        banner.setPageChangeDuration(1000);

        當選中RadioGroup中的某個RadioButton時，切換XBanner的頁面切換動畫：

        // RadioGroup中選中某個RadioButton時回調的方法
        transforms.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup group, int checkedId) {
                switch (checkedId) {
                    case R.id.rb_default:
                        banner.setPageTransformer(Transformer.Default);
                        break;
                    case R.id.rb_alpha:
                        banner.setPageTransformer(Transformer.Alpha);
                        break;
                    case R.id.rb_rotate:
                        banner.setPageTransformer(Transformer.Rotate);
                        break;
                    case R.id.rb_cube:
                        banner.setPageTransformer(Transformer.Cube);
                        break;
                    case R.id.rb_flip:
                        banner.setPageTransformer(Transformer.Flip);
                        break;
                    case R.id.rb_accordion:
                        banner.setPageTransformer(Transformer.Accordion);
                        break;
                    case R.id.rb_zoomfade:
                        banner.setPageTransformer(Transformer.ZoomFade);
                        break;
                    case R.id.rb_zoomcenter:
                        banner.setPageTransformer(Transformer.ZoomCenter);
                        break;
                    case R.id.rb_zoomstack:
                        banner.setPageTransformer(Transformer.ZoomStack);
                        break;
                    case R.id.rb_stack:
                        banner.setPageTransformer(Transformer.Stack);
                        break;
                    case R.id.rb_depth:
                        banner.setPageTransformer(Transformer.Depth);
                        break;
                }
            }
        });

 

4、點擊事件

        當點擊XBanner中的某一項時觸發的事件：

        // XBanner中某一項的點擊事件
        banner.setOnItemClickListener(new XBanner.OnItemClickListener() {
            @Override
            public void onItemClick(XBanner banner, int position) {
                Toast.makeText(MainActivity.this, "點擊了第" + (position + 1) + "張圖片", Toast.LENGTH_SHORT).show();
            }
        });

 

5、與Activity生命周期聯動

        當Activity失去焦點時立即停止自動輪播；當Activity獲得焦點時才開始自動輪播。代碼如下：

    @Override
    protected void onResume() {
        super.onResume();
        banner.startAutoPlay();
    }

    @Override
    protected void onStop() {
        super.onStop();
        banner.stopAutoPlay();
    }

 

        以上都是從GitHub的代碼中學習總結的，留給自己看，也給作者宣傳一下~~