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

2023-08-12 14:32:16

之前关于如何实现屏幕页面切换，写过一篇博文《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的高级用法，欢迎小伙伴们继续支持。

当然篇幅所限，这只是ViewPager最最简单的功能，
作者： 去吧皮卡丘
链接：http://www.imooc.com/article/2580
来源：慕课网
当然篇幅所限，这只是ViewPager最最简单的功能，
作者： 去吧皮卡丘
链接：http://www.imooc.com/article/2580
来源：慕课网当然这只是ViewPager最简单的功能，后续还会更新一些ViewPager的高级用法，欢迎小伙伴们继续支持。
上一篇：201521123060《Java程序设计》第2周学习总结


下一篇：iOS 开发笔记-UILable/UIFont/UIButton常见设置