文章概述:
本篇文章記錄開源的Banner庫:android-banner 的使用。android-banner實(shí)現(xiàn)了一般banner循環(huán)輪播的效果,一頁只顯示一張圖片,也可以一頁顯示一張圖和相鄰兩個(gè)圖片的一部分,此項(xiàng)目僅僅是banner展示圖片,沒有多余的諸如指示器、頁面切換動(dòng)畫等效果代碼,詳見效果圖和案例代碼。
項(xiàng)目地址:https://github.com/cnlius/android-banner
overview

效果圖
usage
Gradle
repositories {
maven { url 'https://jitpack.io' }
}
dependencies {
compile 'com.github.cnlius:android-banner:0.0.2'
}
ProGuard
-keep class com.lw.banner.** {*;}
Layout
<com.lw.banner.Banner
android:id="@+id/banner"
android:layout_width="match_parent"
android:layout_height="160dp" />
xml中可設(shè)置的一些屬性
| 屬性名稱 | 屬性值類型 | 作用 |
|---|---|---|
| delayTime | integer | 循環(huán)輪播時(shí)間間隔 |
| scrollDuration | integer | banner滾動(dòng)過程持續(xù)時(shí)間 |
| isAutoPlay | boolean | 是否自動(dòng)輪播 |
| scrollable | boolean | banner是否可以手動(dòng)滑動(dòng) |
| pageMargin | dimension | banner頁面之間的間隔 |
| pageLimit | integer | banner預(yù)加載頁面數(shù) |
| leftPageWidth | dimension | 當(dāng)前頁面左側(cè)頁面可以顯示的寬度 |
| rightPageWidth | dimension | 當(dāng)前頁面右側(cè)頁面可以顯示的寬度 |
| emptyImage | reference | banner為空時(shí)的占位圖片資源引用 |
案例:xml中設(shè)置循環(huán)輪播時(shí)間間隔
<com.lw.banner.Banner
android:id="@+id/banner"
android:layout_width="match_parent"
android:layout_height="160dp"
app:delayTime="1000"/>
Code
List<String> urls=getUrls();
banner.setImages(urls)
.setImageLoader(new GlideImageLoader())
.init();
代碼中可以配置的一些屬性:
banner.setImages(Arrays.asList(imgRes)) //設(shè)置圖片資源
//.setImageLoader(new FrescoImageLoader()) // 設(shè)置fresco圖片加載器
.setImageLoader(new GlideImageLoader()) //設(shè)置Glide圖片加載器
//.setPageTransformer(true, new PageScaleYTransformer()) //頁面切換動(dòng)畫
.setOnItemClickListener(new Banner.OnItemClickListener() {
@Override
public void callBack(int position) {
Toast.makeText(MainActivity.this, "position=" + position, Toast.LENGTH_SHORT).show();
}
}) //設(shè)置banner點(diǎn)擊監(jiān)聽
//.setScrollable(false) // 禁用banner手動(dòng)滑動(dòng)
//.setDelayTime(1000) // 循環(huán)輪播時(shí)間間隔
//.setPageLimit(4) // 設(shè)置預(yù)加載頁面數(shù)量
//.setPageMargin(20) // banner頁面之間的間隔
//.setRightPageWidth(50) // 當(dāng)前頁面右側(cè)頁面可以顯示的寬度
//.setLeftPageWidth(50) // 當(dāng)前頁面左側(cè)頁面可以顯示的寬度
//.setEmptyImageRes(R.mipmap.no_banner) // banner為空時(shí)占位圖
//.setEmptyImageScaleType(ImageView.ScaleType.FIT_CENTER) // 占位圖的縮放類型,默認(rèn)FIT_XY
.isAutoPlay(true) // 設(shè)置自動(dòng)循環(huán)輪播
.init();
// 拿到占位圖ImageView對(duì)象
ImageView emptyView = mBinding.banner2.getEmptyView();
emptyView.setImageResource(R.mipmap.mn_01);
// 拿到BannerViewPager對(duì)象
BannerViewPager bannerViewPager = mBinding.banner2.getBannerViewPager();
生命周期中控制循環(huán)輪播的周期
@Override
protected void onStart() {
super.onStart();
//開始輪播
banner.startAutoPlay();
}
@Override
protected void onStop() {
super.onStop();
//結(jié)束輪播
banner.stopAutoPlay();
}