转载

ViewPager页面滑动切换

我们日常生活中用到的微博，QQ，微信等app在进行页面左右滑动的时候，很多都可以用ViewPager来实现。可以说，ViewPager在android开发中十分常见并且特别实用。

Viewpager在android.support.v4.view这个软件包中， android.support.v4.view.jar是谷歌官方给我们提供的一个兼容低版本安卓设备的软件包，里面包囊了只有在安卓3.0以上可以使用的api。所以低版本开发时必须加入 android-support-v4.jar，并且在XML文件使用ViewPager使用时以android.support.v4.view.ViewPager加入ViewPager。同时，该软件包还提供了一个PagerTitleStrip来显示每一个页卡的标题。

使用ViewPager实现页面滑动切换的方法和ListView差不多，同样也需要一个适配器，PagerAdapter，并且同样的也要重写其中的方法来实现。接下来我来说一下具体实现ViewPager的步骤。

1，在XML布局文件中加入ViewPager，以及它相对的标题PagerTitleStrip。

 1 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  2     xmlns:tools="http://schemas.android.com/tools"  3     android:layout_width="match_parent"  4     android:layout_height="match_parent" >  5     <!--这里一定要注意通过android.support.v4.view包来使用ViewPager和PagerTitleStrip-->  6     <android.support.v4.view.ViewPager  7         android:id="@+id/viewrpager"  8         android:layout_width="wrap_content"  9         android:layout_height="wrap_content" 10         android:layout_gravity="center" > 11  12         <android.support.v4.view.PagerTitleStrip 13             android:id="@+id/pagertitle" 14             android:layout_width="wrap_content" 15             android:layout_height="wrap_content" 16             android:layout_gravity="top" 17             android:background="#00000000" > 18         </android.support.v4.view.PagerTitleStrip> 19     </android.support.v4.view.ViewPager> 20  21 </RelativeLayout>

2，接下来我们要添加三个页卡布局文件。具体内容可以自己添加，我为了方便每张页卡上只是用了一张图片作为背景。

3，为ViewPager添加一个适配器，这里我写了一个子类继承PagerAdapter。在子类中我们最重要的是要重写以下四个方法：

当然，如果想要更多更具体的功能，我们还可以重写其中的其他方法，但是以上四个方法是最必要的也是必须要重写实现的。

以下是该部分代码：

 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<View> list; 12     private List<String> titlelist; 13  14     public MyAdapter(List<String> titlelist, List<View> list) { 15         this.titlelist = titlelist; 16         this.list = list; 17     } 18     //这里获得当前页卡的标题 19     @Override 20     public CharSequence getPageTitle(int position) { 21         return titlelist.get(position); 22     } 23     @Override 24     public Object instantiateItem(View container, int position) { 25         ((ViewPager) container).addView(list.get(position)); 26         return list.get(position); 27     } 28     //销毁页卡 29     @Override 30     public void destroyItem(View container, int position, Object object) { 31         ((ViewPager) container).removeView(list.get(position)); 32     } 33     //得到所有页卡的个数 34     @Override 35     public int getCount() { 36         return list.size(); 37     } 38     //判断当前显示页卡是否匹配 39     @Override 40     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<View> list; 18     private List<String> titlelist; 19  20     @Override 21     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<View>(); 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<String>(); 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<View> 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<View>();  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             @Override 116             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                     settingImg 130                             .setImageResource(R.drawable.tab_settings_pressed); 131                     break; 132  133                 } 134             } 135  136             @Override 137             public void onPageScrolled(int arg0, float arg1, int arg2) { 138  139             } 140  141             @Override 142             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 }