视频页面：ViewPager

ViewPager 是一种可以让用户通过左右滑动来切换页面的控件，通过它我们可以展示超过屏幕尺寸大小的内容，在某种程度上它可以说是实现多页面的最佳方式，同时 ViewPager 还支持任意动态的添加/删除页面。比如我们可以将不同的类别的内容分别放在不同页面当中，然后通过滑动切换不同的类别从而给用户展示不同的页面，这个在类似百度App等新闻类App中非常适用。在 ViewPager 中插入“娱乐”、“国际”、“体育”、“星座”等等新闻类别，然后在不同的 View 中展示不同的新闻内容，还可以根据用户的喜好动态增加/删除某些页面，接下来就一起来看看如何完成多页视图。

1. ViewPager 的特性

大家在使用 Android 手机的时候一定都见过下图的效果：

没错，这个就是今天的主角——ViewPager 了。在实际开发过程中，我们大多数时候会采用 Fragment 来展示一个页面而不会直接采用 View，在后面的章节学完 Fragment 之后就会知道，Fragment 可以封装 UI 和逻辑，并且会维护自己的生命周期，所以通过 Fragment 我们可以实现更丰富生动的效果，当然对于 ViewPager 的使用而言其实二者几乎没什么差别，我们现在还是把重点放在 ViewPager 上，在后面学完 Fragment 之后只需要做一些简单的改动即可将 View 替换成 Fragment。ViewPager 和前面所学的 ListView/GridView 类似，也需要一个适配器来完成数据的适配，不同的是 ViewPager 有一个专门的适配器——PagerAdapter，所以我们很多的工作也是围绕着 PagerAdapter 展开。

2. PagerAdapter 的使用方法

类似前面所讲的 BaseAdapter 的四个回调接口（不记得的同学可以返回前面章节回顾一下），PagerAdapter 同样也有类似的回调接口，如下：

• public Object instantiateItem(ViewGroup container, int position)：
  根据传入的 position 创建一个 Page，适配器需要在这个回调里网 container 里面添加 View，如下：

public Object instantiateItem(ViewGroup container, int position) {
    View itemView = mLayoutInflater.inflate(R.layout.view_pager, container, false);

    TextView textView = itemView.findViewById(R.id.TextView);
    textView.setText("Imooc Android");
    container.addView(itemView);

    return itemView;
 }

• public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object)：
  根据传入的 position 移除一个 Page

public void destroyItem(ViewGroup container, int position, Object object) {
     container.removeView((View)object);
}

• gpublic int getCount()：
  返回当前 ViewPager 中可用 View 的数量

public int getCount() {
    return mList.length;
}

• public boolean isViewFromObject(@NonNull View view, @NonNull Object object)：
  通过instantiateItem()返回的对象可以看做是一个 key，这个方法用来判断传入的 View 是否是之前创建的 key，如下：

public boolean isViewFromObject(View view, Object object) {
    return view == object;
}

常用的一般就是以上四种回调方法，理解起来都比较简单，其中要注意的是getCount和isViewFromObject这两个是必须实现的，而instantiateItem()和destroyItem()是可选的，不过大多数场景还是推荐大家实现 4 个回调方法。

3. ViewPager 完整示例

本节将通过一个简单的例子学习 ViewPager 的使用，每一个 Page 将会通过一个 View 来实现（在学习了 Fragment 之后，可以尝试将 View 替换成 Fragment）。例子中的每一个 Page 表示一种类别，在切换过程中我们会接收切换的状态回调，同步更新类别标题。

3.1 整体布局

由于每个页面都在 ViewPager 中，所以整体的布局非常简单，我们只需要放置一个 ViewPager 以及一个 TextView 用来显示当前 Page 的标题即可。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:showIn="@layout/activity_main">

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

    <TextView
        android:text="Num"
        android:textSize="100sp"
        android:id="@+id/text"
        android:layout_marginTop="50dp"
        android:layout_centerHorizontal="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
</RelativeLayout>

3.2 Page 页面的布局编写

对于整体布局而言，主要的页面都在 ViewPager 当中，所以我们需要为不同结构的 Page 编写不同的页面，由于本例中每个 Page 的页面结构都一样，所以可以直接复用一套，直接在里面放置一个 ImageView 用于展示类别图片。

<?xml version="1.0" encoding="utf-8"?>
<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

3.3 适配器的编写

适配这一块主要就是对四个回调接口的实现，其实在第 2 小节的描述中已经展示了各个方法的实现方式。

package com.emercy.myapplication;

import android.view.View;
import android.view.ViewGroup;

import androidx.annotation.NonNull;
import androidx.viewpager.widget.PagerAdapter;

import java.util.List;

public class MyAdapter extends PagerAdapter {

    private final List<View> mView;

    public MyAdapter(List<View> view) {
        mView = view;
    }

    @NonNull
    @Override
    public Object instantiateItem(@NonNull ViewGroup container, int position) {
        container.addView(mView.get(position));
        return mView.get(position);
    }

    @Override
    public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
        container.removeView(mView.get(position));
    }

    @Override
    public int getCount() {
        return mView.size();
    }

    @Override
    public boolean isViewFromObject(@NonNull View view, @NonNull Object object) {
        return view == object;
    }
}

3.4 MainActivity 主逻辑编写

主逻辑主要的任务就是将前面的布局都用上，并通过 Adapter 将数据和布局串联起来，所以我们需要获取到 ViewPager 中每个 View 的实例，设置类别之后传递给 Adpater，绑定的任务就交由Adpater完成。接下来再监听 ViewPager 的滑动状态从而判断当前切换的位置，从而实现同步更新类别标题，整体代码如下：

package com.emercy.myapplication;

import android.app.Activity;
import android.content.Context;
import android.graphics.Color;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.MotionEvent;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;
import android.widget.ViewFlipper;

import androidx.viewpager.widget.ViewPager;

import org.w3c.dom.Text;

import java.util.ArrayList;
import java.util.List;


public class MainActivity extends Activity {

    private ViewPager mViewPager;
    private String[] mTitle = new String[]{"苹果", "香蕉", "荔枝"};
    private List<View> mView = new ArrayList<>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        final TextView tv = findViewById(R.id.text);
        mViewPager = findViewById(R.id.view_pager);
        mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
                tv.setText(mTitle[position]);
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });

        ImageView view1 = (ImageView) LayoutInflater.from(this).inflate(R.layout.list_item, null);
        view1.setBackgroundColor(Color.RED);
        view1.setImageResource(R.drawable.apple);
        mView.add(view1);

        ImageView view2 = (ImageView) LayoutInflater.from(this).inflate(R.layout.list_item, null);
        view2.setBackgroundColor(Color.GREEN);
        view2.setImageResource(R.drawable.banana);
        mView.add(view2);

        ImageView view3 = (ImageView) LayoutInflater.from(this).inflate(R.layout.list_item, null);
        view3.setBackgroundColor(Color.BLUE);
        view3.setImageResource(R.drawable.lychee);
        mView.add(view3);

        mViewPager.setAdapter(new MyAdapter(mView));
        tv.setText(mTitle[0]);
    }
}

编译之后效果如下：

通过左右滑动可以切换不同的页面，每个页面对应的一种水果类别，这样就通过 ViewPager 实现了一个简单的页面切换效果。

4. 小节

本节介绍了 ViewPager 的特点及使用场景，并讲解了 ViewPager 的专属适配器——PagerAdapter 的几个回调函数的使用方法，最后采用 ViewPager 实现了一个简单的例子用于切换不同的页面从而展示不同的类别。这一节中是直接采用 View 来承载每一个 Page，而在实际开发中大多数场景会采用 Fragemnt 来承载 Page，不过对于 ViewPager 的使用到同小异，针对 Fragment 系统提供了两种 Adapter：FragmentPageAdapter和FragmentStatePagerAdapter，在学完 Fragement之后大家可以自行修改本节的例子，通过 Fragment 来实现本例的效果。