框架】之XBanner的使用
阿新 • • 發佈：2019-01-08
一、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'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中展示的資料
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繫結資料
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的頁面切換特效
banner.setPageTransformer(Transformer.Default);
// 設定XBanner頁面切換的時間，即動畫時長
banner.setPageChangeDuration(1000); // 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的程式碼中學習總結的，留給自己看，也給作者宣傳一下~~