Android輪播圖 - Banner
縱觀Android古今,輪播圖已然泛濫成災!大神們各顯神通大興土木,所起樓台之高讓後來者心生膜拜,紛紛Star!但不法分子也是層出不窮,為求"大神"的桂冠,挂羊頭賣狗肉,一個鏡像就試圖去名滿天下,鄙人正是此等不法分子!雖有點盜竊youth5201314前輩的勞動成果,但也算是實實在在在前輩的肩膀上幹了點實在事——幫前輩梳了梳頭,整理了一下發型。畢竟盲仔說過:頭可斷,發型不能亂。但是在下還是得由衷感謝youth5201314前輩,您造的法拉利我至少給您保養了一番!
功能特點
支援一屏三頁
支援任意View顯示在Banner上
支援自定義顯示器
支援多種Banner動畫
支援仿魅族Banner
空資料、兩條資料優化處理
建立的View内部已做緩存,性能更佳
一句話:更加精簡,更加智能,更加好用!!!
有圖有真相
![](https://img.laitimes.com/img/__Qf2AjLwojIjJCLyojI0JCLicmbw5CZwUzN1E2YhRDO0EjNkZGZycTMxMmYmNjY4YjY4QzNy8CX0JXZ252bj91Ztl2Lc52YucWbp5GZzNmLn9Gbi1yZtl2Lc9CX6MHc0RHaiojIsJye.png)
新增仿魅族Banner
簡單用法
1.添加依賴:
1.1 工程的build.gradle下添加:
maven { url 'https://jitpack.io' }
1.2 子產品的build.gradle下添加:
implementation 'com.github.AlpsDog:Banner:v1.0.6'
如果你的項目為: AndroidX
請在 gradle.properties 中添加:(如果已經添加請忽略)
android.useAndroidX=true
android.enableJetifier=true
2.XML布局檔案
android:id="@+id/banner"
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_marginTop="20dp"
app:banner_auto_play="true"
app:banner_default_image="@drawable/banner_default"
app:banner_expose_width="20dp"
app:banner_interval_time="5000"
app:banner_multi_anim="ScaleIn"
app:banner_page_spacing="14dp"
app:banner_scroll_time="1000"
app:banner_show_indicator="true"
app:banner_show_model="Multi"
app:layout_scrollFlags="scroll" />
3.在Activity/Fragment中
// 1. 建立設定BannerLoader
banner.setBannerLoader(new ImageLoader() {
@Override
public void loadView(Context context, BannerEntry entry, int position, View imageView) {
RequestOptions requestOptions = new RequestOptions()
.placeholder(R.drawable.banner_default)
.error(R.drawable.banner_default)
.diskCacheStrategy(DiskCacheStrategy.AUTOMATIC);
Glide.with(context).load(entry.getBannerPath()).apply(requestOptions).into((ImageView) imageView);
}
});
// 2 設定頁面點選事件
banner.setOnBannerClickListener(new Banner.OnBannerClickListener() {
@Override
public void onBannerClick(int position) {
Toast.makeText(BaseUseActivity.this, "點選了:" + position, Toast.LENGTH_SHORT).show();
}
});
// 3 翻頁事件
banner.setBannerPagerChangedListener(new Banner.OnBannerSimplePagerListener() {
@Override
public void onPageSelected(int position) {
Log.d("hsl777", "onPageSelected: ==>" + position);
}
});
// 4 最重要一步,加載資料
banner.loadImagePaths(mData);
非常重要之處
此處添加可以優化Banner體驗
但是一旦啟用自動輪播,必須調用 banner.stopAutoPlay();
可以在onResume()、也可以在onDestory(),
這樣才能確定輪播任務停止
防止記憶體洩漏
@Override
protected void onResume() {
super.onResume();
banner.startAutoPlay();
}
@Override
protected void onPause() {
super.onPause();
banner.stopAutoPlay();
}
4.資料源說明
// Banner内部定義的資料接口
public interface BannerEntry {
T getBannerPath();
String getIndicatorText();
}
// 實體類繼承此接口
// getBannerPath()傳回圖檔加載的源
// getIndicatorText()傳回Banner摘要,非必須
public class BannerItem implements BannerEntry {
private Object path;
private String indicatorText;
public BannerItem() {
}
public BannerItem(Object path, String indicatorText) {
this.path = path;
this.indicatorText = indicatorText;
}
@Override
public Object getBannerPath() {
//此處傳回圖檔加載的源,可以是 URL RES FILE...
return path;
}
@Override
public String getIndicatorText() {
//此處傳回Banner摘要,非必須
return indicatorText;
}
public Object getPath() {
return path;
}
public void setPath(Object path) {
this.path = path;
}
public void setIndicatorText(String indicatorText) {
this.indicatorText = indicatorText;
}
}
5.加載器說明
//自定義Banner顯示的View時,可用此加載器
public interface BannerLoader {
void loadView(Context context, BannerEntry entry, int position, V imageView);
V createView(Context context, int position);
}
//簡化版加載器
public abstract class ImageLoader implements BannerLoader {
@Override
public ImageView createView(Context context, int position) {
ImageView imageView = new ImageView(context);
imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
return imageView;
}
}
//關于怎樣自定義Banner顯示的View,可參考Demo
6.自定義屬性說明
banner_auto_play : 能否自動輪播
banner_show_model : 顯示模式(一屏一頁、一屏三頁、仿魅族Banner)
banner_interval_time : 輪播間隔
banner_scroll_time : 翻頁時長(決定翻頁的速度)
banner_single_anim : 一屏一頁動畫
banner_default_image : 資料為空時,預設顯示圖
banner_expose_width : 一屏三頁,左右兩頁露出的寬度
banner_page_spacing : 一屏三頁,頁間距
banner_multi_anim : 一屏三頁動畫
banner_mz_overlap : 仿魅族Banner時,中間Page壓着左右兩邊page的寬度
banner_mz_anim : 仿魅族Banner動畫
banner_show_indicator : 是否顯示訓示器
indicator_select_width : 選中的訓示器寬度
indicator_select_height : 選中的訓示器高度
indicator_default_width : 未選中訓示器寬度
indicator_default_height : 未選中訓示器高度
indicator_space : 訓示器間隔
indicator_margin_bottom : 訓示器距底部距離
indicator_select_drawable : 訓示器選中的樣式
indicator_default_drawable : 訓示器未選中樣式
版本說明
v1.0.6正式版
1.修複一張圖重新整理為多張圖是時,顯示問題
2.修複多張圖刷為一張圖時,崩潰問題
v1.0.4正式版
1.修複一張圖時,使用glide崩潰問題
v1.0.3正式版
1.空資料優化
2.頻繁重新整理優化
v1.0.2正式版
新增仿魅族Banner
v1.0.1正式版
1.對内部結構進行了優化
2.增加資料源接口,規範使用
V1.0.0正式版
1.輪播圖使用示例
2.輪播圖LIB源碼
鳴謝
感謝張鴻洋大師的ViewPager一屏三頁動畫
感謝大家對鄙人的支援