Android 中使用 ViewPager实现屏幕页面切换和页面轮播效果
之前关于如何实现屏幕页面切换,写过一篇博文《android中使用viewflipper实现屏幕切换》,相比viewflipper,viewpager更适用复杂的视图切换,而且viewpager有自己的adapter,这也让其适应复杂对象,实现数据的动态加载。
viewpager是谷歌官方给我们提供的一个兼容低版本安卓设备的软件包,里面包囊了只有在安卓3.0以上可以使用的api。而viewpager就是其中之一,利用它,我们可以做很多事情,从最简单的导航,到页面菜单等等。
下面我们就展示下viewpager可以实现的两种简单效果:
第一种:屏幕的页面的切换(与viewflipper的实现效果类似)
实现效果如下(4张视图(layout)):
第一步:在layout布局文件里加入主布局文件viewpager_layout.xml
<?xml version="1.0" encoding="utf-8"?> <linearlayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.v4.view.viewpager android:layout_width="match_parent" android:layout_height="match_parent" android:layout_gravity="center" android:gravity="center" android:id="@+id/vp"> <android.support.v4.view.pagertabstrip android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/tap"> </android.support.v4.view.pagertabstrip> </android.support.v4.view.viewpager> </linearlayout>
注意事项:
<1、这里viewpager和pagertabstrip都要把包名写全了,不然会classnotfound
<2、api中说:在布局xml把pagertabstrip当做viewpager的一个子标签来用,不能拿出来,不然还是会报错
<3、在pagertabstrip标签中可以用属性android:layout_gravity=top|bottom来指定title的位置
<4、如果要显示出pagertabstrip某一页的title,需要在viewpager的adapter中实现getpagetitle(int)
第二步:在layout中建立要展示切换的视图文件(示例*四个layout1/2/3/4.xml,这里写一个典型):
<?xml version="1.0" encoding="utf-8"?> <linearlayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <imageview android:layout_width="match_parent" android:layout_height="match_parent" android:src="@mipmap/a1" android:scaletype="centercrop" android:id="@+id/iv1" /> </linearlayout>
第三步:java中activity的实现代码viewpagerdemo.java(这里未设置pagertabstrip的属性):
在activity里实例化viewpager组件,并设置它的adapter(就是pageradapter,方法与listview一样的)
实现一个pageradapter,覆盖以下方法:
instantiateitem(viewgroup, int)//用来实例化页卡
destroyitem(viewgroup, int, object)//删除页卡
getcount() //返回页卡的数量
isviewfromobject(view, object)//判断两个对象是否相等
getpagetitle(int position)//设置标签显示的标题
设置指示标签的属性
pagertabstrip.settabindicatorcolor();//指示器的颜色
pagertabstrip.setbackgroundcolor();//背影色
pagertabstrip.settextcolor(color.white);//字体颜色
import android.os.bundle; import android.support.annotation.nullable; import android.support.v4.view.pageradapter; import android.support.v4.view.viewpager; import android.support.v7.app.appcompatactivity; import android.view.view; import android.view.viewgroup; import java.util.arraylist; /** * created by panchengjia on 2016/12/1. */ public class viewpagerdemo extends appcompatactivity { private viewpager vp; //声明存储viewpager下子视图的集合 arraylist<view> views = new arraylist<>(); //显示效果中每个视图的标题 string[] titles={"一号美女","二号美女","三号美女","四号美女"}; @override protected void oncreate(@nullable bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.viewpager_layout); vp= (viewpager) findviewbyid(r.id.vp); initview();//调用初始化视图方法 vp.setadapter(new myadapter());//设置适配器 } //初始化视图的方法(通过布局填充器获取用于滑动的视图并存入对应的的集合) private void initview() { view v1 = getlayoutinflater().inflate(r.layout.layout1,null); view v2 = getlayoutinflater().inflate(r.layout.layout2,null); view v3 = getlayoutinflater().inflate(r.layout.layout3,null); view v4 = getlayoutinflater().inflate(r.layout.layout4,null); views.add(v1); views.add(v2); views.add(v3); views.add(v4); } class myadapter extends pageradapter{ @override public int getcount() { return views.size(); } @override public boolean isviewfromobject(view view, object object) { return view==object; } //重写销毁滑动视图布局(将子视图移出视图存储集合(viewgroup)) @override public void destroyitem(viewgroup container, int position, object object) { container.removeview(views.get(position)); } //重写初始化滑动视图布局(从视图集合中取出对应视图,添加到viewgroup) @override public object instantiateitem(viewgroup container, int position) { view v =views.get(position); container.addview(v); return v; } @override public charsequence getpagetitle(int position) { return titles[position]; } } }
第二种:页面轮播效果视图(程序首次启动的引导页实现)
实现效果如下(3张视图滑动引导):
开始代码前注释:
1、本次未实现循环轮播效果;2、导航原点资源图片注解:default_holo为未选中状态,touched_holo为选中后实心状态。(也可自己用shape绘制)
第一步:在layout布局文件里加入主布局文件viewpager_layout.xml
主布局为framelayout,在viewpager(这里因为存在导航原点,不设置pagertabstrip)上嵌套包含3个导航原点(由滑动视图数量决定)的linearlayout布局(本次设置该布局位于底部):
<?xml version="1.0" encoding="utf-8"?> <framelayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/activity_main" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.example.administrator.myapplication11.mainactivity"> <android.support.v4.view.viewpager android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/vp"> </android.support.v4.view.viewpager> <linearlayout android:id="@+id/point_layout" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="bottom" android:orientation="horizontal"> <imageview android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:src="@mipmap/default_holo"/> <imageview android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:src="@mipmap/default_holo" /> <imageview android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:src="@mipmap/default_holo" android:id="@+id/imageview" /> </linearlayout> </framelayout>
第二步:layout中用于滑动切换的视图(示例*三个layout1/2/3.xml,这里写一个典型)与第一种相同
<?xml version="1.0" encoding="utf-8"?> <linearlayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <imageview android:layout_width="match_parent" android:layout_height="match_parent" android:scaletype="centercrop" android:src="@mipmap/genie"/> </linearlayout>
第三步:java中activity的实现代码mainactivity.java
通过实现onpagechangelistener接口实现在视图切换时导航原点状态的变化),其中关于onpagechangelistener中方法的详细解释,请参考博文
《viewpager的setonpagechangelistener方法详解》这里不做赘述:
import android.support.v4.view.pageradapter; import android.support.v4.view.viewpager; import android.support.v7.app.appcompatactivity; import android.os.bundle; import android.view.view; import android.view.viewgroup; import android.widget.imageview; import android.widget.linearlayout; import java.util.arraylist; /** * created by panchengjia on 2016/11/30. */ public class mainactivity extends appcompatactivity implements viewpager.onpagechangelistener{ private viewpager vp; private linearlayout point_layout; arraylist<view> views =new arraylist<>(); //实例化存储imageview(导航原点)的集合 arraylist<imageview> imageviews = new arraylist<>(); int currimage;//记录当前页(导航原点) @override protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_main); vp= (viewpager) findviewbyid(r.id.vp); initview();//调用初始化视图方法 initpoint();//调用初始化导航原点的方法 vp.addonpagechangelistener(this); vp.setadapter(new myadapter()); } /*将point_layout中包含的imageview(导航原点)添加到imageviews集合中 *并设置layout1(第一视图)的导航原点(对应集合0下标)的图片 * 为touched_holo(触摸状态的图片) */ private void initpoint() { point_layout= (linearlayout) findviewbyid(r.id.point_layout); int counnt = point_layout.getchildcount();//获取point数量 for (int i=0;i<counnt;i++){ imageviews.add((imageview) point_layout.getchildat(i)); } imageviews.get(0).setimageresource(r.mipmap.touched_holo); } private void initview() { view v1=getlayoutinflater().inflate(r.layout.layout1,null); view v2=getlayoutinflater().inflate(r.layout.layout2,null); view v3=getlayoutinflater().inflate(r.layout.layout3,null); views.add(v1); views.add(v2); views.add(v3); } //onpagechangelistener的方法,这里不做具体实现 @override public void onpagescrolled(int position, float positionoffset, int positionoffsetpixels) { } //设置滑动到对应位置的视图后,导航原点的不同状态(图片) @override public void onpageselected(int position) { imageview preview = imageviews.get(currimage); preview.setimageresource(r.mipmap.default_holo); imageview currview = imageviews.get(position); currview.setimageresource(r.mipmap.touched_holo); currimage = position; } //onpagechangelistener的方法,这里不做具体实现 @override public void onpagescrollstatechanged(int state) { } class myadapter extends pageradapter { @override public int getcount() { return views.size(); } @override public boolean isviewfromobject(view view, object object) { return view==object; } @override public void destroyitem(viewgroup container, int position, object object) { container.removeview(views.get(position)); } @override public object instantiateitem(viewgroup container, int position) { view v = views.get(position); container.addview(v); return v; } } }
至此,本次的viewpager实现示例所需代码已完成,当然这只是viewpager最简单的功能,后续还会更新一些viewpager的高级用法,欢迎小伙伴们继续支持。
以上所述是小编给大家介绍的android 中使用 viewpager实现屏幕页面切换和页面轮播效果,希望对大家有所帮助
上一篇: 算法-计算器
推荐阅读
-
Android 中使用 ViewPager实现屏幕页面切换和页面轮播效果
-
Android应用中利用ViewPager实现多页面滑动切换效果示例
-
Android中TabLayout结合ViewPager实现页面切换
-
Android中TabLayout结合ViewPager实现页面切换
-
灵活使用Android中ActionBar和ViewPager切换页面
-
灵活使用Android中ActionBar和ViewPager切换页面
-
Android如何使用ViewPager2实现页面滑动切换效果
-
Android编程实现ViewPager多页面滑动切换及动画效果的方法
-
Android中TabLayout+ViewPager实现tab和页面联动效果
-
Android使用TabLayou+fragment+viewpager实现滑动切换页面效果