MZBannerView
現在的APP Banner大多數千篇一律，前面看到魅族手機上所有魅族自家APP上的Banner效果不錯，於是就想著來仿著做一個類似的效果。因此就有了這個庫。但是為了使用方便，這個庫不僅僅只有仿魅族效果的BannerView 來使用，還可以當作普通的BannerView 來使用，還可以當作一個ViewPager 來使用。使用很方便，具體使用方法和API 請看後面的示例。
Github 地址：MZBannerView
－－－
左圖為魅族APP上的Banner效果，右圖是高仿效果。
MZBannerView 有以下功能：
1 . 仿魅族BannerView 效果。
2 . 當普通Banner 使用
3 . 當普通ViewPager 使用。
4 . 當普通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`
}複製程式碼自定義屬性
| 屬性名 | 屬性意義 | 取值 |
|---|---|---|
| open_mz_mode | 是否開啟魅族模式 | true 為魅族Banner效果，false 則普通Banner效果 |
| canLoop | 是否輪播 | true 輪播，false 則為普通ViewPager |
| indicatorPaddingLeft | 設定指示器距離左側的距離 | 單位為 dp 的值 |
| indicatorPaddingRight | 設定指示器距離右側的距離 | 單位為 dp 的值 |
| indicatorAlign | 設定指示器的位置 | 有三個取值：left 左邊，center 劇中顯示，right 右側顯示 |
| middle_page_cover | 設定中間Page是否覆蓋（真正的魅族Banner效果） | true 覆蓋，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();//開始輪播
}複製程式碼通過open_mz_mode、middle_page_cover和canLoop這3個屬性來控制MZBannerView 是用作Banner還是普通ViewPager,能控制多種Banner展示效果：
1 . 魅族Banner 效果，中間Page覆蓋兩邊。
app:open_mz_mode="true"
app:canLoop="true"
app:middle_page_cover="true"複製程式碼2 普通banner 使用。
app:open_mz_mode="false"
app:canLoop="true"複製程式碼上圖中的底部BannerView 示例。
3 仿魅族Banner 效果，中間Page不覆蓋。
app:open_mz_mode="true"
app:canLoop="true"
app:middle_page_cover="false"複製程式碼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 佈局裡面設定左右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"
/>複製程式碼效果如下：
5 有魅族Banner 效果的普通ViewPager 使用
app:open_mz_mode="true"
app:canLoop="false"複製程式碼6 普通ViewPager 使用
app:canLoop="false"
app:open_mz_mode="false"複製程式碼上面都是用Banner 展示的本地資料，但是專案中我們一般都是從網路獲取Banner 資料，具體參考：RemoteTestFragment.java
###其他對外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再設定對應屬性
結尾
MZBannerView 全新升級到 v2.0.0 ,增加了新的兩種新的展示效果，和修復一些Bug,如有問題，歡迎提Issues ,或者評論區留言。
更多Android乾貨文章，關注公眾號【Android技術雜貨鋪】