一個可以無限迴圈的輪播LoopSwitchView

ScreenShot

GIF

實現目標

• 可以手動左右滾動
• 可以自動輪播
• 自定義性強

實現思路

首先想到的是使用ViewPager，ViewPager本身在處理頁面左右滾動上已經很好了，在ViewPager的基礎上加上Handler讓他可以自動滾動。

遇到的問題

• 不能迴圈滾動，到ViewPager的最後一個再往後不能滾動，在第一個再往前也是不行。

解決思路

在0位置上顯示第count-1 的item，在count上顯示第0個item，也就是需要額外再ViewPager的Adapter getCount（）方法中增加 2，實現過程就變成滑動到0後就立即是viewPager.setCurrentItem(count-1),同樣滑動到count 就使viewPager.setCurrentItem(0)，也就通過這樣無縫對接輪播。

在nexus 6p上出現手動滑動卡頓問題

上面思路在大部分手機上都有很好的體驗，但是在部分手機上會出現卡頓，出現卡頓的原因就是在viewPager.setCurrentItem()，那麼我們可不可以避免呢，顯然使用ViewPager是不能避免這種情況的，那麼現在我們再想想我們原來只是增加了額外2個item，現在我增加100個呢，使用者滑動到臨界點的概率就大大降低了，我們就使用這種方式。

部分實現程式碼：

1. 首先看下AutoLoopSwitchBaseView.java 中佈局了ViewPager ，在這個View中我們定義一個Handler 傳送迴圈訊息。

在LoopHandler中定義了三種訊息型別

 //請求更新顯示的View。
    private static final int MSG_UPDATE = 1;
    //請求暫停輪播。
    public static final int MSG_STOP = 2;
    //請求恢復輪播。
    public static final int MSG_REGAIN = 3;

在public void handleMessage(Message msg)中處理這三種訊息

@Override
 public void handleMessage(Message msg) {
    super.handleMessage(msg);
  if
 
 (mView == null || mView.mHandler == null || mView.mPagerAdapter == null || mView.mIsDragging) {
    return;
  }

  Log.e("ryze", "stop: " + mIsStop);

  switch (msg.what) {
    case MSG_UPDATE:
      if (mIsStop || hasMessages(MSG_UPDATE)) {
        return;
      }
      if (mView.mPagerAdapter.getCount() > 1) {
        mView.mCurrentItem++;
        mView.mCurrentItem %= mView.mPagerAdapter.getCount();
        mView.mViewPager.setCurrentItem(mView.mCurrentItem, true);
        sendEmptyMessageDelayed(MSG_UPDATE, mView.getDurtion());
      }
      break;
    case MSG_STOP:
      if (hasMessages(MSG_UPDATE)) {
        removeMessages(MSG_UPDATE);
      }
      mIsStop = true;
      Log.e("ryze", "stop: MSG_STOP " + mIsStop);
      break;
    case MSG_REGAIN:
      if (hasMessages(MSG_UPDATE)) {
        removeMessages(MSG_UPDATE);
      }
      sendEmptyMessageDelayed(MSG_UPDATE, mView.getDurtion());
      mIsStop = false;
      Log.e("ryze", "stop: MSG_REGAIN " + mIsStop);
      break;
  } 

2.來看看Adapter的實現，在前面講到過大概的實現方式會在前後各增加一個，同時再增加當前 100 的倍數關係的數量 ，那麼getCount（） 的數量也就會是實際數量*100+2

  public static final int VIEWPAGER_RADIX = 100;

   @Override
 public final int getCount() {
   if (getDataCount() > 1) {
     //如果輪播個數大於1個，那麼需要輪播，增加基數，同時在首尾加上一個，
     return getDataCount() * VIEWPAGER_RADIX + 2;
   } else {
     return getDataCount();
   }
 }

3. 資料和自動滾動的訊息已經有了，同時前後增加的資料也增加了，那麼是怎麼實現迴圈播放的連線呢？

監聽ViewPager的OnPageChangeListener 在public void onPageScrollStateChanged(int i)

 @Override
 public void onPageScrollStateChanged(int i) {

if (i == ViewPager.SCROLL_STATE_DRAGGING) {
  mIsDragging = true;
} else if (i == ViewPager.SCROLL_STATE_IDLE) {
  if (mViewPager.getCurrentItem() == 0) {
    isLoopSwitch = true;
    mViewPager.setCurrentItem(mPagerAdapter.getCount() - 2, false);
  } else if (mViewPager.getCurrentItem() == mPagerAdapter.getCount() - 1) {
    isLoopSwitch = true;
    mViewPager.setCurrentItem(1, false);
  }
  mCurrentItem = mViewPager.getCurrentItem();

  if (mIsDragging && mHandler != null) {
    //如果從dragging狀態到不是mIsDragging
    mHandler.sendEmptyMessageDelayed(LoopHandler.MSG_UPDATE, getDurtion());
  }

  mIsDragging = false;

  Log.e("ryze", "onPageScrollStateChanged  " + i);
 }
}

原始碼

APK