android ViewPager页面左右滑动切换

Bertha 。 2022-08-06 18:00 301阅读 0赞

我们日常生活中用到的微博，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。

![复制代码][copycode.gif]

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     
     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>

![复制代码][copycode.gif]

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

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

*  `instantiateItem(ViewGroup, int)`
 *  `destroyItem(ViewGroup, int, Object)`
 *  `getCount()`
 *  `isViewFromObject(View, Object)`

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

以下是该部分代码：

![复制代码][copycode.gif]

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 }

![复制代码][copycode.gif]

4，最后在MainActivity中将你想要的页卡和标题分别存放在List中，然后将定义好的适配器供ViewPager使用就可以了。

以下是该部分代码：

![复制代码][copycode.gif]

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 }

![复制代码][copycode.gif]

这样就简单的实现了页面滑动切换的功能了。简要效果图如下：

![Image 1][]![Image 1][]![Image 1][]

但是我发现当我在滑动的时候标题的位置也跟着在一起移动，我想让页面在滑动的时候，标题不移动，但是要显示出不同的状态来。这里我简要的弄了一个类似微信的切换风格，在页卡滑动的时候让下方的按钮标题不同但显示出当前的状态，同时要求在点击下方的按钮时，也让页面切换到相对的状态下。

相比上面那个程序，这个主要的是设置了按钮的监听事件和页面滑动的监听事件。

其中页面滑动的监听事件是setOnPageChangeListener（）。它有onPageSelected（），onPageScrolled（），onPageScrollStateChanged（）三个方法，我这里只是对onPageSelected（）方法进行了重写。

以下是MainActivity部分的代码：

![复制代码][copycode.gif]

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 }

![复制代码][copycode.gif]

这样就基本完成了想要的效果，以下是效果图：

![Image 1][]![Image 1][]![Image 1][]![Image 1][]

参考资料：

## [android学习笔记（60）使用Bundle在Activity之间文换教接][android_60_Bundle_Activity] ##

## [android学习笔记（59） android开发启动和关闭activity][android_59_ android_activity] ##

## [android学习笔记（58）Activity学习过程][android_58_Activity] ##

## 更多[android开发][android]教程  ##

![Center][]

[copycode.gif]: /images/20220805/6aa54e3642c149918e9448cfd90a8327.png
[Image 1]: 
[android_60_Bundle_Activity]: http://www.itmmd.com/201502/599.html
[android_59_ android_activity]: http://www.itmmd.com/201502/598.html
[android_58_Activity]: http://www.itmmd.com/201502/597.html
[android]: http://www.itmmd.com/
[Center]: /images/20220805/2abab253e2b145f191664737f0e62493.png