2012年7月3日 星期二

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 處理,當選到某一頁時,把那頁的圖示標記起來,可參考上述註解的地方,這些應該也能程式化處理。


 


沒有留言:

張貼留言