手把手教你用ViewPager自定義實現Banner輪播

歡迎大家關注Android開源網絡框架NoHttp：https://github.com/yanzhenjie/NoHttp 

　　我們在實際開發中，很多App都會在做一個廣告輪播器（可能是圖片，可能是其他View），很多同學都是使用別人封裝好的或者直接使用ViewPager自己來改，但是有人可能並不理解裡面的原理，或者有人遇到了手勢滑動沖突。我們今天就用150行代碼實現一自定義的廣告輪播器並不干擾原來View滑動事件。
　　本例代碼源碼及Demo傳送門

效果演示

需求分析、解決方案

　　輪播器最重要的幾個特點就是：自動滾動、手動滑動、滾動方向、每個Item顯示時間。因此我們設計提供以下幾個方法供外部調用：

/**
 * 設置每個Item的播放時間，默認3000毫秒
 */
public void setShowTime(int showTimeMillis);

/**
 * 設置滾動方向，默認向左滾動
 */
public void setDirection(Direction direction);

/**
 * 開始自動滾動
 */
public void start();

/**
 * 停止自動滾動
 */
public void stop();

/**
 * 播放上一個
 */
public void previous();

/**
 * 播放下一個
 */
public void next();

　　仔細看過上面方法的同學會發現，和我們的分析想比，還缺少一個手動滑動的方法，我們知道手勢滑動肯定要用到onTouch等方法，所以我們想到v4包下ViewPager自帶滑動效果，而且可以代碼控制跳轉到某個Item。因此我們自定義View繼承ViewPager不就完美解決了。
　　我們看到上面的方法中有一個Direction類，這個類不是系統的，是達哥自定義的方向控制枚舉，目前最常見的輪播方向無非就是左右輪播(上下本次先不討論)，代碼如下：

public enum Direction {
 /**
 * 向左行動，播放的下一張應該是右邊的
 */
 LEFT,

 /**
 * 向右行動，播放的下一張應該是左邊的
 */
 RIGHT
}

自定義View如何實現以及原理

　　上面分析到需要繼承ViewPager，so我們先結合上面的幾個方法把完整的代碼撸起來：

public class AutoPlayViewPager extends ViewPager {

 public AutoPlayViewPager(Context context) {
 super(context);
 }

 public AutoPlayViewPager(Context context, AttributeSet attrs) {
 super(context, attrs);
 }

 /**
 * 播放時間
 */
 private int showTime = 3 * 1000;
 /**
 * 滾動方向
 */
 private Direction direction = Direction.LEFT;

 /**
 * 設置播放時間，默認3秒
 *
 * @param showTimeMillis 毫秒
 */
 public void setShowTime(int showTimeMillis) {
 this.showTime = showTime;
 }

 /**
 * 設置滾動方向，默認向左滾動
 *
 * @param direction 方向
 */
 public void setDirection(Direction direction) {
 this.direction = direction;
 }

 /**
 * 開始
 */
 public void start() {
 // TODO 待實現開始播放
 }

 /**
 * 停止
 */
 public void stop() {
 // TODO 待實現停止播放
 }

 /**
 * 播放上一個
 */
 public void previous() {
 // TODO 待實現播放上一個
 }

 /**
 * 播放下一個
 */
 public void next() {
 // TODO 待實現播放下一個
 }

 public enum Direction {
 /**
  * 向左行動，播放的應該是右邊的
  */
 LEFT,

 /**
  * 向右行動，播放的應該是左邊的
  */
 RIGHT
 }
}

　　setShowTime(int showTimeMillis)方法和setDirection(Direction direction)就是記錄一下某一個狀態而已，現在已經簡單的實現了，重點就是開始播放和停止播放。 　　

定時輪播的原理分析和實現

　　前方高能，各位看官小心褲子別掉了。現在我們使用ViewPager最主要的就是自動播放了，所以我們需要一個定時器去執行任務，but這樣子就得用到Handler，就有點小題大做了。這裡介紹View的兩個方法：

// 線程將被添加到消息隊列，這個線程將會在UI線程（主線程）運行。
public boolean post(Runnable action);

// 線程將被添加到消息隊列，在指定的時間之後運行，這個線程將會在UI線程（主線程）運行。
public boolean postDelayed(Runnable action, long delayMillis);

　　看到第二個方法猶如醍醐灌頂啊有木有，既然是所有View都有的方法，ViewPager必須有啊，這樣不就可以在主線程定時發布一個任務了嗎？所以我們這裡寫一個Runnable來做這個定時任務。

/**
 * 播放器
 */
private Runnable player = new Runnable() {
 @Override
 public void run() {
 play(direction);
 }
};

　　這裡看到有一個play(direction);的方法待我們去實現，我們暫且把這個方法先放一放，我們先來看怎麼利用這個private Runnable player完成開始播放和停止播放。 　　

實現開始播放和停止播放

　　開始播放時我們為了讓當前顯示的圖片顯示showTime的時間，所以我們利用postDelayed(Runnable action, long delayMillis);方法在showTime時間之後觸發private Runnable player：

/**
 * 開始
 */
public void start() {
 postDelayed(player, showTime);
}

　　停止播放，我們把這個線程給取消了就行了，因此停止的方法的實現是：

/**
 * 停止
 */
public void stop() {
 removeCallbacks(player);
}

　　但是為了防止開發者不停的調用start方法造成卡死現象，我們在start中做個優化，每次star前先把之前private Runable player移除了，因此start方法完整的代碼是：

/**
 * 開始
 */
public void start() {
 stop();
 postDelayed(player, showTime);
}

核心重點：如何根據方向播放上一張和下一張

　　本例的核心和重點來了，現在回過頭去實現剛才擱置的play(direction);方法，它要根據播放的方向來播放上一張和下一張，我們具體看代碼，尤其要細細品味注釋哦：

/**
 * 執行播放
 *
 * @param direction 播放方向
 */
private synchronized void play(Direction direction) {
 // 拿到ViewPager的適配器
 PagerAdapter pagerAdapter = getAdapter();
 if (pagerAdapter != null) {// 判空
 // Item數量
 int count = pagerAdapter.getCount();
 // ViewPager現在顯示的第幾個？
 int currentItem = getCurrentItem();
 switch (direction) {
  case LEFT:// 如是向左滾動的，currentItem+1播放下一個
  currentItem++;

  // 如果+到最後一個了，就到第一個
  if (currentItem >= count)
   currentItem = 0;
  break;
  case RIGHT:// 如是向右滾動的，currentItem-1播放上一個
  currentItem--;

  // 如果-到低一個了，就到最後一個
  if (currentItem < 0)
   currentItem = count - 1;
  break;
 }
 setCurrentItem(currentItem);// 播放根據方向計算出來的position的item
 }

 // 這就是當可以循環播放的重點，每次播放完成後，再次開啟一個定時任務
 start();
}

　　到這裡其實我們已經實現輪播啦，但是我們在使用的時候發現存在一種情況，當我們用手指剛滑完一張，緊接著第二張又出來了，不賣關子了，原因就是我們手指滑動的時候private Runnable player這個任務沒有停止，所以我們在手指滑動時停止player，手指松開的時候再次開啟player：

@Override
protected void onFinishInflate() {
 addOnPageChangeListener(new OnPageChangeListener() {
 @Override
 public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
 }

 @Override
 public void onPageSelected(int position) {
 }

 @Override
 public void onPageScrollStateChanged(int state) {
  if (state == SCROLL_STATE_IDLE)
  start();
  else if (state == SCROLL_STATE_DRAGGING)
  stop();
 }
 });
}

　　有些同學可能不知道為什麼不在構造方法中而要在onFinishInflate中addOnPageChangeListener，是因為這個方法會在view被加載完成後調用，所以我們在這裡做一些初始化的工作比較合理。
　　自定義ViewPager的完整代碼如下：

package com.yolanda.autoviewpager;

import android.content.Context;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;

/**
 * <p>用ViewPager自定義的廣告輪播器。</p>.
 * 
 * @author Yolanda; 
 */
public class AutoPlayViewPager extends ViewPager {

 public AutoPlayViewPager(Context context) {
 super(context);
 }

 public AutoPlayViewPager(Context context, AttributeSet attrs) {
 super(context, attrs);
 }

 /**
 * 播放時間
 */
 private int showTime = 3 * 1000;
 /**
 * 滾動方向
 */
 private Direction direction = Direction.LEFT;
 /**
 * 設置播放時間，默認3秒
 *
 * @param showTimeMillis 毫秒
 */
 public void setShowTime(int showTimeMillis) {
 this.showTime = showTime;
 }

 /**
 * 設置滾動方向，默認向左滾動
 *
 * @param direction 方向
 */
 public void setDirection(Direction direction) {
 this.direction = direction;
 }

 /**
 * 開始
 */
 public void start() {
 stop();
 postDelayed(player, showTime);
 }

 /**
 * 停止
 */
 public void stop() {
 removeCallbacks(player);
 }

 /**
 * 播放上一個
 */
 public void previous() {
 if (direction == Direction.RIGHT) {
  play(Direction.LEFT);
 } else if (direction == Direction.LEFT) {
  play(Direction.RIGHT);
 }
 }

 /**
 * 播放下一個
 */
 public void next() {
 play(direction);
 }

 /**
 * 執行播放
 *
 * @param direction 播放方向
 */
 private synchronized void play(Direction direction) {
 PagerAdapter pagerAdapter = getAdapter();
 if (pagerAdapter != null) {
  int count = pagerAdapter.getCount();
  int currentItem = getCurrentItem();
  switch (direction) {
  case LEFT:
   currentItem++;
   if (currentItem > count)
   currentItem = 0;
   break;
  case RIGHT:
   currentItem--;
   if (currentItem < 0)
   currentItem = count;
   break;
  }
  setCurrentItem(currentItem);
 }
 start();
 }

 /**
 * 播放器
 */
 private Runnable player = new Runnable() {
 @Override
 public void run() {
  play(direction);
 }
 };

 public enum Direction {
 /**
  * 向左行動，播放的應該是右邊的
  */
 LEFT,
  /**
  * 向右行動，播放的應該是左邊的
  */
 RIGHT
 }

 @Override
 protected void onFinishInflate() {
 super.onFinishInflate();
 addOnPageChangeListener(new OnPageChangeListener() {
  @Override
  public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
  }

  @Override
  public void onPageSelected(int position) {
  }

  @Override
  public void onPageScrollStateChanged(int state) {
  if (state == SCROLL_STATE_IDLE)
   start();
  else if (state == SCROLL_STATE_DRAGGING)
   stop();
  }
 });
 }
}

如何使用

　　其實我們沒有對ViewPager做什麼太大的干涉，所以我們使用和原生的沒有什麼區別。這裡有幾個注意的地方也寫出來，免得有人踩坑。

如果使用自定ViewPager

AutoPlayViewPager autoPlayViewPage = (AutoPlayViewPager) findViewById(R.id.view_pager);
autoPlayViewPage.setAdapter(bannerAdapter);

// 以下兩個方法不是必須的，因為有默認值
autoPlayViewPage.setDirection(AutoPlayViewPager.Direction.LEFT);// 設置播放方向
autoPlayViewPage.setCurrentItem(200); // 設置每個Item展示的時間

autoPlayViewPage.start(); // 開始輪播

如何優化Adapter

　　其實我們看到就是多調用了一個star方法，但是還不夠，我們在適配器中還要做一點點小事情。為了能讓輪播無限循環，所以我們在getCount中返回int的最大值：

@Override
public int getCount() {
 return resIds == null ? 0 : Integer.MAX_VALUE;
}

　　resIds是我們的數據源。該了這個Count後，我們的instantiateItem()方法也要修改，不然會發生下標越界的異常，我們在拿到position後要做個處理：

@Override
public Object instantiateItem(ViewGroup container, int position) {
 position = position % resIds.size();
 Object xxoo = resIds.get(position);
 ...
}

本例代碼源碼：http://xiazai.jb51.net/201609/yuanma/AutoViewPager(jb51.net).rar

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持本站。