android ViewPager頁面左右滑動切換

android ViewPager頁面左右滑動切換

 

我們日常生活中用到的微博，QQ，等app在進行頁面左右滑動的時候，很多都可以用ViewPager來實現。可以說，ViewPager在android開發中十分常見並且特別實用。

Viewpager在android.support.v4.view這個軟體包中， android.support.v4.view.jar是Google官方給我們提供的一個相容低版本安卓裝置的軟體包，裡麵包囊了只有在安卓3.0以上可以使用的api。所以低版本開發時必須加入android-support-v4.jar，並且在XML檔案使用ViewPager使用時以android.support.v4.view.ViewPager加入ViewPager。同時，該軟體包還提供了一個PagerTitleStrip來顯示每一個頁卡的標題。

使用ViewPager實現頁面滑動切換的方法和ListView差不多，同樣也需要一個適配器，PagerAdapter，並且同樣的也要重寫其中的方法來實現。接下來我來說一下具體實現ViewPager的步驟。

 

1，在XML布局檔案中加入ViewPager，以及它相對的標題PagerTitleStrip。

 

2，接下來我們要添加三個頁卡布局檔案。具體內容可以自己添加，我為了方便每張頁卡上只是用了一張圖片作為背景。

3，為ViewPager添加一個適配器，這裡我寫了一個子類繼承PagerAdapter。在子類中我們最重要的是要重寫以下四個方法：

• instantiateItem(ViewGroup, int)destroyItem(ViewGroup, int, Object)getCount()isViewFromObject(View, Object)

  當然，如果想要更多更具體的功能，我們還可以重寫其中的其他方法，但是以上四個方法是最必要的也是必須要重寫實現的。

  以下是該部分代碼：

   
  

   1 package com.example.android_viewpage; 2  3 import java.util.List; 4  5 import android.content.Context; 6 import android.support.v4.view.PagerAdapter; 7 import android.support.v4.view.ViewPager; 8 import android.view.View; 9 10 public class MyAdapter extends PagerAdapter {11     private List list;12     private List titlelist;13 14     public MyAdapter(List titlelist, List list) {15         this.titlelist = titlelist;16         this.list = list;17     }18     //這裡獲得當前頁卡的標題19     @Override20     public CharSequence getPageTitle(int position) {21         return titlelist.get(position);22     }23     @Override24     public Object instantiateItem(View container, int position) {25         ((ViewPager) container).addView(list.get(position));26         return list.get(position);27     }28     //銷毀頁卡29     @Override30     public void destroyItem(View container, int position, Object object) {31         ((ViewPager) container).removeView(list.get(position));32     }33     //得到所有頁卡的個數34     @Override35     public int getCount() {36         return list.size();37     }38     //判斷當前顯示頁卡是否匹配39     @Override40     public boolean isViewFromObject(View arg0, Object arg1) {41         return arg0 == arg1;42     }43 44 }

   
  

  4，最後在MainActivity中將你想要的頁卡和標題分別存放在List中，然後將定義好的適配器供ViewPager使用就可以了。

  以下是該部分代碼：

   
  

   1 package com.example.android_viewpage; 2  3 import java.util.ArrayList; 4 import java.util.List; 5 import android.app.Activity; 6 import android.os.Bundle; 7 import android.support.v4.view.PagerTabStrip; 8 import android.support.v4.view.PagerTitleStrip; 9 import android.support.v4.view.ViewPager;10 import android.view.LayoutInflater;11 import android.view.View;12 13 public class MainActivity extends Activity {14     private ViewPager viewPager;15     private PagerTitleStrip pagerTitleStrip;16     private MyAdapter adapter;17     private List list;18     private List titlelist;19 20     @Override21     protected void onCreate(Bundle savedInstanceState) {22         super.onCreate(savedInstanceState);23         setContentView(R.layout.activity_main);24         viewPager = (ViewPager) findViewById(R.id.viewrpager);25         pagerTitleStrip = (PagerTitleStrip) findViewById(R.id.pagertitle);26         list = new ArrayList();27         list.add(LayoutInflater.from(this).inflate(R.layout.view1, null));28         list.add(LayoutInflater.from(this).inflate(R.layout.view2, null));29         list.add(LayoutInflater.from(this).inflate(R.layout.view3, null));30         titlelist = new ArrayList();31         titlelist.add(第一頁);32         titlelist.add(第二頁);33         titlelist.add(第三頁);34         adapter = new MyAdapter(titlelist, list);35         viewPager.setAdapter(adapter);36     }37 38 }

   
  

   

  但是我發現當我在滑動的時候標題的位置也跟著在一起移動，我想讓頁面在滑動的時候，標題不移動，但是要顯示出不同的狀態來。這裡我簡要的弄了一個類似的切換風格，在頁卡滑動的時候讓下方的按鈕標題不同但顯示出當前的狀態，同時要求在點擊下方的按鈕時，也讓頁面切換到相對的狀態下。

  相比上面那個程式，這個主要的是設定了按鈕的監聽事件和頁面滑動的監聽事件。

  其中頁面滑動的監聽事件是setOnPageChangeListener（）。它有onPageSelected（），onPageScrolled（），onPageScrollStateChanged（）三個方法，我這裡只是對onPageSelected（）方法進行了重寫。

  以下是MainActivity部分的代碼：

   
  

    1 package com.example.viewpagertest;  2   3 import java.util.ArrayList;  4 import java.util.List;  5   6 import android.R.integer;  7 import android.app.Activity;  8 import android.os.Bundle;  9 import android.support.v4.view.ViewPager; 10 import android.support.v4.view.ViewPager.OnPageChangeListener; 11 import android.view.LayoutInflater; 12 import android.view.View; 13 import android.view.View.OnClickListener; 14 import android.view.Window; 15 import android.widget.ImageButton; 16 import android.widget.LinearLayout; 17  18 public class MainActivity extends Activity implements OnClickListener { 19  20     private List mPage; 21     private MyPagerAdapter adapter; 22     private ViewPager viewPager; 23  24     private ImageButton weixinImg; 25     private ImageButton friendImg; 26     private ImageButton addressImg; 27     private ImageButton settingImg; 28     private LinearLayout weixin; 29     private LinearLayout friend; 30     private LinearLayout address; 31     private LinearLayout setting; 32  33     private static final int WEIXIN_STATE = 0; 34     private static final int FRIEND_STATE = 1; 35     private static final int ADDRESS_STATE = 2; 36     private static final int SETTING_STATE = 3; 37  38     @Override 39     protected void onCreate(Bundle savedInstanceState) { 40         super.onCreate(savedInstanceState); 41         requestWindowFeature(Window.FEATURE_NO_TITLE); 42         setContentView(R.layout.activity_main); 43         intiView(); 44         getClickEvent(); 45     } 46  47  48  49     private void intiView() { 50  51         // 呈現頁面滑動效果 52         viewPager = (ViewPager) findViewById(R.id.viewpage); 53         mPage = new ArrayList(); 54         mPage.add(LayoutInflater.from(this).inflate(R.layout.pageone, null)); 55         mPage.add(LayoutInflater.from(this).inflate(R.layout.pagetwo, null)); 56         mPage.add(LayoutInflater.from(this).inflate(R.layout.pagethree, null)); 57         mPage.add(LayoutInflater.from(this).inflate(R.layout.pagefour, null)); 58         adapter = new MyPagerAdapter(mPage); 59         viewPager.setAdapter(adapter); 60  61         //載入控制項 62         weixinImg = (ImageButton) findViewById(R.id.id_weixin_img); 63         friendImg = (ImageButton) findViewById(R.id.id_frd_img); 64         addressImg = (ImageButton) findViewById(R.id.id_address_img); 65         settingImg = (ImageButton) findViewById(R.id.id_settint_img); 66  67         weixin = (LinearLayout) findViewById(R.id.id_weixin); 68         friend = (LinearLayout) findViewById(R.id.id_frd); 69         address = (LinearLayout) findViewById(R.id.id_address); 70         setting = (LinearLayout) findViewById(R.id.id_setting); 71  72     } 73     /** 74      *          按鈕的點擊事件：當點擊按鈕時，先讓所有的按鈕變成暗色， 75      *          然後將所點擊的按鈕設定成亮色，並轉到按鈕所屬頁面 76      */ 77     @Override 78     public void onClick(View v) { 79         setImg(); 80         switch (v.getId()) { 81         case R.id.id_weixin: 82             viewPager.setCurrentItem(WEIXIN_STATE); 83             weixinImg.setImageResource(R.drawable.tab_weixin_pressed); 84             break; 85  86         case R.id.id_frd: 87             viewPager.setCurrentItem(FRIEND_STATE); 88             friendImg.setImageResource(R.drawable.tab_find_frd_pressed); 89             break; 90  91         case R.id.id_address: 92             viewPager.setCurrentItem(ADDRESS_STATE); 93             addressImg.setImageResource(R.drawable.tab_address_pressed); 94             break; 95  96         case R.id.id_setting: 97             viewPager.setCurrentItem(SETTING_STATE); 98             settingImg.setImageResource(R.drawable.tab_settings_pressed); 99             break;100 101         }102 103     }104     private void getClickEvent() {105         weixin.setOnClickListener(this);106         friend.setOnClickListener(this);107         address.setOnClickListener(this);108         setting.setOnClickListener(this);109 /**110  *   頁面滑動的監聽事件：滑動頁面時，先將所有按鈕變成暗色111  *   再把頁面所屬的按鈕變成亮色，表示所屬頁面112  */113         viewPager.setOnPageChangeListener(new OnPageChangeListener() {114 115             @Override116             public void onPageSelected(int arg0) {117                 setImg();118                 switch (arg0) {119                 case WEIXIN_STATE:120                     weixinImg.setImageResource(R.drawable.tab_weixin_pressed);121                     break;122                 case FRIEND_STATE:123                     friendImg.setImageResource(R.drawable.tab_find_frd_pressed);124                     break;125                 case ADDRESS_STATE:126                     addressImg.setImageResource(R.drawable.tab_address_pressed);127                     break;128                 case SETTING_STATE:129                     settingImg130                             .setImageResource(R.drawable.tab_settings_pressed);131                     break;132 133                 }134             }135 136             @Override137             public void onPageScrolled(int arg0, float arg1, int arg2) {138 139             }140 141             @Override142             public void onPageScrollStateChanged(int arg0) {143 144             }145         });146 147     }148      //在點擊按鈕或者活動頁面的時候，讓所有按鈕變成暗色149     private void setImg() {150         weixinImg.setImageResource(R.drawable.tab_weixin_normal);151         friendImg.setImageResource(R.drawable.tab_find_frd_normal);152         addressImg.setImageResource(R.drawable.tab_address_normal);153         settingImg.setImageResource(R.drawable.tab_settings_normal);154 155     }156 157 }