快捷導(dǎo)航

Android 使用ViewPager實(shí)現(xiàn)左右循環(huán)滑動(dòng)及輪播效果

更新時(shí)間：2017年02月15日 14:35:10 作者：676598624

ViewPager是一個(gè)常用的Android組件，不過通常我們使用ViewPager的時(shí)候不能實(shí)現(xiàn)左右無限循環(huán)滑動(dòng)，在滑到邊界的時(shí)候會(huì)看到一個(gè)不能翻頁的動(dòng)畫，可能影響用戶體驗(yàn),接下來通過本文給大家介紹Android 使用ViewPager實(shí)現(xiàn)左右循環(huán)滑動(dòng)及輪播效果，一起看看吧

ViewPager是一個(gè)常用的Android組件，不過通常我們使用ViewPager的時(shí)候不能實(shí)現(xiàn)左右無限循環(huán)滑動(dòng)，在滑到邊界的時(shí)候會(huì)看到一個(gè)不能翻頁的動(dòng)畫，可能影響用戶體驗(yàn)。此外，某些區(qū)域性的ViewPager（例如展示廣告或者公告之類的ViewPager），可能需要自動(dòng)輪播的效果，即用戶在不用滑動(dòng)的情況下就能夠看到其他頁面的信息。

循環(huán)滑動(dòng)效果的實(shí)現(xiàn)：PagerAdapter

我們知道ViewPager自帶的滑動(dòng)效果非常出色，因此我們基本不需要處理這個(gè)滑動(dòng)，只處理內(nèi)容的顯示。而內(nèi)容的顯示是由Adapter控制的，因此這里重點(diǎn)就是這個(gè)Adapter了。為簡單起見，本例的每個(gè)View直接是一張圖片。下面是Adapter的代碼：

class ImageAdapter extends PagerAdapter {
 private ArrayList<ImageView> viewlist;
 public ImageAdapter(ArrayList<ImageView> viewlist) {
  this.viewlist = viewlist;
 }
 @Override
 public int getCount() {
  // 設(shè)置成最大，使用戶看不到邊界
  return Integer.MAX_VALUE;
 }
 @Override
 public boolean isViewFromObject(View arg0, Object arg1) {
  return arg0 == arg1;
 }
 @Override
 public void destroyItem(ViewGroup container, int position, Object object) {
  // Warning：不要在這里調(diào)用removeView
 }
 @Override
 public Object instantiateItem(ViewGroup container, int position) {
  // 對(duì)ViewPager頁號(hào)求模取出View列表中要顯示的項(xiàng)
  position %= viewlist.size();
  if (position < 0) {
   position = viewlist.size() + position;
  }
  ImageView view = viewlist.get(position);
  // 如果View已經(jīng)在之前添加到了一個(gè)父組件，則必須先remove，否則會(huì)拋出IllegalStateException。
  ViewParent vp = view.getParent();
  if (vp != null) {
   ViewGroup parent = (ViewGroup) vp;
   parent.removeView(view);
  }
  container.addView(view);
  // add listeners here if necessary
  return view;
 }
}

這里有幾個(gè)地方需要注意：

getCount() 方法的返回值：這個(gè)值直接關(guān)系到ViewPager的“邊界”，因此當(dāng)我們把它設(shè)置為Integer.MAX_VALUE之后，用戶基本就看不到這個(gè)邊界了。當(dāng)然，通常情況下設(shè)置為100倍實(shí)際內(nèi)容個(gè)數(shù)也是可以的，之前看的某個(gè)實(shí)現(xiàn)就是這么干的。

instantiateItem() 方法position的處理：由于我們?cè)O(shè)置了count為 Integer.MAX_VALUE，因此這個(gè)position的取值范圍很大很大，但我們實(shí)際要顯示的內(nèi)容肯定沒這么多（往往只有幾項(xiàng)），所以這里肯定會(huì)有求模操作。但是，簡單的求模會(huì)出現(xiàn)問題：考慮用戶向左滑的情形，則position可能會(huì)出現(xiàn)負(fù)值。所以我們需要對(duì)負(fù)值再處理一次，使其落在正確的區(qū)間內(nèi)。

instantiateItem() 方法父組件的處理：通常我們會(huì)直接addView，但這里如果直接這樣寫，則會(huì)拋出IllegalStateException。假設(shè)一共有三個(gè)view，則當(dāng)用戶滑到第四個(gè)的時(shí)候就會(huì)觸發(fā)這個(gè)異常，原因是我們?cè)噲D把一個(gè)有父組件的View添加到另一個(gè)組件。但是，如果直接寫成下面這樣：

(ViewGroup)view.getParent().removeView(view);

則又會(huì)因?yàn)橐婚_始的時(shí)候組件并沒有父組件而拋出NullPointerException。因此，需要進(jìn)行一次判斷。也就是上面的代碼。

destroyItem() 方法：由于我們?cè)趇nstantiateItem()方法中已經(jīng)處理了remove的邏輯，因此這里并不需要處理。實(shí)際上，實(shí)驗(yàn)表明這里如果加上了remove的調(diào)用，則會(huì)出現(xiàn)ViewPager的內(nèi)容為空的情況。

集成代碼：MainActivity

簡單布局 activity_main：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:paddingBottom="@dimen/activity_vertical_margin"
 android:paddingLeft="@dimen/activity_horizontal_margin"
 android:paddingRight="@dimen/activity_horizontal_margin"
 android:paddingTop="@dimen/activity_vertical_margin"
 tools:context="com.example.viewpagerdemo.MainActivity" >
 <android.support.v4.view.ViewPager
  android:id="@+id/main_viewpager"
  android:layout_width="match_parent"
  android:layout_height="150dp"
  android:layout_gravity="center" >
 </android.support.v4.view.ViewPager>
</RelativeLayout>

代碼操作MainActivity：

public class MainActivity extends Activity {
 private static final String LOG_TAG = "MainActivity";
 private ImageHandler handler = new ImageHandler(new WeakReference<MainActivity>(this));
 private ViewPager viewPager;
 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  // 初始化iewPager的內(nèi)容
  viewPager = (ViewPager) findViewById(R.id.main_viewpager);
  //數(shù)據(jù)集
  ArrayList<ImageView> views = new ArrayList<ImageView>();
  for (int i = 0; i < 7; i++) {
   ImageView view1 = new ImageView(this);
   if (i == 0) {
    view1.setImageResource(R.drawable.bargain_day1);
   } else if (i == 1) {
    view1.setImageResource(R.drawable.bargain_day2);
   } else if (i == 2) {
    view1.setImageResource(R.drawable.bargain_day3);
   } else if (i == 3) {
    view1.setImageResource(R.drawable.bargain_day4);
   } else if (i == 4) {
    view1.setImageResource(R.drawable.bargain_day5);
   } else if (i == 5) {
    view1.setImageResource(R.drawable.bargain_day6);
   } else if (i == 6) {
    view1.setImageResource(R.drawable.bargain_day7);
   }
   views.add(view1);
  }
  viewPager.setAdapter(new ImageAdapter(views));
  viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
   // 配合Adapter的currentItem字段進(jìn)行設(shè)置。
   @Override
   public void onPageSelected(int arg0) {
    handler.sendMessage(Message.obtain(handler, ImageHandler.MSG_PAGE_CHANGED, arg0, 0));
   }
   @Override
   public void onPageScrolled(int arg0, float arg1, int arg2) {
   }
   // 覆寫該方法實(shí)現(xiàn)輪播效果的暫停和恢復(fù)
   @Override
   public void onPageScrollStateChanged(int arg0) {
    switch (arg0) {
    case ViewPager.SCROLL_STATE_DRAGGING:
     handler.sendEmptyMessage(ImageHandler.MSG_KEEP_SILENT);
     break;
    case ViewPager.SCROLL_STATE_IDLE:
     handler.sendEmptyMessageDelayed(ImageHandler.MSG_UPDATE_IMAGE, ImageHandler.MSG_DELAY);
     break;
    default:
     break;
    }
   }
  });
  viewPager.setCurrentItem(Integer.MAX_VALUE / 2);// 默認(rèn)在中間，使用戶看不到邊界
  // 開始輪播效果
  handler.sendEmptyMessageDelayed(ImageHandler.MSG_UPDATE_IMAGE, ImageHandler.MSG_DELAY);
 }// end of onCreate
 //加上動(dòng)畫滑動(dòng)
 private static class ImageHandler extends Handler {
  /**
   * 請(qǐng)求更新顯示的View。
   */
  protected static final int MSG_UPDATE_IMAGE = 1;
  /**
   * 請(qǐng)求暫停輪播。
   */
  protected static final int MSG_KEEP_SILENT = 2;
  /**
   * 請(qǐng)求恢復(fù)輪播。
   */
  protected static final int MSG_BREAK_SILENT = 3;
  /**
   * 記錄最新的頁號(hào)，當(dāng)用戶手動(dòng)滑動(dòng)時(shí)需要記錄新頁號(hào)，否則會(huì)使輪播的頁面出錯(cuò)。
   * 例如當(dāng)前如果在第一頁，本來準(zhǔn)備播放的是第二頁，而這時(shí)候用戶滑動(dòng)到了末頁，
   * 則應(yīng)該播放的是第一頁，如果繼續(xù)按照原來的第二頁播放，則邏輯上有問題。
   */
  protected static final int MSG_PAGE_CHANGED = 4;
  // 輪播間隔時(shí)間
  protected static final long MSG_DELAY = 3000;
  // 使用弱引用避免Handler泄露.這里的泛型參數(shù)可以不是Activity，也可以是Fragment等
  private WeakReference<MainActivity> weakReference;
  private int currentItem = 0;
  protected ImageHandler(WeakReference<MainActivity> wk) {
   weakReference = wk;
  }
  @Override
  public void handleMessage(Message msg) {
   super.handleMessage(msg);
   Log.d(LOG_TAG, "receive message" + msg.what);
   MainActivity activity = weakReference.get();
   if (activity == null) {
    // Activity已經(jīng)回收，無需再處理UI了
    return;
   }
   // 檢查消息隊(duì)列并移除未發(fā)送的消息，這主要是避免在復(fù)雜環(huán)境下消息出現(xiàn)重復(fù)等問題。
   if (activity.handler.hasMessages(MSG_UPDATE_IMAGE)) {
    activity.handler.removeMessages(MSG_UPDATE_IMAGE);
   }
   switch (msg.what) {
   case MSG_UPDATE_IMAGE:
    currentItem++;
    activity.viewPager.setCurrentItem(currentItem);
    // 準(zhǔn)備下次播放
    activity.handler.sendEmptyMessageDelayed(MSG_UPDATE_IMAGE, MSG_DELAY);
    break;
   case MSG_KEEP_SILENT:
    // 只要不發(fā)送消息就暫停了
    break;
   case MSG_BREAK_SILENT:
    activity.handler.sendEmptyMessageDelayed(MSG_UPDATE_IMAGE, MSG_DELAY);
    break;
   case MSG_PAGE_CHANGED:
    // 記錄當(dāng)前的頁號(hào)，避免播放的時(shí)候頁面顯示不正確。
    currentItem = msg.arg1;
    break;
   default:
    break;
   }
  }
 }
}

其中輪播效果的實(shí)現(xiàn)：使用Handler進(jìn)行更新：

//加上動(dòng)畫滑動(dòng)
 private static class ImageHandler extends Handler {
  /**
   * 請(qǐng)求更新顯示的View。
   */
  protected static final int MSG_UPDATE_IMAGE = 1;
  /**
   * 請(qǐng)求暫停輪播。
   */
  protected static final int MSG_KEEP_SILENT = 2;
  /**
   * 請(qǐng)求恢復(fù)輪播。
   */
  protected static final int MSG_BREAK_SILENT = 3;
  /**
   * 記錄最新的頁號(hào)，當(dāng)用戶手動(dòng)滑動(dòng)時(shí)需要記錄新頁號(hào)，否則會(huì)使輪播的頁面出錯(cuò)。
   * 例如當(dāng)前如果在第一頁，本來準(zhǔn)備播放的是第二頁，而這時(shí)候用戶滑動(dòng)到了末頁，
   * 則應(yīng)該播放的是第一頁，如果繼續(xù)按照原來的第二頁播放，則邏輯上有問題。
   */
  protected static final int MSG_PAGE_CHANGED = 4;
  // 輪播間隔時(shí)間
  protected static final long MSG_DELAY = 3000;
  // 使用弱引用避免Handler泄露.這里的泛型參數(shù)可以不是Activity，也可以是Fragment等
  private WeakReference<MainActivity> weakReference;
  private int currentItem = 0;
  protected ImageHandler(WeakReference<MainActivity> wk) {
   weakReference = wk;
  }
  @Override
  public void handleMessage(Message msg) {
   super.handleMessage(msg);
   Log.d(LOG_TAG, "receive message" + msg.what);
   MainActivity activity = weakReference.get();
   if (activity == null) {
    // Activity已經(jīng)回收，無需再處理UI了
    return;
   }
   // 檢查消息隊(duì)列并移除未發(fā)送的消息，這主要是避免在復(fù)雜環(huán)境下消息出現(xiàn)重復(fù)等問題。
   if (activity.handler.hasMessages(MSG_UPDATE_IMAGE)) {
    activity.handler.removeMessages(MSG_UPDATE_IMAGE);
   }
   switch (msg.what) {
   case MSG_UPDATE_IMAGE:
    currentItem++;
    activity.viewPager.setCurrentItem(currentItem);
    // 準(zhǔn)備下次播放
    activity.handler.sendEmptyMessageDelayed(MSG_UPDATE_IMAGE, MSG_DELAY);
    break;
   case MSG_KEEP_SILENT:
    // 只要不發(fā)送消息就暫停了
    break;
   case MSG_BREAK_SILENT:
    activity.handler.sendEmptyMessageDelayed(MSG_UPDATE_IMAGE, MSG_DELAY);
    break;
   case MSG_PAGE_CHANGED:
    // 記錄當(dāng)前的頁號(hào)，避免播放的時(shí)候頁面顯示不正確。
    currentItem = msg.arg1;
    break;
   default:
    break;
   }
  }
 }

這里我定義了一個(gè)Handler來處理ViewPager的輪播。所謂的“輪播”效果實(shí)現(xiàn)起來是這樣的：每隔一定時(shí)間（這里是3秒）切換一次顯示的頁面。通過控制各頁面以一定順序循環(huán)播放，就達(dá)到了輪播的效果。為此，我們可以使用Handler的sendEmptyMessageDelayed()方法來實(shí)現(xiàn)定時(shí)更新，并注意用戶也可能會(huì)對(duì)帶有輪播效果的ViewPager手動(dòng)進(jìn)行滑動(dòng)操作，因此我認(rèn)為用戶這時(shí)候是希望查看指定頁面的，這時(shí)候應(yīng)該取消輪播。

以上所述是小編給大家介紹的Android 使用ViewPager實(shí)現(xiàn)左右循環(huán)滑動(dòng)及輪播效果，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: