ViewPager系列之 仿魅族應用的廣告BannerView
前言
Banner廣告位是APP 中的一個非常重要的位置，為什么呢？因為它能帶來money。是一個公司很重要的一個營收點。像那種用戶數基數特別大的產品，如非死book、推ter、QQ、微信等等。Banner廣告位日營收估計得上千萬美刀（猜的,不知道具體數據）。一個漂亮的Banner往往能夠吸引用戶的眼球，引導用戶點擊，從而提高轉化率。遺憾的是現在的大多數產品的Banner都是千篇一律的，沒有什么亮點可言。但是前幾天在魅族手機上發現了一個效果不錯的Banner，魅族所有自家的APP所用的Banner 引起了我的注意。效果是這樣子的：
meizuapp.gif
看到這個Banner 第一眼就吸引了我，隨后就反復的體驗了幾次了，感覺這種Banner的效果還不錯。最后想著高仿一個和這種效果差不多的BannerView 。那么本文就講一下如何實現這樣一個BannerView。最終實現的效果如下：
MZBannerView.gif
目錄
本文會講實現仿魅族Banner效果所要用到的一些關鍵知識點，目錄如下圖所示。所有的效果已經封裝成一個庫。詳細代碼請看github: https://github.com/pinguo-zhouwei/MZBannerView
本文目錄.png
仿魅族Banner 效果
在開始實現魅族Banner效果之前，我們先來整理一下實現一個BannerView的思路，首先需要用ViewPager，其次讓ViewPager無限輪播。其實BannerView就是一個無限輪播的ViewPager，然后做一些封裝處理，讓使用更加簡單就ok。
現在我們在來看一下魅族的這個Banner。他與普通的banner的區別是當前頁顯示了前一頁和后一頁的部分內容。
ViewPager展示多頁.png
拋開切換時的動畫先不說，要實現這個效果的第一步就是要讓ViewPager在一個頁面顯示多頁的內容（當前頁＋前后頁部分）。
1 . ViewPager展示多頁
要讓ViewPager頁面展示多頁的內容，就要用到ViewGroup的一個強大的屬性。這個屬性雖然強大，但是也不常用，可能有些小伙伴不知道(之前我也沒用過...)，那就是 clipChildren 屬性。這個屬性有什么作用呢，我們看一下它的文檔介紹：
/**
* By default, children are clipped to their bounds before drawing. This
* allows view groups to override this behavior for animations, etc.
*
* @param clipChildren true to clip children to their bounds,
* false otherwise
* @attr ref android.R.styleable#ViewGroup_clipChildren
*/</code></pre>
clipChildren:默認值為true, 子View 的大小只能在父View規定的范圍之內，比如父View的高為50，子View的高為60 ,那么多處的部分就會被裁剪。如果我們設置這個值為false的話，那么多處的部分就不會被裁剪了。
這里我們就可以利用這個屬性來實現了這個效果了，我們設置ViewPager的父布局的 clipChildren 為false。然后設置ViewPager 左右一定的邊距，那么左右就空出了一定的區域，利用 clipChildren 屬性，就能讓前后頁面的部分顯示在當前頁了。布局如下：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:clipChildren="false"
android:orientation="vertical"
>
<android.support.v4.view.ViewPager
android:id="@+id/view_pager"
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_marginLeft="30dp"
android:layout_marginRight="30dp"
/>
</LinearLayout>
這樣就能實現ViewPager 展示前后頁面的部分內容。
2 . 自定義ViewPager.PageTransformer動畫
上面實現了ViewPager當前頁面顯示前后頁的部分內容，但是從最開始魅族的Banner效果我們可以看出，滑動的時候是有 一個放大縮小的動畫的。左右顯示的部分有一定比例的縮小。這就要用到ViewPager.PageTransformer了。
ViewPager.PageTransformer 干什么的呢？ViewPager.PageTransformer 是用來做ViewPager切換動畫的，它是一個接口，里面只有一個方法 transformPage 。
public interface PageTransformer {
/**
* Apply a property transformation to the given page.
*
* @param page Apply the transformation to this page
* @param position Position of page relative to the current front-and-center
* position of the pager. 0 is front and center. 1 is one full
* page position to the right, and -1 is one page position to the left.
*/
void transformPage(View page, float position);
}
雖然只有一個方法，但是它很強大，它能反映出在ViewPager滑動過程中，各個View的位置變化。我們拿到了這些位置變化，就能在這個過程中對View做各種各樣的動畫了。
要自定義動畫，我們就來需要知道positon這個值的變化區間。從官方給的ViewPager的兩個示例我們知道，position的變換有三個區間，［－Infinity，－1），［－1，1］，（1.Infinity）。
［－Infinity，－1）：已經在屏幕之外，看不到了
（1.Infinity）：已經在屏幕之外，看不到了。
［－1，1］：這個區間是我門操作View動畫的重點區間。
比如：從A頁面滑動到B頁面，A 頁面的位置變化為:0 －>-1,B頁面的的位置變化為:0－> 1 。
了解了這個方法的變化后，我們就來自定義我們的切換動畫,這里很簡單，我們只需要一個scale動畫。代碼如下：
/**
* Created by zhouwei on 17/5/26.
*/
public class CustomTransformer implements ViewPager.PageTransformer {
private static final float MIN_SCALE = 0.9F;
@Override
public void transformPage(View page, float position) {
if(position < -1){
page.setScaleY(MIN_SCALE);
}else if(position<= 1){
//
float scale = Math.max(MIN_SCALE,1 - Math.abs(position));
page.setScaleY(scale);
/*page.setScaleX(scale);
if(position<0){
page.setTranslationX(width * (1 - scale) /2);
}else{
page.setTranslationX(-width * (1 - scale) /2);
}*/
}else{
page.setScaleY(MIN_SCALE);
}
}
}
效果圖是這樣的：
仿魅族Banner效果圖.png
到此，我們仿魅族Banner的靜態效果就實現了。接下來我們就要讓Banner動起來，實現無限輪播效果。
圖片輪播
上面我們已經實現了Bannerd的靜態展示和切換動畫，那么我們現在就需要讓Banner動起來，實現無限輪播。
ViewPager實現Banner無效輪播效果有2種方案,第一種是：在列表的最前面插入最后一條數據，在列表末尾插入第一個數據，造成循環的假象。第二種方案是：采用getCount 返回 Integer.MAX_VALUE。結下來分別看一下這兩種方案。
1 . 在列表的最前面插入最后一條數據，在列表末尾插入第一個數據，造成循環的假象。
這種方法是怎么做的呢？，是這樣的：假如我們的列表有3條數據，用三個頁面展示，分別編號為1，2，3。我們再創建一個新的列表，長度為真實列表的長度＋2，也就是5。在最前面插入最后一條數據，然后在末尾插入第一條數據。新列表就變成了這樣了，3－1－2－3－1。如果當前滑到的是0位置（頁面3）,那就通過ViewPager的 setCurrentItem(int item, boolean smoothScroll) 方法神不知鬼不覺的切換到3位置（頁面3），當滑到4的位置時(頁面1),也用這個方法滑到1位置（頁面1）。這樣給我們的感覺就是無限輪播了。來一張圖輔助理解一下。
輪播切換示意圖.png
2 . 采用getCount 返回 Integer.MAX_VALUE
讓ViewPager 的Adapter getCount 方法返回一個很大的數（這里用Integer.MAX_VALUE），理論上可以無限滑動。當顯示完一個真實列表的周期后，又從真實列表的0位置顯示數據，造成無限循環輪播的假象。開始時調用 mViewPager.setCurrentItem(Integer.MAX_VALUE /2)設置選中中間位置，這樣最開始就可以向左滑動。關鍵代碼：
int currentItem = getStartSelectItem();
//設置當前選中的Item
mViewPager.setCurrentItem(currentItem);
private int getStartSelectItem(){
// 我們設置當前選中的位置為Integer.MAX_VALUE / 2,這樣開始就能往左滑動
// 但是要保證這個值與getRealPosition 的 余數為0，因為要從第一頁開始顯示
int currentItem = Integer.MAX_VALUE / 2;
if(currentItem % getRealCount() ==0 ){
return currentItem;
}
// 直到找到從0開始的位置
while (currentItem % getRealCount() == 0){
currentItem++;
}
return currentItem;
}
3 . 兩種方案選哪一種？
兩種方案我都試了一下，都可以實現輪播，但是第一種 方案在有切換動畫的時候是有問題的，因為上面我們說了滑動到最后一頁切換到第一頁時，用的是ViewPager的 setCurrentItem(int item, boolean smoothScroll) 方法，smoothScroll 的值為false,這樣界面就感覺不到我們偷偷的切換。但是這樣切換就沒有了動畫。這樣每次切換就會很生硬，因此就拋棄這種方法。選擇第二種方案。
輪播我們采用Hanlder的postDelayed方法，關鍵代碼如下：
private final Runnable mLoopRunnable = new Runnable() {
@Override
public void run() {
if(mIsAutoPlay){
mCurrentItem = mViewPager.getCurrentItem();
mCurrentItem++;
if(mCurrentItem == mAdapter.getCount() - 1){
mCurrentItem = 0;
mViewPager.setCurrentItem(mCurrentItem,false);
mHandler.postDelayed(this,mDelayedTime);
}else{
mViewPager.setCurrentItem(mCurrentItem);
mHandler.postDelayed(this,mDelayedTime);
}
}else{
mHandler.postDelayed(this,mDelayedTime);
}
}
};
在Adapter instantiateItem(ViewGroup container, final int position) 中，現在的這個position是一個很大的數字，我們需要將它轉換成一個真實的position，否則會越界報錯。
final int realPosition = position % getRealCount();
/**
* 獲取真實的Count
* @return
*/
private int getRealCount(){
return mDatas==null ? 0:mDatas.size();
}
通過以上就實現了仿魅族的BannerView，但是這還沒完，雖然功能實現了，要想在任何地方拿來就可以使用，簡單方便，我們還需要進一步的封裝。
封裝輪子：MZBannerView
通過上面幾步就可以實現仿魅族的BannerView,但是為了使用方便，我們將它封裝成一個庫，前面一篇文章講了，如何封裝一個通用的ViewPager（文章地址： ViewPager系列之 打造一個通用的ViewPager ）。既然要想Banner使用方便，我們也需要封裝得通用，可擴展。因為我們的Banner也是用ViewPager 實現的，因此，我們可用上一篇文章的方法，封裝一個通用的BannerView。
MZBannerView 有以下功能：
1 . 仿魅族BannerView 效果。
2 . 當普通Banner 使用
3 . 當普通ViewPager 使用。
4 . 當普通ViewPager使用(有魅族Banner效果)
自定義屬性
屬性名
屬性意義
取值
open_mz_mode
是否開啟魅族模式
true 為魅族Banner效果，false 則普通Banner效果
canLoop
是否輪播
true 輪播，false 則為普通ViewPager
indicatorPaddingLeft
設置指示器距離左側的距離
單位為 dp 的值
indicatorPaddingRight
設置指示器距離右側的距離
單位為 dp 的值
indicatorAlign
設置指示器的位置
有三個取值：left 左邊，center 劇中顯示，right 右側顯示
通過 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.setBannerPageClickListener(new MZBannerView.BannerPageClickListener() {
@Override
public void onPageClick(View view, int position) {
Toast.makeText(getContext(),"click page:"+position,Toast.LENGTH_LONG).show();
}
});
List<Integer> list = new ArrayList<>();
for(int i=0;i<RES.length;i++){
list.add(RES[i]);
}
// 設置數據
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 輪播效果圖：
仿魅族Banner效果.gif
2 普通ViewPager效果圖:
MZBanner普通ViewPager效果.gif
總結
本文講了如何實現一個仿魅族Banner效果。其中講了一些關鍵的點和關鍵代碼。其實普通的BannerView 是一樣的，只是少了動畫而已。最后，將這些功能封裝成了一個通用的BannerView 控件。 這個控件既有仿魅族Banner的效果，又可以當普通Banner使用。而且還可以當作一個普通的ViewPager使用。
項目主頁：http://www.baiduhome.net/lib/view/home/1496585426285