本文和大家一起寫一個Android圖片輪播控件，供大家參考，具體內(nèi)容如下

1. 輪播控件的組成部分

    我們以知乎日報Android客戶端的輪播控件為例，分析一下輪播控件的主要組成：   

    首先我們要有用來顯示圖片的View對象，根據(jù)上圖中底部中央的5個點，我們知道需要5個ImageView來顯示需要輪播的圖片，另外還需要5個ImageView來顯示5個點?，F(xiàn)在考慮以下輪播組件應(yīng)該具有的行為，首先需要每隔一定時間間隔切換到下一張圖片，并且圖片間切換的效果應(yīng)該是平滑的，就像“翻書”一樣。由此我們可以想到將5個圖片當(dāng)做ViewPager的Page，這樣圖片切換時自然會有平滑的效果。接下來，我們還要給底部的5個小點找一個父容器，由于它們是線性排列的，所以用LinearLayout是再合適不過了。然后，我們還要把ViewPager和容納5個點的LinearLayout放入一個父容器中，這里我們選擇使用垂直排列子View的LinearLayout。

    這樣一來，我們就得到了輪播控件的布局文件（carousel_layout.xml)：

<?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"
       android:orientation="vertical">

  <android.support.v4.view.ViewPager
    android:id="@+id/view_pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

  <LinearLayout
    android:id="@+id/dots"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    android:gravity="center"
    android:orientation="horizontal"
    android:padding="8dp" >
  </LinearLayout>
  
</LinearLayout>

    通過對輪播控件的組成部分進(jìn)行分析，我們已經(jīng)確定了用什么“數(shù)據(jù)結(jié)構(gòu)”來表示一個輪播組件，那么接下來，我們要做的就是實現(xiàn)輪播組件的”算法“，也就是業(yè)務(wù)邏輯。

2. 輪播組件的行為分析

    輪播控件首先要具有的行為是自動播放，也就是每隔一定事件間隔（通常是3到5秒），便自動”翻到下一頁“。為了實現(xiàn)這一點，我們可以維護(hù)一個currentItem變量來記錄當(dāng)前正在顯示的圖片，然后設(shè)置一個定時任務(wù)，調(diào)用ViewPager的setCurrentItem方法設(shè)置當(dāng)前要顯示的圖片，并將currentItem設(shè)為下一張要顯示的圖片。有一點需要我們注意的便是播放到最后一張圖片時，下一個被顯示的應(yīng)該是第一個圖片，而且切換的效果也不再是平滑的。

    輪播控件的還要能響應(yīng)我們的滑動動作，也就是我們能夠通過左右滑動來在不同的圖片之間切換，這個行為ViewPager自動為我們提供了。另外還有一個輪播控件應(yīng)該具備的行為是：當(dāng)切換到指定圖片時，相應(yīng)的圓點應(yīng)該以區(qū)別其他4個圓點的顏色顯示，以便用戶能夠知道當(dāng)前正在播放的是第幾個圖片。要實現(xiàn)這一點也不復(fù)雜，只需要為ViewPager添加一個OnPageChangeListener監(jiān)聽器，然后重寫相應(yīng)的回調(diào)方法即可，這樣當(dāng)用戶選定了某個Page時，onPageSelected方法會被回調(diào)，系統(tǒng)會傳入當(dāng)前Page的索引，我們便可以根據(jù)這個索引設(shè)置相應(yīng)的圓點顏色。

 3. 輪播控件的具體實現(xiàn)

    經(jīng)過以上的分析，我們已經(jīng)清楚的了解了輪播組件的表示及業(yè)務(wù)邏輯，接下來只要我們用Java把這些描述出來就大功告成了。

（1）定時任務(wù)
    我們需要定時執(zhí)行“改變ViewPager當(dāng)前Page為下一個Page”這一任務(wù)，這里我們采用Handler來實現(xiàn)，代碼如下：

mHandler.postDelayed(task, DELAY);
  private final Runnable task = new Runnable() {
    @Override
    public void run() {
      if (isAutoPlay) {
        currentItem = (currentItem + 1) % (mTopStories.size());
        mVP.setCurrentItem(currentItem);
        mHandler.postDelayed(task, DELAY);
      } else {
        mHandler.postDelayed(task, DELAY);
      }
    }
  };

    在以上代碼中，DELAY代表我們設(shè)置的一個延遲常量（單位ms）。由于我們需要的是循環(huán)播放，因此第5張顯示完畢后應(yīng)該顯示第一張，所以我們要想第6行那樣進(jìn)行一個模運算，這樣currentItem就在0到4之間不停變化了。注意第5行有一個isAutoPlay變量，這個變量表示當(dāng)前是否應(yīng)該自動播放。那么什么時候不應(yīng)該自動播放呢？我們知道當(dāng)我們滑動手指切換圖片時，圖片會“跟隨”著我們的手，就好比我們翻書頁的時候，只有松開了手書頁才能落下。所以我們正在“拖動”圖片時，也就是我們的手還沒松開時，輪播控件是不應(yīng)該自動播放的。為了實現(xiàn)這一點，我們只需重寫OnPageChangeListener中的onPageScrollStateChanged方法，在當(dāng)前狀態(tài)為“拖動”時設(shè)置isAutoPlay變量為false。從第10行我們可以知道，當(dāng)autoPlay為false時，不會改變當(dāng)前顯示的圖片，僅僅會等過了DELAY指定的時間后再執(zhí)行下一次定時任務(wù)。 

（2）OnPageChangeListener
    上面我們提到了要給ViewPager添加一個OnPageChangeListener監(jiān)聽器對象，來實現(xiàn)小圓點顏色的改變以及autoPlay變量的賦值。具體的實現(xiàn)請看以下代碼，代碼的含義都很直接：

class TopOnPageChangeListener implements ViewPager.OnPageChangeListener {

    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

    }

    @Override
    public void onPageSelected(int position) {
      for (int i = 0; i < mDotsIV.size(); i++) {
        if (i == position) {
          mDotsIV.get(i).setImageResource(R.drawable.dot_focus);
        } else {
          mDotsIV.get(i).setImageResource(R.drawable.dot_blur);
        }
      }
    }

    @Override
    public void onPageScrollStateChanged(int state) {
      switch (state) {
        //SCROLL_STATE_DRAGGING
        case 1:
          isAutoPlay = false;
          break;
        //SCROLL_STATE_SETTLING
        case 2:
          isAutoPlay = true;
          break;
        default:
          break;
      }
    }
  }

    在以上代碼的第10到16行，我們重寫了onPageSelected方法，position參數(shù)表示當(dāng)前Page的索引。這個方法中，我們設(shè)置當(dāng)前圖片對應(yīng)的圓點圖片為dot_focus，設(shè)置其他圓點的圖片為dot_blur，這樣用戶就能知道當(dāng)前的位置。在第21行到32行，我們重寫了onPageScrollStateChanged方法，state參數(shù)代表了當(dāng)前的“滾動狀態(tài)，這個值為1表示當(dāng)前用戶正在”拖動“的過程中，因此要設(shè)置isAutoPlay為false；這個值為2表示用戶松開了手，圖片正在”滾動“中，這時我們就要把isAutoPlay設(shè)回默認(rèn)值true，恢復(fù)自動播放。

 (3) 更進(jìn)一步
    有時候我們希望能夠從最后一頁直接“翻到”第一頁，而這種行為默認(rèn)不被PagerView所支持，要想實現(xiàn)這個行為，我們可以在PagerView中增加一些“輔助頁”，并重寫OnPageChangeLisener中的相關(guān)方法。然而我們在很多場景中只需要保持PagerView的默認(rèn)行為就好，要注意增加任何功能都要考慮應(yīng)用場景，避免畫蛇添足。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助。

最新評論