Android 開發 (十三) ViewPager 使用方法

甚麼是ViewPager

許多使用滑動切換頁面的方式都是使用 ViewPager 完成的

底下是source code的下載網址，裡面也附有許多的sample
https://github.com/JakeWharton/Android-ViewPagerIndicator
要使用該sample
首先必須先將lib import 且 copy 到workspace
(步驟是 import -> exist android project -> 選擇路徑 ->  copy project into workspace)

接著必須將該lib加入reference的列表中
(步驟為在project 按右鍵 -> properties -> 選擇Android項目 ->在library那欄選擇 add 將lib 加入reference)

接著如果出現需要import R的錯誤就必須將local端的 android-support-v4.jar 覆蓋library的 android-support-v4.jar
基本上這樣之後使用 Clean Build 就可以build過了  sample code 的 import 也是相同的步驟


如何使用 ViewPager 


viewpager 需要一個PageAdapter，然後在 instantiateItem 可以客製化自己的UI
，記得必須destroyItem 否則會crash，如果需要顯是title的話就必須override 掉getPageTitle，
底下是PageAdapter的範例

class myPagerAdapter extends PagerAdapter {
 private List<String> mTitles;
 public myPagerAdapter(List<String> titles) {
  mTitles = titles;
 }

 @Override
 public int getCount() {
  // TODO Auto-generated method stub
  return mTitles.size();
 }

 @Override
 public Object instantiateItem(View container, int position) {
  // TODO Auto-generated method stub
  LayoutInflater inflater = (LayoutInflater) container.getContext()
    .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
  int id;
  switch (position%3) {
  case 0:
   id = R.layout.firstpage;
   break;
  case 1:
   id = R.layout.secondpage;
   break;
  case 2:
   id = R.layout.thirdpage;
   break;
  default:
   id = R.layout.secondpage;
   break;
  }
  View view = inflater.inflate(id, null);
  ((ViewPager) container).addView(view, 0);
  return view;
 }
 @Override
 public void destroyItem(View container, int position, Object object) {
  // TODO Auto-generated method stub
  ((ViewPager) container).removeView((View)  object);
 }
 @Override
 public CharSequence getPageTitle(int position) {
  // TODO Auto-generated method stub
  return mTitles.get(position);
 }

 @Override
 public boolean isViewFromObject(View arg0, Object arg1) {
  // TODO Auto-generated method stub
  return arg0 == arg1;
 }

然後只需要在MainActivity裡設置 viewpager 和TabPageIndicator 即可

MainActivity.java

  mViewPager.setAdapter(new myPagerAdapter(titles));
  TabPageIndicator indicator = (TabPageIndicator)findViewById(R.id.indicator);  
        indicator.setViewPager(mViewPager); 

activity_main.xml

    <com.viewpagerindicator.TabPageIndicator
        android:id="@+id/indicator"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" />

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:layout_width="wrap_content"
         />

這樣viewpager就完成了
可左右滑動，或者按上方的title 變換頁面

附上  sample Code