Cover.png

MZBannerView

現(xiàn)在的APP Banner大多數(shù)千篇一律，前面看到魅族手機(jī)上所有魅族自家APP上的Banner效果不錯(cuò)，于是就想著來仿著做一個(gè)類似的效果。因此就有了這個(gè)庫。但是為了使用方便，這個(gè)庫不僅僅只有仿魅族效果的BannerView 來使用，還可以當(dāng)作普通的BannerView 來使用，還可以當(dāng)作一個(gè)ViewPager 來使用。使用很方便，具體使用方法和API 請看后面的示例。

Github 地址：https://github.com/pinguo-zhouwei/MZBannerView

魅族APP Banner效果

－－－

MZBannerView效果

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

MZBannerView 有以下功能：

1 . 仿魅族BannerView 效果。

2 . 當(dāng)普通Banner 使用

3 . 當(dāng)普通ViewPager 使用。

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

5 . 仿愛奇藝 APP Banner 效果

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:v2.0.0'
}

自定義屬性

使用方法

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);
     
       // 設(shè)置數(shù)據(jù)
        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) {
            // 數(shù)據(jù)綁定
            mImageView.setImageResource(data);
        }
    }

3 .如果是當(dāng)Banner使用，注意在onResume 中調(diào)用start()方法，在onPause中調(diào)用 pause() 方法。如果當(dāng)普通ViewPager使用，則不需要。

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

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

通過open_mz_mode、middle_page_cover和canLoop這3個(gè)屬性來控制MZBannerView 是用作Banner還是普通ViewPager,能控制多種Banner展示效果：

1 . 魅族Banner 效果，中間Page覆蓋兩邊。

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

Page 覆蓋效果

2 普通banner 使用。

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

普通Banner效果

上圖中的底部BannerView 示例。

3 仿魅族Banner 效果，中間Page不覆蓋。

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

Page不覆蓋效果

4 仿愛奇藝Banner效果，Page 之間有間隔。

 <com.zhouwei.mzbanner.MZBannerView
       android:id="@+id/banner_normal"
       android:layout_width="match_parent"
       android:layout_height="150dp"
       android:layout_marginTop="10dp"
       app:open_mz_mode="true"
       app:middle_page_cover="false"
       app:canLoop="true"
       app:indicatorAlign="center"
       />

除了上面的代碼外，還需要在Page 的item 布局里面設(shè)置左右Margin:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="match_parent"
              android:layout_height="match_parent">
    <ImageView
        android:id="@+id/banner_image"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"
        android:layout_marginLeft="4dp"
        android:layout_marginRight="4dp"
        />

效果如下：

仿愛奇藝Banner效果

5 有魅族Banner 效果的普通ViewPager 使用

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

魅族Banner效果的普通ViewPager

6 普通ViewPager 使用

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

普通ViewPager

上面都是用Banner 展示的本地?cái)?shù)據(jù)，但是項(xiàng)目中我們一般都是從網(wǎng)絡(luò)獲取Banner 數(shù)據(jù)，具體參考：RemoteTestFragment.java

從網(wǎng)絡(luò)獲取數(shù)據(jù)

其他對外API

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

    //設(shè)置BannerView 的切換時(shí)間間隔
     setDelayedTime(int delayedTime)
    // 設(shè)置頁面改變監(jiān)聽器
    addPageChangeLisnter(ViewPager.OnPageChangeListener onPageChangeListener)

    //添加Page點(diǎn)擊事件
     setBannerPageClickListener(BannerPageClickListener bannerPageClickListener)
    //設(shè)置是否顯示Indicator
    setIndicatorVisible(boolean visible)
    // 獲取ViewPager
    ViewPager getViewPager()
    // 設(shè)置 Indicator資源
    setIndicatorRes(int unSelectRes,int selectRes)
    //設(shè)置頁面數(shù)據(jù)
    setPages(List<T> datas,MZHolderCreator mzHolderCreator)
    //設(shè)置指示器顯示位置
    setIndicatorAlign(IndicatorAlign indicatorAlign)
    //設(shè)置ViewPager（Banner）切換速度
    setDuration(int duration)

因?yàn)槭菍iewPager的包裝，所有要設(shè)置某些ViewPager的屬性，可以通過getViewPager 獲取到ViewPager再設(shè)置對應(yīng)屬性

結(jié)尾

MZBannerView 全新升級到 v2.0.0 ,增加了新的兩種新的展示效果，和修復(fù)一些Bug,如有問題，歡迎提Issues ,或者評論區(qū)留言。