單元三 拖拉式的畫面轉換 --- ViewPager

在 Android 裡, 拖拉式換頁的元件稱作 ViewPager,

在許多文章式的 App 裡頭可以看到這樣的設計.

這種拖拉式的方式, 其實是利用 ViewPager 以及 Fragment 來達成的.

首先要寫個 adapter 繼承自 FragmentPagerAdapter, 

然後再把 adapter 塞回給 ViewPager 的元件即可.

程式碼不多, 直接看 code.

MainActivity.class

 public class FragmentPagerSupport extends FragmentActivity {  
   static final int NUM_ITEMS = 10;  
   MyAdapter mAdapter;  
   ViewPager mPager;  
   @Override  
   protected void onCreate(Bundle savedInstanceState) {  
     super.onCreate(savedInstanceState);  
     setContentView(R.layout.fragment_pager);  
     mAdapter = new MyAdapter(getSupportFragmentManager());  
     mPager = (ViewPager)findViewById(R.id.pager);  
     mPager.setAdapter(mAdapter);  
     Button button = (Button)findViewById(R.id.goto_first);  
     button.setOnClickListener(new OnClickListener() {  
       public void onClick(View v) {  
         mPager.setCurrentItem(0);  
       }  
     });  
     button = (Button)findViewById(R.id.goto_last);  
     button.setOnClickListener(new OnClickListener() {  
       public void onClick(View v) {  
         mPager.setCurrentItem(NUM_ITEMS-1);  
       }  
     });  
   }  
   public static class MyAdapter extends FragmentPagerAdapter {  
     public MyAdapter(FragmentManager fm) {  
       super(fm);  
     }  
     @Override  
     public int getCount() {  
       return NUM_ITEMS;  
     }  
     @Override  
     public Fragment getItem(int position) {  
       return ArrayListFragment.newInstance(position);  
     }  
   }  
 }  

fragment_pager.xml

 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
     android:orientation="vertical" android:padding="4dip"  
     android:gravity="center_horizontal"  
     android:layout_width="match_parent" android:layout_height="match_parent">  
   <android.support.v4.view.ViewPager  
       android:id="@+id/pager"  
       android:layout_width="match_parent"  
       android:layout_height="0px"  
       android:layout_weight="1">  
   </android.support.v4.view.ViewPager>  
   <LinearLayout android:orientation="horizontal"  
       android:gravity="center" android:measureWithLargestChild="true"  
       android:layout_width="match_parent" android:layout_height="wrap_content"  
       android:layout_weight="0">  
     <Button android:id="@+id/goto_first"  
       android:layout_width="wrap_content" android:layout_height="wrap_content"  
       android:text="@string/first">  
     </Button>  
     <Button android:id="@+id/goto_last"  
       android:layout_width="wrap_content" android:layout_height="wrap_content"  
       android:text="@string/last">  
     </Button>  
   </LinearLayout>  
 </LinearLayout>  

這裡範例除了設 ViewPager 外, 還多設了兩個按鈕以讓 Pager 可以快速跳到最前或最後.

範例圖片

P.S
ArrayListFragment.class 我們沒有實作, 大家開發時依據需要實作 Fragment 即可