自己學習 Android 也有一段時間了, 從大二的開學之初開始寫 Android 程式，那時候自己真的什麼都是不會，除了自己有一些 Java 基礎之外，還好，感激當初堅持的自己，自己現在也可以獨自寫一些 Android 小程式了; 現在，哈哈，還有幾天，哦，三天吧，我就是一名大三的學生了，在大三的日子裡面，我會比較系統地學習 Android 知識，選擇用時間沉澱自己，當然，我會把我學到的知識，整理成部落格，畢竟，感覺自己比較喜歡寫東西，哈哈…

Android 輪播圖在很多的場景，都是可以遇見它們的身影，它們有挺多的特點的：
- 帶有指示器
- 每一張圖帶有標題
- 可以手動向左，或者向右滑動
- 自動滑動

效果如下圖

程式碼的實現邏輯

1. 在 .xml 檔案裡面添加布局

這個輪播框在 .xml 檔案裡面的佈局元件還算是挺簡單的，我就直接上程式碼吧，如果您有 Android 基礎，應該不難看懂的;

“`xml

2. 在 MainActivity 檔案中拿到相應的元件

我們需要拿到 ViewPager 以及灰色的 LieanerLayout 裡面的元件，以便於後面對元件填充內容;

這也是直接上程式碼吧：

/*
    * 初始化元件
    * */
    public void initView(){
        viewPager = (ViewPager) findViewById(R.id.viewPager);//用於填充圖片
 

        title = (TextView) findViewById(R.id.content);//用於填充標題
        point = (LinearLayout) findViewById(R.id.pointViews);//用於填充指示器原點
    }

3. 往空的輪播框裡面填充資料

• 首先準備好三張以上的圖片，最好五張吧，數量多，有利於除錯得出實驗結論; 把準備好的圖片放在下面的包路徑下面：

  

• 現在首先需要做的事情，是需要把圖片填充並且在 ViewPager 展示出來。需要在 ViewPager 中展示資料，我們就需要繼承實現一個 PageAdapter 的抽象類, 在 PagerAdapter 的原始碼裡面介紹到，如果我們實現了這一個類，我們必須實現以下四個重要的方法;

  private class MyAdapter extends PagerAdapter{
          //返回需要顯示的 view 個數
          @Override
          public int getCount() {
              return 0;
          }
  
          //返回 view 複用的規則
          @Override
          public boolean isViewFromObject(View view, Object object) {
              return false;
          }
  
          //返回需要展示的 view
          @Override
          public Object instantiateItem(ViewGroup container, int position) {
              return super.instantiateItem(container, position);
          }
  
          //銷燬已經展示的 view
          @Override
          public void destroyItem(ViewGroup container, int position, Object object) {
              super.destroyItem(container, position, object);
          }
      }

  • 第一個 getCount() 方法，在一般的 Adapter 類裡面都是可以找到的，它的作用主要是用來獲取需要展示在 ViewPager 的 View 的總數;

  • 第二個方法 isViewFromObject(View view, Object object) 比較重要，因為它是返回 view 複用的規則; 要了解這個方法以怎樣的方式複用 ViewPager，需要回到它的原始碼裡面:

    /**
    * Determines whether a page View is associated with a specific key object
    * as returned by {@link #instantiateItem(ViewGroup, int)}. This method is
    * required for a PagerAdapter to function properly.
    *
    * @param view Page View to check for association with <code>object</code>
    * @param object Object to check for association with <code>view</code>
    * @return true if <code>view</code> is associated with the key object <code>object</code>
    */
    public abstract boolean isViewFromObject(View view, Object object);

    原始碼介紹到,方法 isViewFromObject() 是用來確定當前輪播框顯示的 Page View 是否與方法 instantiateItem(ViewGroup, int) 返回來的 Object 相同，判斷 Page View 與 Object 相同是通過他們自身的一個特殊的 key，當各自的兩個 key 相同的時候，就可以在 viewPage 那裡顯示出對應的 page view了;

  • 第三個方法 instantiateItem(ViewGroup container, int position) 主要的作用是往 ViewGroup 這個容器裡面新增 view （需要顯示的），以及返回含有 View 的 Object 物件;

  • 第四個方法 destroyItem(ViewGroup container, int position, Object object) 也是比較重要的，它主要的作用是移除 ViewGroup 裡面的已經展示過的 View，如果沒有即時移除已經展示的 view 的話，會使程式崩潰的; 當 instantiateItem(ViewGroup container, int position) 這個方法放回一個 Object的時候，ViewPager 就是用這個作為 View 用來顯示的;

• 現在需要往 MyAdapter 裡面填充用來展示的資料。首先，我們應當拿到圖片的資源 ID ，而且把這些圖片資源 ID 用來建立用以展示的 ImageView 物件，再然後，把這些 ImageView 物件裝載到 List 裡面，方便填充到 MyAdapter 裡面;程式碼如下面：

  /**
   * 初始化資料
   */
  public void initData() {
      //獲取圖片的id
      imageId = new int[]{R.mipmap.a, R.mipmap.b, R.mipmap.c, R.mipmap.d, R.mipmap.e};
  
      //把 mImageView 裝在 mImageViewList列表裡面;
      for (int i = 0; i < imageId.length; i++) {
          mImageView = new ImageView(this);
          mImageView.setBackgroundResource(imageId[i]);
  
          mImageViewList.add(mImageView);
      }
  }

• 現在有了資料，就可以往 MyAdpter 裡面填充資料了，實現的邏輯如下：

  private class MyAdapter extends PagerAdapter {
  
      //返回需要顯示的 view 個數
      @Override
      public int getCount() {
          return mImageViewList.size();
      }
  
      //返回 view 複用的規則
      @Override
      public boolean isViewFromObject(View view, Object object) {
          return view == object;
      }
  
      //返回需要展示的 view
      @Override
      public Object instantiateItem(ViewGroup container, int position) {
          int newPosition = position % mImageViewList.size();
          ImageView imageView = mImageViewList.get(newPosition);
          container.addView(imageView);
  
          return imageView;
      }
  
      //銷燬已經展示的 view
      @Override
      public void destroyItem(ViewGroup container, int position, Object object) {
          //Log.d("測試destroyItem裡面的 object", "destroyItem: " + object);
          container.removeView((View)object);
      }
  }

• 然後通過 viewPager 的 setAdapter() 方法把 上面的 MyAdapter 裝載在裡面：

  /**
   * 配置 viewPager
   */
  public void initMyAdapter(){
      viewPager.setAdapter(new MyAdapter());
  }

• 通過上面的程式碼邏輯，我們就可以得到下面的效果圖了：
  

總結
目前我們實現了往 ViewPager 裡面填充圖片了，然後我接下來的部落格文章將會帶入每一個 View 帶有指示器和標題，而且指示器、標題跟隨者圖片一起運動的效果，感謝謝各位的閱讀…