View Pager 使用教學

最近一個計劃中需要用到ViewPager，參考了一些資料，所以將所得寫下來供日後參考。 如果還不知道什麼是view pager，可以想想看在home launcher上，透過手指滑動螢幕，而切換不同的頁面，這個UI就是view pager。以前如果要達到這個功能要自己寫，現在Google已經提供了，只要套用就好了。 首先我們需要先設定環境 
A: 下載Android compatibility。叫起SDK manager然後下載Compatiblity package. 

B. 將 android-sdk-windows/android-compatibility/v4/下的android-support-v4.jar這個檔案，拷貝到你專案下的libs目錄（如果沒有請自行建立），建立好之後，如果你的開發環境是Eclipse的話，請在你的專案下按右鍵選擇"refresh"之後，你就可以看到這個目錄和這個檔案了。

C: 最後我們只要將剛才複製的這個檔案加入build path就可以開始使用了。（在Eclipse下選擇這個檔案，然後按滑鼠右鍵，選擇"Build Path..."，然後選擇"Add to build path"就可以了) 

接下來就是在程式中使用View pager了，首先我們看看layout file，只要加上 android.support.v4.view.ViewPager就可以了。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#a4c639">
<android.support.v4.view.ViewPager
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:id="@+id/awesomepager"/>
</LinearLayout>

程式中要使用ViewPager來顯示資訊必須自己繼承PagerAdapter，來完成手指滑動切換視窗的動作。

package com.geekyouup.paug.awesomepager;

import android.app.Activity;
import android.content.Context;
import android.graphics.Color;
import android.os.Bundle;
import android.os.Parcelable;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.View;
import android.widget.TextView;

public class AwesomePagerActivity extends Activity {
    
 private ViewPager awesomePager;
 private static int NUM_AWESOME_VIEWS = 20;
 private Context cxt;
 private AwesomePagerAdapter awesomeAdapter;
 
 /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        cxt = this;
        
        awesomeAdapter = new AwesomePagerAdapter();
        awesomePager = (ViewPager) findViewById(R.id.awesomepager);
        awesomePager.setAdapter(awesomeAdapter);
    }
    
    private class AwesomePagerAdapter extends PagerAdapter{

  
  @Override
  public int getCount() {
   return NUM_AWESOME_VIEWS;
  }

     /**
      * Create the page for the given position.  The adapter is responsible
      * for adding the view to the container given here, although it only
      * must ensure this is done by the time it returns from
      * {@link #finishUpdate()}.
      *
      * @param container The containing View in which the page will be shown.
      * @param position The page position to be instantiated.
      * @return Returns an Object representing the new page.  This does not
      * need to be a View, but can be some other container of the page.
      */
  @Override
  public Object instantiateItem(View collection, int position) {
   TextView tv = new TextView(cxt);
   tv.setText("Bonjour PAUG " + position);
   tv.setTextColor(Color.WHITE);
   tv.setTextSize(30);
   
   ((ViewPager) collection).addView(tv,0);
   
   return tv;
  }

     /**
      * Remove a page for the given position.  The adapter is responsible
      * for removing the view from its container, although it only must ensure
      * this is done by the time it returns from {@link #finishUpdate()}.
      *
      * @param container The containing View from which the page will be removed.
      * @param position The page position to be removed.
      * @param object The same object that was returned by
      * {@link #instantiateItem(View, int)}.
      */
  @Override
  public void destroyItem(View collection, int position, Object view) {
   ((ViewPager) collection).removeView((TextView) view);
  }

  
  
  @Override
  public boolean isViewFromObject(View view, Object object) {
   return view==((TextView)object);
  }

  
     /**
      * Called when the a change in the shown pages has been completed.  At this
      * point you must ensure that all of the pages have actually been added or
      * removed from the container as appropriate.
      * @param container The containing View which is displaying this adapter's
      * page views.
      */
  @Override
  public void finishUpdate(View arg0) {}
  

  @Override
  public void restoreState(Parcelable arg0, ClassLoader arg1) {}

  @Override
  public Parcelable saveState() {
   return null;
  }

  @Override
  public void startUpdate(View arg0) {}
     
    }
}

在範例中，可以看到需要告訴程式有多少頁面可以滑動（NUM_AWESOME_VIEWS），然後當滑動到該頁面是要如何顯示（instantiateItem）。其實這還蠻簡單的，請自行參考上述的範例。 到這裡可能會覺得好像還少了一點東西！對，想Google+上面不是還會顯示目前頁面的indicator嗎？該如何達成？賣個關子，下次說給你聽。呵呵！ PS, 以上的範例是參考AwesomePager，可以點擊到該項目的網頁下載程式與說明。