轉自：https://github.com/pinguo-zhouwei/MZBannerView

MZBannerView

現在的APP Banner大多數千篇一律，前幾天看到魅族手機上所有魅族自家APP上的Banner效果不錯，於是就想著來仿著做一個類似的效果。因此就有了這個庫。但是為了使用方便，這個庫不僅僅只有仿魅族效果的BannerView 來使用，還可以當作普通的BannerView 來使用，還可以當作一個ViewPager 來使用。使用很方便，具體使用方法和API 請看後面的示例。

 －－－  左圖為魅族APP上的Banner效果，右圖是高仿效果。

MZBannerView 有以下功能：

1 . 仿魅族BannerView 效果。

2 . 當普通Banner 使用

3 . 當普通ViewPager 使用。

4 . 當普通ViewPager使用(有魅族Banner效果)

Demo APK

gif圖片有點模糊，可以掃描下方二維碼下載APK體驗

Dependency

Add it in your root build.gradle at the end of repositories:

allprojects {
     repositories {
          ...
          maven { url 'https://jitpack.io'
 
 }
     }
}

Step 2. Add the dependency

dependencies {
         compile 'com.github.pinguo-zhouwei:MZBannerView:v1.0.1'
}

自定義屬性

通過open_mz_mode和canLoop這兩個屬性來控制MZBannerView 是用作Banner還是普通ViewPager,有4種組合方式

1，仿魅族BannerView(預設的模式)

app:open_mz_mode="true"
app:canLoop="true"

2, 普通BannerView

app:open_mz_mode="false"
app:canLoop="true"

3 ,普通ViewPager (有魅族Banner的切換動畫)

app:open_mz_mode="true"
app:canLoop="false"

4, 普通ViewPager

app:open_mz_mode="false"
app:canLoop="false"

使用方法

1 . xml 佈局檔案

 <com.zhouwei.mzbanner.MZBannerView
       android:id="@+id/banner"
       android:layout_width="match_parent"
       android:layout_height="200dp"
       android:layout_marginTop="10dp"
       app:open_mz_mode="true"
       app:canLoop="true"
       app:indicatorAlign="center"
       app:indicatorPaddingLeft="10dp"
       />

2 . activity中程式碼：

        mMZBanner = (MZBannerView) view.findViewById(R.id.banner);
     
       // 設定資料
        mMZBanner.setPages(list, new MZHolderCreator<BannerViewHolder>() {
            @Override
            public BannerViewHolder createViewHolder() {
                return new BannerViewHolder();
            }
        });

 public static class BannerViewHolder implements MZViewHolder<Integer> {
        private ImageView mImageView;
        @Override
        public View createView(Context context) {
            // 返回頁面佈局
            View view = LayoutInflater.from(context).inflate(R.layout.banner_item,null);
            mImageView = (ImageView) view.findViewById(R.id.banner_image);
            return view;
        }

        @Override
        public void onBind(Context context, int position, Integer data) {
            // 資料繫結
            mImageView.setImageResource(data);
        }
    }

3 .如果是當Banner使用，注意在onResume 中呼叫start()方法，在onPause中呼叫 pause() 方法。如果當普通ViewPager使用，則不需要。

 @Override
    public void onPause() {
        super.onPause();
        mMZBanner.pause();//暫停輪播
    }

    @Override
    public void onResume() {
        super.onResume();
        mMZBanner.start();//開始輪播
    }

其他對外API

    /******************************************************************************************************/
    /**                             對外API                                                               **/
    /******************************************************************************************************/
    //開始輪播
     start()
    //停止輪播
     pause()

    //設定BannerView 的切換時間間隔
     setDelayedTime(int delayedTime)
    // 設定頁面改變監聽器
    addPageChangeLisnter(ViewPager.OnPageChangeListener onPageChangeListener)

    //新增Page點選事件
     setBannerPageClickListener(BannerPageClickListener bannerPageClickListener)
    //設定是否顯示Indicator
    setIndicatorVisible(boolean visible)
    // 獲取ViewPager
    ViewPager getViewPager()
    // 設定 Indicator資源
    setIndicatorRes(int unSelectRes,int selectRes)
    //設定頁面資料
    setPages(List<T> datas,MZHolderCreator mzHolderCreator)
    //設定指示器顯示位置
    setIndicatorAlign(IndicatorAlign indicatorAlign)
    //設定ViewPager（Banner）切換速度
    setDuration(int duration)

因為是對ViewPager的包裝，所有要設定某些ViewPager的屬性，可以通過getViewPager 獲取到ViewPager再設定對應屬性

效果圖：

1, BannerView 輪播效果圖：

2 ，普通ViewPager效果圖:

Thanks

感謝Android-ConvenientBanner,Android-ConvenientBanner 是一個不錯的Banner庫，我也參考了其中的部分程式碼 有興趣的可以去看一下這個庫。