ViewPager 实现页面切换「入门篇」

      我们都知道现在的 App 大多是都使用横向滑动改变页面，之前自己在项目中也做过页面滑动的功能。当时在项目中接触到这个功能还没有接触到 ViewPager 控件，所以照葫芦画瓢，在网上搜了很多的 Demo 然后整合起来，每个滑动页面实现了自己想要的布局，里边的代码确实很多不懂得。指导遇到另一个项目又需要页面滑动，所以想深入 ViewPager 控件源码搞个明白到底怎么一步步实现的,满足我强烈的好奇心。

ViewPager 控件涉及到很多的技术点，我陆续分为几篇来详细整理总结一下，今天要讲的是 ViewPager 滑动页面控件「入门篇」。

1.  在 activity_main.xml 添加控件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:android="http://schemas.android.com/apk/res/android" >
    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="center">
    </android.support.v4.view.ViewPager>
</LinearLayout>

2. 建立三个 .xml 布局文件分别为 layout1.xml , layout2.xml , layout3.xml 。

第一个 layout1.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/layout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffffff"
    android:orientation="vertical" >
</LinearLayout>

第二个 layout2.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/layout2"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffff00"
    android:orientation="vertical">
</LinearLayout>

第三个 layout3.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/layout3"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ff00ff"
    android:orientation="vertical">
</LinearLayout>

这三个页面将背景设为三个不同的颜色，为了更明显的辨别滑动效果。

3. 在 MainActivity.java 中添加适配器「按照规范来应该单独新建一个类来写适配器」

3.1 声明控件

//声明三个页面 view变量
private View view1,view2,view3;
//声明类型为View的List列表存放三个页面
private List<View> viewList;
//声明 viewPager 变量
private ViewPager viewPager;

3.2 关联控件

//关联控件
viewPager = (ViewPager) findViewById(R.id.viewpager);

LayoutInflater inflater = getLayoutInflater();
//参数1：要加载的xml资源文件，加载出错抛出InflateException异常。
//参数2：新生成视图的父层，可设置为NULL。
view1 = inflater.inflate(R.layout.layout1,null);
view2 = inflater.inflate(R.layout.layout2,null);
view3 = inflater.inflate(R.layout.layout3,null);

// 将要分页显示的View装入数组中
viewList = new ArrayList<View>();
viewList.add(view1);
viewList.add(view2);
viewList.add(view3);

当时遇到 LayoutInflater 时还不怎么了解，然后去官网搜了下资料，然后整理总结了一下。想必有很多初学者也不明白吧，那么就简单提一提吧。

LayoutInflater :

1. 介绍：
    LayoutInflater类在以后的开发中会经常用到，它的作用类似于 findViewById() 。不同点是LayoutInflater 是用来找 res/layout/ 下的 xml 布局文件，并且实例化；而 findViewById() 是找 xml 布局文件下的具体 widget 控件的(如 Button、TextView等)。

2.功能：

    ① 对于一个没有被载入或者想要动态载入的界面，都需要使用 LayoutInflater.inflate() 来载入。

    ② 对于一个已经载入的界面，就可以使用Activiyt.findViewById()方法来获得其中的界面元素。

3. 在 ViewPager 我们用到了功能 ①，就具体分析一下上边的代码：

LayoutInflater inflater = getLayoutInflater();
view1 = inflater.inflate(R.layout.layout1,null);

首先生成 LayoutInflater 对象接受程序中通过 getLayoutInflater() 获取到的布局，然后通过view = inflater.inflate(参数一, 参数二)方法关联布局。就如 findViewById 关联控件一样。

3.3 配置页面适配器「让我们生成的 ViewPager 实例通过适配器来实现页面滑动」

//生成页面适配器
PagerAdapter pagerAdapter = new PagerAdapter() {

    //getCount():返回要滑动的VIew的个数
    @Override
    public int getCount() {
        return viewList.size();
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {

        container.removeView(viewList.get(position));
    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {

        container.addView(viewList.get(position));
        return viewList.get(position);
    }
    
    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view == object;
    }
};

//将viewPager实例应用于适配器
viewPager.setAdapter(pagerAdapter);

这样就可以实现页面滑动了，对于上边的函数下一篇中我会就可官方的英文文档进行详细介绍。

源代码：

package com.example.boybaby.viewpagerdemo;

import android.app.Activity;
import android.os.Bundle;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

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

public class MainActivity extends Activity {

    //声明控件
    private View view1,view2,view3;

    private List<View> viewList;

    //对应的viewPager
    private ViewPager viewPager;

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

        //关联控件
        viewPager = (ViewPager) findViewById(R.id.viewpager);

        LayoutInflater inflater = getLayoutInflater();
        //参数1：要加载的xml资源文件，加载出错抛出InflateException异常。
        //参数2：新生成视图的父层，可设置为NULL。
        view1 = inflater.inflate(R.layout.layout1,null);
        view2 = inflater.inflate(R.layout.layout2,null);
        view3 = inflater.inflate(R.layout.layout3,null);

        // 将要分页显示的View装入数组中
        viewList = new ArrayList<View>();
        viewList.add(view1);
        viewList.add(view2);
        viewList.add(view3);

        //生成页面适配器
        PagerAdapter pagerAdapter = new PagerAdapter() {

            //getCount():返回要滑动的VIew的个数
            @Override
            public int getCount() {
                return viewList.size();
            }

            @Override
            public void destroyItem(ViewGroup container, int position, Object object) {

                container.removeView(viewList.get(position));
            }

            @Override
            public Object instantiateItem(ViewGroup container, int position) {

                container.addView(viewList.get(position));
                return viewList.get(position);
            }

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

        //将viewPager实例应用于适配器
        viewPager.setAdapter(pagerAdapter);
    }
}

这样就实现页面滑动了，后边适配器生成的几个函数下一篇我会结合官网的英文文档进行及详细说明。