android 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。在子类中我们最重要的是要重写以下四个方法:
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<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 }
这样就基本完成了想要的效果,以下是效果图:
android ViewPager页面左右滑动切换相关推荐
- android fragment界面滑动切换效果,Android App中使用ViewPager+Fragment实现滑动切换效果...
在android应用中,多屏滑动是一种很常见的风格,没有采用viewpager的代码实现会很长,如果采用ViewPager,代码就会短很多,但是使用ViewPager也有弊端:需要导入android- ...
- Tab页面手势滑动切换以及动画效果
. 3张页卡之间的切换.带动画效果. 工程结构. 主要应用到android-support-v4.jar这个jar包. 布局文件. 1.main.xml中的代码 [html] <?xml ver ...
- ViewPager撤消左右滑动切换功能
ViewPager取消左右滑动切换功能 最近做项目要求某种情况下ViewPager不能滑动,那么我们只需要重写这个方法就可以禁止ViewPager滑动 IndexViewPager.java: imp ...
- TabLayout让Fragment在ViewPager中的滑动切换更优雅
TabLayout让Fragment在ViewPager中的滑动切换更优雅 转载于:https://www.cnblogs.com/zhujiabin/p/7382500.html
- fragment+viewpager+tablayou实现滑动切换页面
本文目标:实现滑动切换页面 首先,Tablayout控件就需要添加design library,在android studio中添加依赖 compile 'com.android.support:d ...
- 手机版html页面左右滑动切换页面,移动端手指左右滑动切换内容demo
说在开头 最近移动端做了一个手指左右滑动切换内容的效果demo; 为了表示我的无私,决定分享给诸位:(详细代码见附件) 正文 先上html代码html> 穿衣助理 完成 整个页面ul部分是需要切 ...
- android ViewPager 不带滑动效果切换item
其实这是很简单的,但是今晚脑袋晕乎乎的 绕了一大圈,记录一下 以警同类人. 只需要在setCurrentItem传参数时这么写:mViewPager.setCurrentItem(item序号,fal ...
- android实现滑动切换图,Android:使用ViewPager实现左右滑动切换图片加点点
图片发自简书App 1.引入android-support-v4.jar包,在主布局里加入 < ?xml version="1.0" encoding="utf-8 ...
- Android ViewPager + Fragment实现滑动页面
效果: PagerData类: 1 package com.cloud.viewpagerdemo; 2 3 import java.io.Serializable; 4 5 class PagerD ...
最新文章
- 一席-赵立平-大树细菌
- python变量类型之间转换_Python变量赋值类型转换
- 计算机网络 —— OSI参考模型
- 深度学习笔记(2) 神经网络基础
- 【java异常】No enum constant org.apache.ibatis.type.JdbcType.number
- Bailian4099 队列和栈【堆栈+队列】
- XRD的检出限是多少?如何检测含量极低的物质?
- Qt 3D 学习路径规划
- aspose利用word模板生成word、PDF
- 速读原著-TCP/IP(互联网与实现)
- LAME 使用/参数说明, 很好的程序
- ptp精准时间协议_精确时间协议PTP研究
- android 仿微信来电_仿MIUI、微信来电通知无法解决通知折叠到通知列表
- 计算机休眠后黑屏打不开,[电脑待机以后黑屏打不开怎么办]电脑睡眠后黑屏打不开...
- 仿微信翻译----本地短信翻译。
- 《NFL橄榄球》:洛杉矶公羊·橄榄1号位
- show master status 时没有数据显示
- js一维数组,api,二维数组
- JS高阶编程之柯理化函数
- SQL学习,Mysql数据库常用表及数据备份。
热门文章
- 【Android 插件化】VirtualApp 源码分析 ( 安装应用源码分析 | HomePresenterImpl 添加应用 | AppRepository.addVirtualApp )
- 【错误记录】Android Studio 编译报错 ( cannot open this project, please retry with version 4.2 or newer. )
- 【Flutter】Flutter 拍照示例 ( 拍照并获取照片源码示例 | image_picker: ^0.5.2 版本 )
- 【Android 安全】DEX 加密 ( Application 替换 | Android 应用启动原理 | LoadedApk 源码分析 )
- 【组合数学】非降路径问题 ( 限制条件的非降路径数 )
- 【计算机网络】传输层 : TCP 协议 ( TCP 协议特点 | TCP 报文段首部格式 | TCP 报文段控制位 )
- 【嵌入式开发】C语言 命令行参数 函数指针 gdb调试
- 006-1MOS管工作原理精讲
- 大数据笔记(六)——HDFS的底层原理:JAVA动态代理和RPC
- [算法题] Search in Rotated Sorted Array ii