android banner安利一款輪播控件

Android輪播控件

安利一款banner，項目開發中用的到的banner，實現viewPager無限輪播功能，內置了圓形的IndicatorView，支持多種動畫切換。

• 支持一屏三頁
• 支持魅族效果
• 支持自定義Indicator
• 支持自定義view
• 支持數據刷新
• 解決下拉刷新等滑動衝突問題，如嵌套SwipeRefreshLayout
• 解決屢次重複回調onPageSelected問題
• 良好的代碼封裝，更多優化請參考代碼實現。

若是以爲喜歡那就start支持一下github.com/zguop/banne…

banner的實現核心思想是經過count+2的輪播思想，正是借鑑網紅庫github start數量最多的banner庫，貌似該庫並不支持一屏展現三頁的效果，有滑動到最後一頁空白的狀況。

簡單敘述下核心原理

• 一屏一頁 咱們以數據源四張圖片舉個實際例子：needCount(6) = count(4) + 2 ，實際輪播的圖片是有6張，存放在banner中對應：

咱們能夠看到在實際的index=0是圖片的最後一張，index=5是圖片的第一張，咱們只要當右滑動到index=5時，經過 viewPager.setCurrentItem(1, false);切換至第一張,當左滑懂到index=0，經過viewPager.setCurrentItem(count, false);切換到實際圖片的最後一張，進行過渡實現了循環輪播的一個效果。

• 一屏三頁 仍是以4張圖片舉個例子，一屏三頁，一次要展現三張圖片，至關左右兩邊都加載了一張圖片，也就是多加載了2張圖片，須要的數量：needCount(8) = count(4) + 4 ,實際輪播是有8張，存放在banner對應：

一樣的控制滑動到最後一張圖片和第一張圖片對應的索引位置，實現輪播的效果，這裏就很少說了，具體可查看項目代碼實現。

效果圖

點擊下載 banner.apk 體驗

---

描述	圖片
基本使用的功能，請下載apk體驗更流暢

描述	普通樣式	兩邊縮放	魅族樣式
一屏三頁

效果圖	1	2
Indicator查看simple代碼

使用步驟

Step 1.依賴banner

前往目標地址位置 banner

Step 2.xml

<com.to.aboomy.banner.Banner android:id="@+id/banner" android:layout_width="match_parent" android:layout_height="250dp"/>
複製代碼

Step 3.自定義HolderCreator

//實現HolderCreator接口
public interface HolderCreator {
    View createView(Context context,final int index, Object o);
}

//舉個栗子
public class ImageHolderCreator implements HolderCreator {
    @Override
    public View createView(final Context context, final int index, Object o) {
        ImageView iv = new ImageView(context);
        iv.setScaleType(ImageView.ScaleType.FIT_XY);
        Glide.with(iv).load(o).into(iv);
        //內部實現點擊事件
        iv.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(context, index + "", Toast.LENGTH_LONG).show();
            }
        });
        return iv;
    }
}
複製代碼

Step 4.在頁面中使用Banner

@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        banner = findViewById(R.id.banner);
        //使用內置Indicator
        IndicatorView indicator = new IndicatorView(this)
              .setIndicatorColor(Color.DKGRAY)
              .setIndicatorSelectorColor(Color.WHITE);
        banner.setIndicator(indicator)
              .setHolderCreator(new ImageHolderCreator())
              .setPages(list);
    }
複製代碼

簡單設置一屏三頁效果

//設置左右頁面露出來的寬度及item與item之間的寬度
.setPageMargin(UIUtil.dip2px(this, 20), UIUtil.dip2px(this, 10))
//內置ScaleInTransformer，設置切換縮放動畫
.setPageTransformer(true, new ScaleInTransformer())
    
複製代碼

關於ViewPager切換動畫

Sample中集成了如下兩個ViewPager切換動畫，請運行Sample查看動畫效果，參考須要的ViewPagerTransform放到項目中，或者根據需求進行自定義。

ViewPagerTransforms

MagicViewPager

如何自定義Indicator

//實現Indicator接口
/** * 能夠實現該接口，自定義Indicator 可參考內置的{@link IndicatorView} */
public interface Indicator extends ViewPager.OnPageChangeListener {

    /** * 當數據初始化完成時調用 * * @param pagerCount pager數量 */
    void initIndicatorCount(int pagerCount);

    /** * 返回一個View，添加到banner中 */
    View getView();

    /** * banner是一個RelativeLayout，設置banner在RelativeLayout中的位置，能夠是任何地方 */
    RelativeLayout.LayoutParams getParams();
}

//舉個栗子
public class IndicatorView extends View implements Indicator{
       
        @Override
        public void initIndicatorCount(int pagerCount) {
            this.pagerCount = pagerCount;
            setVisibility(pagerCount > 1 ? VISIBLE : GONE);
            requestLayout();
        }
    
        @Override
        public View getView() {
            return this;
        }
         /** * 控制Indicator在Banner中的位置，開發者自行實現 */
        @Override
        public RelativeLayout.LayoutParams getParams() {
            if (params == null) {
                params = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
                params.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM);
                params.addRule(RelativeLayout.CENTER_HORIZONTAL);
                params.bottomMargin = dip2px(10);
            }
            return params;
        }
        /** * banner切換時同步回調的三個方法 */
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            selectedPage = position;
            offset = positionOffset;
            invalidate();
        }
        
        @Override
        public void onPageSelected(int position) {
        }
        
        @Override
        public void onPageScrollStateChanged(int state) {
        }
}

複製代碼

Banner提供的方法介紹，banner未提供任何自定義屬性

方法名	描述
setPageTransformer(boolean reverseDrawingOrder, ViewPager.PageTransformer transformer)	設置viewpager的自定義動畫
setOuterPageChangeListener(ViewPager.OnPageChangeListener outerPageChangeListener)	設置viewpager的滑動監聽
setAutoTurningTime(long autoTurningTime)	設置自動輪播時長
setPagerScrollDuration(int pagerScrollDuration)	設置viewpager的切換時長
setAutoPlay(boolean autoPlay)	設置是否自動輪播，大於1頁能夠輪播
setIndicator(Indicator indicator)	設置indicator
setIndicator(Indicator indicator, boolean attachToRoot)	設置indicator
HolderCreator(HolderCreator holderCreator))	設置view建立接口
setPages(List<?> items)	加載數據，此方法時開始輪播的方法，請再最後調用
setPages(List<?> items, int startPosition)	重載方法，設置輪播的起始位置
isAutoPlay()	是否無限輪播
getCurrentPager()	獲取viewPager位置
startTurning()	開始輪播
stopTurning()	中止輪播
setPageMargin(int multiWidth, int pageMargin)	設置一屏多頁
setPageMargin(int leftWidth, int rightWidth, int pageMargin)	設置一屏多頁,方法重載

內置IndicatorView使用方法介紹，沒有提供任何自定義屬性

方法名	描述
setIndicatorRadius(float indicatorRadius)	設置圓點半徑
setIndicatorSpacing(float indicatorSpacing)	設置圓點間距
setIndicatorStyle(@IndicatorStyle int indicatorStyle)	設置圓點切換動畫，內置三種切換動畫，請參考Sample
setIndicatorColor(@ColorInt int indicatorColor)	設置默認的圓點顏色
setIndicatorSelectorColor(@ColorInt int indicatorSelectorColor)	設置選中的圓點顏色
setParams(RelativeLayout.LayoutParams params)	設置IndicatorView在banner中的位置，默認底部居中，距離底部10dp，請參考Sample