Android教程網
  1. 首頁
  2. Android 技術
  3. Android 手機
  4. Android 系統教程
  5. Android 游戲
 Android教程網 >> Android技術 >> 關於Android編程 >> 手把手教你用ViewPager自定義實現Banner輪播

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

編輯:關於Android編程

歡迎大家關注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

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

  1. 上一頁:
  2. 下一頁:
熱門文章
閱讀排行版
Copyright © Android教程網 All Rights Reserved