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

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

之前关于如何实现屏幕页面切换，写过一篇博文《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.VIEwPagerandroID:layout_wIDth="match_parent"androID:layout_height="match_parent"androID:layout_gravity="center"androID:gravity="center"androID:ID="@+ID/vp"><androID.support.v4.vIEw.PagerTabStripandroID:layout_wIDth="match_parent"androID:layout_height="wrap_content"androID:ID="@+ID/tap"></androID.support.v4.vIEw.PagerTabStrip></androID.support.v4.vIEw.VIEwPager></linearLayout>

@R_301_6869@:

<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"><ImageVIEwandroID: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 @R_403_4612@)//设置标签显示的标题

设置指示标签的属性

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={"一号美女","二号美女","三号美女","四号美女"};@OverrIDeprotected 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{@OverrIDepublic int getCount() {return vIEws.size();}@OverrIDepublic boolean isVIEwFromObject(VIEw vIEw,Object object) {return vIEw==object;}//重写销毁滑动视图布局（将子视图移出视图存储集合（VIEwGroup））@OverrIDepublic voID destroyItem(VIEwGroup container,int @R_403_4612@,Object object) {container.removeVIEw(vIEws.get(@R_403_4612@));}//重写初始化滑动视图布局（从视图集合中取出对应视图，添加到VIEwGroup）@OverrIDepublic Object instantiateItem(VIEwGroup container,int @R_403_4612@) {VIEw v =vIEws.get(@R_403_4612@);container.addVIEw(v);return v;}@OverrIDepublic CharSequence getPageTitle(int @R_403_4612@) {return Titles[@R_403_4612@];}}}

第二种：页面轮播效果视图（程序首次启动的引导页实现）

实现效果如下（3张视图滑动引导）：

开始代码前注释：

1、本次未实现循环轮播效果；2、导航原点资源图片注解：default_holo为未选中状态，touched_holo为选中后实心状态。（也可自己用Shape绘制）

第一步：在layout布局文件里加入主布局文件vIEwpager_layout.xml

主布局为FrameLayout，在VIEwPager（这里因为存在导航原点，不设置PagerTabStrip）上嵌套包含3个导航原点（由滑动视图数量决定）的linearLayout布局（本次设置该布局位于底部）：

<?xml version="1.0" enCoding="utf-8"?><FrameLayoutxmlns: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.VIEwPagerandroID:layout_wIDth="match_parent"androID:layout_height="match_parent"androID:ID="@+ID/vp"></androID.support.v4.vIEw.VIEwPager><linearLayoutandroID:ID="@+ID/point_layout"androID:layout_wIDth="match_parent"androID:layout_height="wrap_content"androID:layout_gravity="bottom"androID:orIEntation="horizontal"><ImageVIEwandroID:layout_wIDth="0dp"androID:layout_height="wrap_content"androID:layout_weight="1"androID:src="@mipmap/default_holo"/><ImageVIEwandroID:layout_wIDth="0dp"androID:layout_height="wrap_content"androID:layout_weight="1"androID:src="@mipmap/default_holo" /><ImageVIEwandroID: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"><ImageVIEwandroID: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;//记录当前页（导航原点）@OverrIDeprotected 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的方法，这里不做具体实现@OverrIDepublic voID onPageScrolled(int @R_403_4612@,float @R_403_4612@Offset,int @R_403_4612@OffsetPixels) {}//设置滑动到对应位置的视图后，导航原点的不同状态（图片）@OverrIDepublic voID onPageSelected(int @R_403_4612@) {ImageVIEw preVIEw = imageVIEws.get(currImage);preVIEw.setimageResource(R.mipmap.default_holo);ImageVIEw currVIEw = imageVIEws.get(@R_403_4612@);currVIEw.setimageResource(R.mipmap.touched_holo);currImage = @R_403_4612@;}//OnPagechangelistener的方法，这里不做具体实现@OverrIDepublic voID onPageScrollStateChanged(int state) {}class MyAdapter extends PagerAdapter {@OverrIDepublic int getCount() {return vIEws.size();}@OverrIDepublic boolean isVIEwFromObject(VIEw vIEw,Object object) {return vIEw==object;}@OverrIDepublic voID destroyItem(VIEwGroup container,Object object) {container.removeVIEw(vIEws.get(@R_403_4612@));}@OverrIDepublic Object instantiateItem(VIEwGroup container,int @R_403_4612@) {VIEw v = vIEws.get(@R_403_4612@);container.addVIEw(v);return v;}}}

至此，本次的VIEwPager实现示例所需代码已完成，当然这只是VIEwPager最简单的功能，后续还会更新一些VIEwPager的高级用法，欢迎小伙伴们继续支持。

以上所述是小编给大家介绍的AndroID 中使用 VIEwPager实现屏幕页面切换和页面轮播效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对编程小技巧网站的支持！

总结

以上是内存溢出为你收集整理的Android 中使用 ViewPager实现屏幕页面切换和页面轮播效果全部内容，希望文章能够帮你解决Android 中使用 ViewPager实现屏幕页面切换和页面轮播效果所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。