android ViewPager页面左右滑动切换
16lz
2021-01-24
我们日常生活中用到的微博，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 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.PagerTitleStrip13 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。在子类中我们最重要的是要重写以下四个方法：
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 Listlist;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 Listlist;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 ListmPage; 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 }
这样就基本完成了想要的效果，以下是效果图：
参考资料：
android学习笔记（60）使用Bundle在Activity之间文换教接
android学习笔记（59） android开发启动和关闭activity
android学习笔记（58）Activity学习过程
更多android开发教程
更多相关文章
- WebView使用详解
- android基本 UI(三）—单选RadioButton与复选按钮CheckBox
- [Android] Web Console: Uncaught TypeError: Object [object Ob
- Android自定义Button按钮显示样式
- Android(安卓)LinearLayout中元素按比例分配宽度
- Android(安卓)ListView item中有按钮(Button)不能点击或者条目不
- Android(安卓)Studio 中自带Android(安卓)Monitor监控内存溢出浅
- Android(安卓)Service总结05 之IntentService
- android sdk manager upgrade