靈活布局的Banner元件

項目位址

最近有空閑時間将之前項目中實作的部分自定義元件整理一下分享出來，希望對其他人有有用

需求：

1.實作一個輪播圖
	2.輪播圖尺寸為按寬高比例顯示（比例指定）
	3.輪播圖根據資料區分顯示圖檔（圖檔可以點選跳轉）還是圖檔上顯示3個商品資訊（且商品可以點選跳轉）
	4.輪播圖的停留時間不固定，有商品的itme停留時間為純圖檔的3倍
           

拿到這個需求當時想到使用Banner庫并修改，但是考慮一下實作起來困難比較大，是以就想着橫向的RecyclerView實作但是怎樣控制像ViewPager一樣整頁滑動呢？通過搜尋發現了SnapHelper這個類，至于SnapHelper詳細作用自己通過連接配接了解一下，并且在搜尋資料過程中發現了Android-ConvenientBanner的實作，自己也借鑒了作者的部分代碼

使用

1.在項目根build.gradle中添加如下代碼

allprojects {

repositories {

…

maven { url “https://jitpack.io” }

}

}

2. 在使用的Module中添加如下引用

implementation ‘com.github.rupertoL:SpecialView:1.1’

如果需要使用AndroidX的換請引用 implementation ‘com.github.rupertoL:SpecialView:vX1.1’

項目配置就完成了接下來就是用了

單純的Banner圖使用

初始化：

mFlexibleBanner
.setPages(new DefaultImageBannerHolder(15), mBannerUrlLists) //設定預設的Holder和資料源
.startTurning(); //啟動輪播
getLifecycle().addObserver(mFlexibleBanner); //添加Lifecycle檢測 添加後如果是自動輪播那麼在 onPause停止 在onResume開始輪播 

           

更新資料：

mFlexibleBanner.update(mBannerUrlLists);

           

單純的圖檔輪播就搞定了

自己實作圖檔輪播的布局

mFlexibleBanner3.setPages(new ItmeBuildImpi() {

            @Override
            public FlexibleBannerHolder createViewHolder(ViewGroup parent, int viewType) {
                View itemView = LayoutInflater.from(getBaseContext()).inflate(R.layout.banner_item, parent, false);

                return new TestLocalImageHolderView(itemView);
            }

            @Override
            public int getItemViewType(Object t) {
                return 0;
            }
        }, mBanner3UrlLists)； //設定預設的Holder和資料源
               
               
           

自己适配布局需要實作 ItmeBuildImpi 接口并且重寫createViewHolder 與getItemViewType方法

其中createViewHolder接口傳回一個FlexibleBannerHolder 對象

public class TestLocalImageHolderView extends FlexibleBannerHolder {
    public TestLocalImageHolderView(View itemView) {
        super(itemView);
    }

//初始化布局
    @Override
    protected void initView(View itemView) {
        mItemView = itemView;
        imageView = itemView.findViewById(R.id.iv_banner);
    }

//UI更新
    @Override
    public void updateUI(Object data) {
        Glide.with(mItemView.getContext())
                .load(data.toString())
                .apply(RequestOptions.bitmapTransform(new RoundedCorners(30)))
                .into(imageView);
    }

    private ImageView imageView;
    private View mItemView;
}

           

資料更新：

mFlexibleBanner3.update(mBannerUrlLists);

           

多個布局樣式

初始化布局：

mFlexibleBanner2.setPages(new ItmeBuildImpi() {

            @Override
            public FlexibleBannerHolder createViewHolder(ViewGroup parent, int viewType) {
                //傳回布局類型1
                if (viewType == 1) {
                    View itemView = LayoutInflater.from(getBaseContext()).inflate(R.layout.banner_item, parent, false);
                    return new TestLocalImageHolderView1(itemView);
                } else {
                    //傳回布局樣式2
                    View itemView = LayoutInflater.from(getBaseContext()).inflate(R.layout.banner2_item, parent, false);
                    return new TestLocalImageHolderView2(itemView);
                }

            }

            @Override
            public int getItemViewType(Object t) {
                //根據資料傳回布局樣式類型
                Banner banner = (Banner) t;
                return banner.getType();
            }
        }, mBanner2UrlLists)；

           

FlexibleBannerHolder 的實作與TestLocalImageHolderView 一樣根據布局樣式展示不通資料

資料更新：

mFlexibleBanner2.update(mBannerUrlLists);

           

更多的配置

• setPageIndicatorAlign(IndicatorConfig align) 設定訓示器的位置
• setPageIndicator(int[] page_indicatorId) 訓示器的樣式第一個為預設，第二個為選中狀态
• setPageIndicatorMargin(int marginLeft, int marginRight, int marginTop, int marginBottom) 訓示器的Margin
• setPageIndicatorPadding(int paddingLeft, int paddingRight, int paddingTop, int paddingBottom) 訓示器的Padding
• setLoopTask(BannerLoopTaskImpl bannerLoopTask) 自定義輪播機制
• setAutoSwitch(boolean autoSwitch) 是否自動輪播 預設自動輪播

xml配置：

1. auto_switch 是否自動輪播 預設true
2. alone_auto_switch 一個對象時是否輪播 預設false
3. distance_time 輪播時間間隔 預設5000
4. aspect_ratio 寬高比 預設-1 不支援寬高比
5. slide_velocity 一個像素滑動的時間 預設30f

後期将會将其他的元件整理出來