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.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>

注意事项:
<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 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={"一号美女","二号美女","三号美女","四号美女"};@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 position, Object object） {container.removeView（views.get（position））;}//重写初始化滑动视图布局（从视图集合中取出对应视图，添加到ViewGroup）@Overridepublic Object instantiateItem（ViewGroup container, int position） {View v =views.get（position）;container.addView（v）;return v;}@Overridepublic 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"?><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 position, float positionOffset, int positionOffsetPixels） {}//设置滑动到对应位置的视图后，导航原点的不同状态（图片）@Overridepublic 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的方法，这里不做具体实现@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, int position, Object object） {container.removeView（views.get（position））;}@Overridepublic Object instantiateItem（ViewGroup container, int position） {View v = views.get（position）;container.addView（v）;return v;}}}

至此，本次的ViewPager实现示例所需代码已完成，当然这只是ViewPager最简单的功能，后续还会更新一些ViewPager的高级用法，欢迎小伙伴们继续支持。
以上所述是小编给大家介绍的Android 中使用 ViewPager实现屏幕页面切换和页面轮播效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！