BloggerAds

2013年6月7日 星期五

Android - ViewPager(左右滑動切換介面)

ViewPager是一個很好用的工具 

 如果你有很多個介面想要左右滑動切換的話 

那ViewPager是一個很好的選擇 

接下來就來介紹ViewPager怎麼用
要實作ViewPager的步驟很簡單 有三件事

 1.main.xml

在上圖可以看到

 LinearLayout裡面夾了一個ViewPager

 而ViewPager裡面夾了一個PagerTitleStrip

 PagerTitleStrip是一個很酷的東西 他算是ViewPager的Title

 等等在程式內可以設定每一個Page的Title

 2.準備各個Page要用的layout

3.java code
再來就是Java code了

 先看一下程式碼

 

public class ViewPagerDemosActivity extends Activity {
    /** Called when the activity is first created. */
 private ViewPager viewPager ;
 
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        viewPager = (ViewPager)this.findViewById(R.id.viewPager);
              
        LayoutInflater li = LayoutInflater.from(this);

        //new 一個ArrayList 來存放每個Page
       final ArrayList arrayView = new ArrayList();
        arrayView.add(li.inflate(R.layout.a, null));
        arrayView.add(li.inflate(R.layout.b, null));
        arrayView.add(li.inflate(R.layout.c, null));
        arrayView.add(li.inflate(R.layout.d, null));
        arrayView.add(li.inflate(R.layout.e, null));
        arrayView.add(li.inflate(R.layout.f, null));
        arrayView.add(li.inflate(R.layout.g, null));
        arrayView.add(li.inflate(R.layout.h, null));
        
        //new 一個ArrayList 來放每個Page 的 Title
        final ArrayList titleArray = new ArrayList();
        titleArray.add("Page1");
        titleArray.add("Page2");
        titleArray.add("Page3");
        titleArray.add("Page4");
        titleArray.add("Page5");
        titleArray.add("Page6");
        titleArray.add("Page7");
        titleArray.add("Page8");
     
        PagerAdapter apdter = new PagerAdapter() {
   
   @Override
   public boolean isViewFromObject(View arg0, Object arg1) {
    // TODO Auto-generated method stub
    return arg0 == arg1;
   }
   
   @Override
   public int getCount() {
    // TODO Auto-generated method stub
    return arrayView.size();
   }

   @Override
   public void destroyItem(ViewGroup container, int position,
     Object object) {
    // TODO Auto-generated method stub
    ((ViewPager)container).removeView(arrayView.get(position));
   }

   @Override
   public CharSequence getPageTitle(int position) {
    // TODO Auto-generated method stub
    
    return titleArray.get(position);//這裡需回傳Title的名稱,position就是每個Page的index 
   }

   @Override
   public Object instantiateItem(ViewGroup container, int position) {
    // TODO Auto-generated method stub
    ((ViewPager)container).addView(arrayView.get(position));
    return arrayView.get(position);
   }
   
  };
  viewPager.setAdapter(apdter);
  
  viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {//監聽當ViewPager被改變Page時
   
   @Override
   public void onPageSelected(int arg0) {
    // TODO Auto-generated method stub
    
   }
   
   
   @Override
   public void onPageScrolled(int index, float arg1, int arg2) {
    
    //onPageScrolled 
    
    
   }
   
   @Override
   public void onPageScrollStateChanged(int index) {
    
    
   }
  });
    }
}
從上面應該可以看得很清楚了

 15行那就是設置你剛剛第二點準備好的layout

 58行需要回傳給他每個page的Title

 74行是監聽當page被改變時
(PS.當我從page1滑到page2時 他會執行很多次onPageScrolled)

 其他照註解那樣設定就好了

 恭喜你 這樣就OK了!

 是不是超簡單

 那有人問 如果要設置每個Page的元件 動作  方法怎麼辦呢?

 因為他都要在同一個Activity裡

 我的做法是另開很多個Class把每個Page要作的方法 動作寫好

 然後在mainActivity裡面每個都呼叫就好了

 只是每個class的建構子都要有參數Activity 好讓mainActivity呼叫時傳自己進去
(因為每個page都是在一個Activity下 所以findViewById 或一些需要Activity的方法都需要用到他)
標籤：