Android 開發筆記 - 模仿 iOS UIPageControl 分頁效果

老話一句：為了給使用者有一致性的體驗，在 Android 環境上，使用 PagerAdapter/ViewPager 實作 iOS UIPageControl 效果。需額外 library (android-support-v4.jar) 來使用，請參考 Support Library | Android Developers 流程。

概念：

在 layout.xml 裡頭多新增一個 android.support.v4.view.ViewPager，接著在程式方面，用一個 List<View> mListViews 記錄有幾個 page 要切換，接著再實作一個 PagerAdapter 處理翻頁的動作，最後再把 mViewPage.setAdapter(mPagerAdapter); 就搞定囉

程式 PageControlActivity：

public class PageControlActivity extends Activity {
        private MyPagerAdapter mPagerAdapter;
       private ViewPager mViewPager;
       private List<View> mListViews;

       @Override
       protected void onCreate(Bundle savedInstanceState) {
              super.onCreate(savedInstanceState);
              setContentView(R.layout.pagecontrol);

              mPagerAdapter = new MyPagerAdapter();
              mViewPager = (ViewPager)findViewById(R.id.viewPager);
              mViewPager.setAdapter(mPagerAdapter);

              mListViews = new ArrayList<View>();
              LayoutInflater mInflater = getLayoutInflater();
              // page 1:
              mListViews.add(mInflater.inflate(R.layout.main, null));
              // page 2:
              mListViews.add(mInflater.inflate(R.layout.main, null));
       }

       protected class MyPagerAdapter extends PagerAdapter {

              @Override
              public int getCount() {
                     if(mListViews==null)
                            return 0;
                     return mListViews.size();
              }

              @Override
              public boolean isViewFromObject(View arg0, Object arg1) {
                     //return false;
                     return arg0==(arg1);
              }

              @Override
              public void destroyItem(View container, int position, Object object) {
                     ((ViewPager) container).removeView(mListViews.get(position));
              }

              @Override
              public Object instantiateItem(View container, int position) {
                     ((ViewPager) container).addView(mListViews.get(position),0);
                     return mListViews.get(position);
              }

              /*
              @Override
              public void finishUpdate(View container) {
                     int position = ((ViewPager) container).getCurrentItem();
                     for( int i=0 ; i<mImageButtons.size() ; ++i )
                            if( i == position )
                                   ((ImageButton)mImageButtons.get(i)).setImageDrawable(getResources().getDrawable(R.drawable.selected));
                            else
                                   ((ImageButton)mImageButtons.get(i)).setImageDrawable(getResources().getDrawable(R.drawable.unselected));
              }
              // */
       }
}

Layout(pagecontrol.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:background="@null">

       <android.support.v4.view.ViewPager
              android:layout_width="fill_parent"
              android:layout_height="350dp"
              android:id="@+id/viewPager"/>

       <!-- Pages buttons -->
       <!--
       <LinearLayout
              android:background="@null"
              android:layout_gravity="center"
              android:layout_width="fill_parent"
              android:layout_height="fill_parent">

              <ImageButton
                     android:id="@+id/btn_page1"
                     android:layout_width="wrap_content"
                     android:layout_height="wrap_content"
                     android:contentDescription="@null"
                     android:background="@null"
                     android:src="@drawable/selected" />

              <ImageButton
                     android:layout_width="30dp"
                     android:layout_height="wrap_content"
                     android:contentDescription="@null"
                     android:background="@null"
                     android:src="@null" />

              <ImageButton
                     android:id="@+id/btn_page2"
                     android:layout_width="wrap_content"
                     android:layout_height="wrap_content"
                     android:contentDescription="@null"
                     android:background="@null"
                     android:src="@drawable/unselected" />

              </LinearLayout>
       -->
</LinearLayout>

如此一來，僅需新增 mListViews 就可以動態增加很多頁，如果要完全跟 iOS UIPageControl 一樣，那就要在底部加上頁數的顯示，這時候就可以在 MyPagerAdapter 裡頭實作 finishUpdate 處理，當選到某一頁時，把那頁的圖示標記起來，可參考上述註解的地方，這些應該也能程式化處理。