欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

Android 中使用 ViewPager实现屏幕页面切换和页面轮播效果

程序员文章站 2024-02-27 13:10:57
之前关于如何实现屏幕页面切换,写过一篇博文《android中使用viewflipper实现屏幕切换》,相比viewflipper,viewpager更适用复杂的视图切换,而...

之前关于如何实现屏幕页面切换,写过一篇博文《android中使用viewflipper实现屏幕切换》,相比viewflipper,viewpager更适用复杂的视图切换,而且viewpager有自己的adapter,这也让其适应复杂对象,实现数据的动态加载。

viewpager是谷歌官方给我们提供的一个兼容低版本安卓设备的软件包,里面包囊了只有在安卓3.0以上可以使用的api。而viewpager就是其中之一,利用它,我们可以做很多事情,从最简单的导航,到页面菜单等等。

下面我们就展示下viewpager可以实现的两种简单效果:

第一种:屏幕的页面的切换(与viewflipper的实现效果类似)

实现效果如下(4张视图(layout)):

Android 中使用 ViewPager实现屏幕页面切换和页面轮播效果

第一步:在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张视图滑动引导):

Android 中使用 ViewPager实现屏幕页面切换和页面轮播效果

开始代码前注释:

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实现屏幕页面切换和页面轮播效果,希望对大家有所帮助