Android輪播控件

全新升級(jí)宵膨，基于ViewPager2實(shí)現(xiàn)無(wú)限輪播功能逗柴。可以自定義indicator专甩，需自定義實(shí)現(xiàn) Indicator 接口，內(nèi)置了的IndicatorView钉稍，支持五種動(dòng)畫(huà)切換涤躲。支持傳入RecyclerView.Adapter 即可實(shí)現(xiàn)無(wú)限輪播，支持任何ReyclerView.Apdater框架贡未，集成使用請(qǐng)參考Sample种樱。

• 支持自動(dòng)輪播
• 支持一屏三頁(yè)
• 支持自定義Indicator
• 支持自定義view
• 支持?jǐn)?shù)據(jù)刷新
• 支持垂直滾動(dòng)
• 支持任意RecyclerView.adapter蒙袍，RecyclerView的使用方式。
• 良好的代碼封裝嫩挤，更多優(yōu)化請(qǐng)參考代碼實(shí)現(xiàn)害幅。

項(xiàng)目地址前往項(xiàng)目地址

效果圖

點(diǎn)擊下載 banner.apk 體驗(yàn)

基本使用的功能，請(qǐng)下載apk體驗(yàn)更流暢
tu1.png

描述	普通樣式	兩邊縮放
一屏三頁(yè)	img6.gif	img7.gif

IndicatorView	IndicatorStyle
INDICATOR_CIRCLE	INDICATOR_CIRCLE_RECT
img1.gif	img2.gif
INDICATOR_BEZIER	INDICATOR_DASH
img3.gif	img4.gif
INDICATOR_BIG_CIRCLE
img5.gif

效果圖	1	2
收集更多的效果	img12.gif	img13.gif
Indicator查看simple代碼	img14.gif	img15.gif
img16.gif	img17.gif	img18.gif
img19.gif	img20.gif	...

Banner使用步驟

Step 1.依賴banner

點(diǎn)擊前往項(xiàng)目地址

Step 2.xml

<com.to.aboomy.pager2.Banner
    android:id="@+id/banner"
    android:layout_width="match_parent"
    android:layout_height="150dp"/>

Step 3.自定義RecyclerView.Adapter

//自定義adapter
public class ImageAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> 
//或者使用其他三方框架岂昭，都是支持的以现，如：BRVAH
public class ImageAdapter extends BaseQuickAdapter<String, BaseViewHolder> {
    public ImageAdapter() { super(R.layout.item_image); }
    @Override
    protected void convert(@NonNull BaseViewHolder helper, String item) {
        Glide.with(mContext)
                .load(item)
                .into((ImageView) helper.getView(R.id.img));
    }
}

Step 4.在頁(yè)面中使用Banner

 @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        banner = findViewById(R.id.banner);
        //使用內(nèi)置Indicator
        IndicatorView indicator = new IndicatorView(this)
              .setIndicatorColor(Color.DKGRAY)
              .setIndicatorSelectorColor(Color.WHITE);
        
        //創(chuàng)建adapter
         ImageAdapter adapter = new ImageAdapter();
         
         //傳入RecyclerView.Adapter 即可實(shí)現(xiàn)無(wú)限輪播
         banner.setIndicator(indicator)
              .setAdapter(adapter);
    }

簡(jiǎn)單設(shè)置一屏三頁(yè)效果

//設(shè)置左右頁(yè)面露出來(lái)的寬度及item與item之間的寬度
.setPageMargin(UIUtil.dip2px(this, 20), UIUtil.dip2px(this, 10))
//內(nèi)置ScaleInTransformer，設(shè)置切換縮放動(dòng)畫(huà)
.setPageTransformer(true, new ScaleInTransformer())

Banner提供的方法介紹

三.核心的輪播思想

查看banner安利一款輪播控件，與ViewPager版本基本一致外傅，采用count+2的方式纪吮，實(shí)現(xiàn)無(wú)限輪播。

我們以數(shù)據(jù)源四張圖片舉個(gè)實(shí)際例子：needCount(6) = count(4) + 2 栏豺，實(shí)際輪播的圖片是有6張彬碱，存放在banner中對(duì)應(yīng)：

image

我們可以看到在實(shí)際的index=0是圖片的最后一張，index=5是圖片的第一張奥洼，我們只要當(dāng)右滑動(dòng)到index=5時(shí)巷疼，通過(guò) viewPager.setCurrentItem(1, false);切換至第一張,當(dāng)左滑懂到index=0，通過(guò)viewPager.setCurrentItem(count, false);切換到實(shí)際圖片的最后一張灵奖，進(jìn)行過(guò)渡實(shí)現(xiàn)了循環(huán)輪播的一個(gè)效果嚼沿。

• 一屏三頁(yè)
  還是以4張圖片舉個(gè)例子，一屏三頁(yè)瓷患，一次要展示三張圖片骡尽，相當(dāng)左右兩邊都加載了一張圖片，也就是多加載了2張圖片擅编，需要的數(shù)量：needCount(8) = count(4) + 4 ,實(shí)際輪播是有8張攀细，存放在banner對(duì)應(yīng)：

image

同樣的控制滑動(dòng)到最后一張圖片和第一張圖片對(duì)應(yīng)的索引位置，實(shí)現(xiàn)輪播的效果爱态，這里就不多說(shuō)了谭贪，具體可查看項(xiàng)目代碼實(shí)現(xiàn)。

四.如何支持任意ReyclerView.Adapter就可以實(shí)現(xiàn)無(wú)限輪播锦担？

1.為什么不封裝一個(gè)類似BaseRecyclerAdapter方便Banner中View的創(chuàng)建俭识？

主要考慮到RecyclerView的常用性，相信大家各自的項(xiàng)目都有類似于BaseRecyclerAdapter的封裝洞渔，加上市面上各種ReyclerAdapter框架套媚，因此個(gè)人覺(jué)得在banner中封裝一個(gè)類似BaseRecyclerAdapter的類缚态，提供出來(lái)實(shí)現(xiàn)是沒(méi)有太大的必要的，而且也滿足不了大部分的需求堤瘤。

2.基于ReyclerView.Apdater包裝類實(shí)現(xiàn)玫芦，支持任意Adapter框架

Banner內(nèi)部實(shí)現(xiàn)BannerAdapterWrapper，ReyclerView.Apdater包裝代理類宙橱，BannerAdapterWrapper內(nèi)部通過(guò)toRealPosition(position)返回真實(shí)索引姨俩，調(diào)用到委托給它的ReyclerView.Apdater返回其真實(shí)position，具體請(qǐng)查看banner源碼實(shí)現(xiàn)师郑，下面貼上關(guān)鍵代碼：

    public void setAdapter(@Nullable RecyclerView.Adapter adapter) {
        setAdapter(adapter, 0);
    }
    public void setAdapter(@Nullable RecyclerView.Adapter adapter, int startPosition) {
        bannerAdapterWrapper.registerAdapter(adapter);
        initPagerCount();
        startPager(startPosition);
    }
    
 private class BannerAdapterWrapper extends RecyclerView.Adapter<RecyclerView.ViewHolder> {

        private RecyclerView.Adapter adapter;

        @NonNull
        @Override
        public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
            return adapter.onCreateViewHolder(parent, viewType);
        }

        @Override
        public void onBindViewHolder(@NonNull ViewHolder holder, int position) {
            adapter.onBindViewHolder(holder, toRealPosition(position));
        }

        @Override
        public int getItemViewType(int position) {
            return adapter.getItemViewType(toRealPosition(position));
        }

        @Override
        public int getItemCount() {
            return needCount;
        }

        void registerAdapter(RecyclerView.Adapter adapter) {
            if (this.adapter != null) {
                this.adapter.unregisterAdapterDataObserver(itemDataSetChangeObserver);
            }
            this.adapter = adapter;
            if (this.adapter != null) {
                this.adapter.registerAdapterDataObserver(itemDataSetChangeObserver);
            }
        }
    }
//監(jiān)聽(tīng)Adapter數(shù)據(jù)變化环葵，刷新數(shù)據(jù)
private RecyclerView.AdapterDataObserver itemDataSetChangeObserver = new RecyclerView.AdapterDataObserver() {
    @Override
    public final void onItemRangeChanged(int positionStart, int itemCount) { onChanged(); }

    @Override
    public final void onItemRangeChanged(int positionStart, int itemCount, @Nullable Object payload) { onChanged(); }

    @Override
    public final void onItemRangeInserted(int positionStart, int itemCount) { onChanged(); }

    @Override
    public final void onItemRangeRemoved(int positionStart, int itemCount) { onChanged(); }

    @Override
    public final void onItemRangeMoved(int fromPosition, int toPosition, int itemCount) { onChanged(); }

    @Override
    public void onChanged() {
        if (viewPager2 != null && bannerAdapterWrapper != null) {
            initPagerCount();
            startPager(getCurrentPager());
        }
    }

五.ViewPager2頁(yè)面速度切換太快，怎么設(shè)置頁(yè)面的切換速度宝冕，默認(rèn)的太快张遭，導(dǎo)致看起來(lái)像是卡頓的Issues

• 其實(shí)ViewPager實(shí)現(xiàn)的版本也有這個(gè)問(wèn)題，我們先看下Viewpager是如何解決的：

//自定義scroller
class ViewPagerScroller extends Scroller {
    private int scrollDuration = 800;
    ViewPagerScroller(Context context) {
        super(context);
    }
    @Override
    public void startScroll(int startX, int startY, int dx, int dy, int duration) {
        super.startScroll(startX, startY, dx, dy, scrollDuration);
    }
    @Override
    public void startScroll(int startX, int startY, int dx, int dy) {
        super.startScroll(startX, startY, dx, dy, scrollDuration);
    }
    void setScrollDuration(int scrollDuration) {
        this.scrollDuration = scrollDuration;
    }
}
//反射替換了Viewpager中的成員變量mScroller
private void initViewPagerScroll() {
    try {
        Field scrollerField = ViewPager.class.getDeclaredField("mScroller");
        scrollerField.setAccessible(true);
        scrollerField.set(this, scroller);
    } catch (NoSuchFieldException | IllegalArgumentException e) {
        e.printStackTrace();
    } catch (IllegalAccessException e) {
        e.printStackTrace();
    }
}

• ViewPager2內(nèi)部是基于ReyclerView實(shí)現(xiàn)的地梨，如何控制頁(yè)面的切換速度菊卷，其實(shí)就是控制RecyclerView的切換速度，于是就搜索一番宝剖，查看如何修改ReyclerView滾動(dòng)速度洁闰，通過(guò)文章發(fā)現(xiàn)smoothScrollToPosition是我們的核心方法，其實(shí)現(xiàn)是在LayoutManger中万细，于是通過(guò)hook方式替換掉ViewPager2中的LinearLayoutManager扑眉，自定義LinearSmoothScroller處理滑動(dòng)時(shí)間。

Hook方式替換ViewPager2中的LinearLayoutManager

查看Viewpager2源碼赖钞，內(nèi)部設(shè)置在RcyclerView上的LayoutManger是基于LinearLayoutManager的LinearLayoutManagerImpl做了擴(kuò)展腰素。

private class LinearLayoutManagerImpl extends LinearLayoutManager {
    LinearLayoutManagerImpl(Context context) {
        super(context);
    }

    @Override
    public boolean performAccessibilityAction(@NonNull RecyclerView.Recycler recycler,
            @NonNull RecyclerView.State state, int action, @Nullable Bundle args) {
        if (mAccessibilityProvider.handlesLmPerformAccessibilityAction(action)) {
            return mAccessibilityProvider.onLmPerformAccessibilityAction(action);
        }
        return super.performAccessibilityAction(recycler, state, action, args);
    }

    @Override
    public void onInitializeAccessibilityNodeInfo(@NonNull RecyclerView.Recycler recycler,
            @NonNull RecyclerView.State state, @NonNull AccessibilityNodeInfoCompat info) {
        super.onInitializeAccessibilityNodeInfo(recycler, state, info);
        mAccessibilityProvider.onLmInitializeAccessibilityNodeInfo(info);
    }

    @Override
    protected void calculateExtraLayoutSpace(@NonNull RecyclerView.State state,
            @NonNull int[] extraLayoutSpace) {
        int pageLimit = getOffscreenPageLimit();
        if (pageLimit == OFFSCREEN_PAGE_LIMIT_DEFAULT) {
            // Only do custom prefetching of offscreen pages if requested
            super.calculateExtraLayoutSpace(state, extraLayoutSpace);
            return;
        }
        final int offscreenSpace = getPageSize() * pageLimit;
        extraLayoutSpace[0] = offscreenSpace;
        extraLayoutSpace[1] = offscreenSpace;
    }

    @Override
    public boolean requestChildRectangleOnScreen(@NonNull RecyclerView parent,
            @NonNull View child, @NonNull Rect rect, boolean immediate,
            boolean focusedChildVisible) {
        return false; // users should use setCurrentItem instead
    }
}

定義“要hook的對(duì)象”的代理類，并且創(chuàng)建該類的對(duì)象

private class ProxyLayoutManger extends LinearLayoutManager {

        //這個(gè)是ViewPager2中的LinearLayoutManagerImpl對(duì)象
        private RecyclerView.LayoutManager linearLayoutManager;

        ProxyLayoutManger(Context context, RecyclerView.LayoutManager layoutManager) {
            super(context);
            this.linearLayoutManager = layoutManager;
        }

        @Override
        public boolean performAccessibilityAction(@NonNull RecyclerView.Recycler recycler,
                                                  @NonNull RecyclerView.State state, int action, @Nullable Bundle args) {
            return linearLayoutManager.performAccessibilityAction(recycler, state, action, args);
        }

        @Override
        public void onInitializeAccessibilityNodeInfo(@NonNull RecyclerView.Recycler recycler,
                                                      @NonNull RecyclerView.State state, @NonNull AccessibilityNodeInfoCompat info) {
            linearLayoutManager.onInitializeAccessibilityNodeInfo(recycler, state, info);
        }

        @Override
        public boolean requestChildRectangleOnScreen(@NonNull RecyclerView parent,
                                                     @NonNull View child, @NonNull Rect rect, boolean immediate,
                                                     boolean focusedChildVisible) {
            return linearLayoutManager.requestChildRectangleOnScreen(parent, child, rect, immediate);
        }
            
         //核心處理頁(yè)面切換速度的方法
        @Override
        public void smoothScrollToPosition(RecyclerView recyclerView, RecyclerView.State state, int position) {
            LinearSmoothScroller linearSmoothScroller = new LinearSmoothScroller(recyclerView.getContext()) {
                @Override
                protected int calculateTimeForDeceleration(int dx) {
                    return (int) (pagerScrollDuration * (1 - .3356));
                }
            };
            linearSmoothScroller.setTargetPosition(position);
            startSmoothScroll(linearSmoothScroller);
        }

        @Override
        protected void calculateExtraLayoutSpace(@NonNull RecyclerView.State state,
                                                 @NonNull int[] extraLayoutSpace) {
            int pageLimit = viewPager2.getOffscreenPageLimit();
            if (pageLimit == ViewPager2.OFFSCREEN_PAGE_LIMIT_DEFAULT) {
                super.calculateExtraLayoutSpace(state, extraLayoutSpace);
                return;
            }
            final int offscreenSpace = getPageSize() * pageLimit;
            extraLayoutSpace[0] = offscreenSpace;
            extraLayoutSpace[1] = offscreenSpace;
        }

        private int getPageSize() {
            final RecyclerView rv = (RecyclerView) viewPager2.getChildAt(0);
            return getOrientation() == RecyclerView.HORIZONTAL
                    ? rv.getWidth() - rv.getPaddingLeft() - rv.getPaddingRight()
                    : rv.getHeight() - rv.getPaddingTop() - rv.getPaddingBottom();
        }
    }

成員linearLayoutManager雪营，其實(shí)就是ViewPager2中的LinearLayoutManagerImpl對(duì)象弓千，它復(fù)寫(xiě)的方法，我們?cè)诖眍愔型瑯訌?fù)寫(xiě)献起，并通過(guò)linearLayoutManager調(diào)用到其真正的實(shí)現(xiàn)上洋访，并且還多復(fù)寫(xiě)了我們需求的核心處理切換速度的smoothScrollToPosition方法。

最后替換掉ViewPager2中的LinearLayoutManagerImpl

貼出核心代碼

 private void initViewPagerScrollProxy(RecyclerView recyclerView) {
        try {
            Field LayoutMangerField = ViewPager2.class.getDeclaredField("mLayoutManager");
            LayoutMangerField.setAccessible(true);
            LinearLayoutManager o = (LinearLayoutManager) LayoutMangerField.get(viewPager2);
            ProxyLayoutManger proxyLayoutManger = new ProxyLayoutManger(getContext(), o);
            recyclerView.setLayoutManager(proxyLayoutManger);
            LayoutMangerField.set(viewPager2, proxyLayoutManger);
            Field pageTransformerAdapterField = ViewPager2.class.getDeclaredField("mPageTransformerAdapter");
            pageTransformerAdapterField.setAccessible(true);
            Object mPageTransformerAdapter = pageTransformerAdapterField.get(viewPager2);
            if (mPageTransformerAdapter != null) {
                Class<?> aClass = mPageTransformerAdapter.getClass();
                Field layoutManager = aClass.getDeclaredField("mLayoutManager");
                layoutManager.setAccessible(true);
                layoutManager.set(mPageTransformerAdapter, proxyLayoutManger);
            }
            Field scrollEventAdapterField = ViewPager2.class.getDeclaredField("mScrollEventAdapter");
            scrollEventAdapterField.setAccessible(true);
            Object mScrollEventAdapter = scrollEventAdapterField.get(viewPager2);
            if (mScrollEventAdapter != null) {
                Class<?> aClass = mScrollEventAdapter.getClass();
                Field layoutManager = aClass.getDeclaredField("mLayoutManager");
                layoutManager.setAccessible(true);
                layoutManager.set(mScrollEventAdapter, proxyLayoutManger);
            }
        } catch (NoSuchFieldException e) {
            e.printStackTrace();
        } catch (IllegalAccessException e) {
            e.printStackTrace();
        }
    }

最后

如果覺(jué)得喜歡那就star支持一下

點(diǎn)擊前往項(xiàng)目地址

如果覺(jué)得喜歡那就star支持一下