Android零基础入门第69节：ViewPager快速实现引导页

时间：2017-09-27 13:31:48 阅读：271 评论：0 收藏：0 [点我收藏+]

在很多APP第一次启动时都会出现引导页，在一些APP里面还会包括一些左右滑动翻页和页面轮播切换的情况。在之前也已经学习了AdapterViewFlipper和ViewFlipper，都可以很好的实现，今天继续来学习一个功能更加强大的ViewPager组件。

技术分享

一、ViewPager简介

ViewPager是android扩展包v4包中的类，这个类可以让用户左右滑动切换当前的view。ViewPager继承自ViewGroup，也就是ViewPager是一个容器类，可以包含其他的View类。

ViewPager的主要方法有以下几个：

setAdapter(PagerAdapter adapter) ：为ViewPager设置适配器，ViewPager有三种适配器，包括PagerAdapter、FragmentPagerAdapter、FragmentStatePagerAdapter，它们分别有不同的特性，本期会先来学习PagerAdapter。
setCurrentItem(int item) ：设置显示item位置的界面。
setOffscreenPageLimit(int limit) ：用来设置当前显示页面左右两边各缓存的页面数。
addOnPageChangeListener(OnPageChangeListener listener) ：为ViewPager添加页面切换时的监听。

关于界面监听的内容，接下来对OnPageChangeListener中的方法进行说明：

onPageScrollStateChanged(int state) ：该方法在手指操作屏幕的时候发生变化。有三个值：0(END)、1(PRESS) 、2(UP) 。当用手指滑动翻页时，手指按下去的时候会触发这个方法，state值为1，手指抬起时，如果发生了滑动（即使很小），这个值会变为2，然后最后变为0 。总共执行这个方法三次。一种特殊情况是手指按下去以后一点滑动也没有发生，这个时候只会调用这个方法两次，state值分别是1、0 。当setCurrentItem翻页时，会执行这个方法两次，state值分别为2 、0 。
onPageScrolled(int position, float positionOffset, int positionOffsetPixels) ：该方法在滑动过程中将一直被调用，该方法的参数说明如下：

position：当用手指滑动时，如果手指按在页面上不动，position和当前页面index是一致的；如果手指向左拖动（相应页面向右翻动），这时候position大部分时间和当前页面是一致的，只有翻页成功的情况下最后一次调用才会变为目标页面；如果手指向右拖动（相应页面向左翻动），这时候position大部分时间和目标页面是一致的，只有翻页不成功的情况下最后一次调用才会变为原页面。当直接设置setCurrentItem翻页时，如果是相邻的情况（比如现在是第二个页面，跳到第一或者第三个页面），如果页面向右翻动，大部分时间是和当前页面是一致的，只有最后才变成目标页面；如果向左翻动，position和目标页面是一致的。这和用手指拖动页面翻动是基本一致的。如果不是相邻的情况，比如我从第一个页面跳到第三个页面，position先是0，然后逐步变成1，然后逐步变成2；我从第三个页面跳到第一个页面，position先是1，然后逐步变成0，并没有出现为2的情况。
positionOffset：当前页面滑动比例，如果页面向右翻动，这个值不断变大，最后在趋近1的情况后突变为0。如果页面向左翻动，这个值不断变小，最后变为0。
positionOffsetPixels：当前页面滑动像素，变化情况和positionOffset一致。

onPageSelected(int position) ：position是被选中页面的索引，该方法在页面被选中或页面滑动足够距离切换到该页手指抬起时调用。

上面三个方法的执行顺序：用手指拖动翻页时，最先执行一遍onPageScrollStateChanged(1)，然后不断执行onPageScrolled，放手指的时候，直接立即执行一次onPageScrollStateChanged(2)，然后立即执行一次onPageSelected，然后再不断执行onPageScrollStateChanged，最后执行一次onPageScrollStateChanged(0)。

在大多数使用适配器的控件里，适配器相对于数据源和视图来说都更加复杂，同时也决定了这个控件主要的功能，ViewPager也不例外。实现一个PagerAdapter时，至少需要重写下面的4个方法：

getCount()：返回有效视图的数量。
isViewFromObject(View, Object)：决定一个页面view是否与instantiateItem(ViewGroup, int)方法返回的具体key对象相关联。
instantiateItem(ViewGroup, int)：创建指定位置的页面视图。适配器有责任增加即将创建的View视图到给定的container中，确保在finishUpdate(viewGroup)返回时，增加视图的事情已经完成。
destroyItem(ViewGroup, int, Object)：移除给定位置的view，适配器有责任将该view从container中移除，确保在finishUpdate(viewGroup)返回时，移除视图的事情已经完成。

除了上述4个方法，还有以下一些方法，可根据实际需要进行重写。

getItemPosition (Object object)：当宿主视图尝试判断一项的位置是否改变时调用。如果给定项的位置没有改变则返回POSITION_UNCHANGED，如果该项不再存在于适配器中则返回POSITION_NONE。
startUpdate (ViewGroup container) ：在展示的界面中有改变将要发生时调用。
finishUpdate (ViewGroup container)：展示界面中的改变完成时调用。在这个时间点上，你必须确保所有的页面已被合适的从container中添加或移除。
notifyDataSetChanged ()：该方法由应用程序在适配器数据改变时主动调用。
registerDataSetObserver (DataSetObserver observer)：注册一个观察者去接收关联到适配器数据变化的回调。
unregisterDataSetObserver (DataSetObserver observer)：反注册去接收关联到适配器数据变化的回调的观察者。
setPrimaryItem (ViewGroup container, int position, Object object)：调用该方法去通知当前适配器的哪一项被考虑为“primary”，它是当前展示给用户的页面。
getPageTitle (int position)：该方法由ViewPager在获取描述页面的标题时调用，默认返回null。
getPageWidth (int position)：该方法返回给定页面的比例宽度，范围(0.f-1.f]。
saveState ()：保存与适配器关联的实例状态，当当前UI状态需要重建时恢复。
restoreState (Parcelable state, ClassLoader loader)：恢复之前由saveState ()保存的与适配器关联的实例状态。

ViewPager的具体使用类似于之前学习的列表类组件，首先构造适配器，然后提供数据源，最后加载适配器。

二、ViewPager示例

接下来通过一个简单的示例程序来学习ViewPager的使用。

继续使用WidgetSample工程的advancedviewsample模块，在app/main/res/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:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
    </android.support.v4.view.ViewPager>
</LinearLayout>

然后新建几个页面文件，第一个页面命名为viewpager_pager1.xml，其代码如下：

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

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:src="@drawable/image_01"/>
</RelativeLayout>

另外再新建3个，为了简单布局和上面一样，将其中的代码加载的图片换一下即可。

新建ViewPagerAdapter类，继承PagerAdapter，并重写其方法，代码如下：

package com.jinyu.cqkxzsxy.android.advancedviewsample.adapter;

import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;

import java.util.ArrayList;

/**
 * @创建者 鑫鱻
 * @描述 Android零基础入门到精通系列教程
 * 首发微信公众号分享达人秀（ShareExpert）
 */
public class ViewPagerAdapter extends PagerAdapter {
    private ArrayList<View> mPageList = null;

    public ViewPagerAdapter(ArrayList<View> pageList) {
        this.mPageList = pageList;
    }

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

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

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        View pageView = mPageList.get(position);
        container.addView(pageView);
        return pageView;
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        // 将当前位置的View移除
        container.removeView(mPageList.get(position));
    }
}

新建ViewPagerActivity.java文件，加载上面新建的布局文件，具体代码如下：

package com.jinyu.cqkxzsxy.android.advancedviewsample;

import android.os.Bundle;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.Toast;

import com.jinyu.cqkxzsxy.android.advancedviewsample.adapter.ViewPagerAdapter;

import java.util.ArrayList;

/**
 * @创建者 鑫鱻
 * @描述 Android零基础入门到精通系列教程，欢迎关注微信公众号ShareExpert
 */
public class ViewPagerActivity extends AppCompatActivity implements ViewPager.OnPageChangeListener {
    private ViewPager mViewPager = null;
    private ViewPagerAdapter mAdapter = null;
    private ArrayList<View> mPageList = null;

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

        mViewPager = (ViewPager) findViewById(R.id.view_pager);

        mPageList = new ArrayList<>();
        LayoutInflater inflater = getLayoutInflater();
        mPageList.add(inflater.inflate(R.layout.viewpager_page1, null, false));
        mPageList.add(inflater.inflate(R.layout.viewpager_page2, null, false));
        mPageList.add(inflater.inflate(R.layout.viewpager_page3, null, false));
        mPageList.add(inflater.inflate(R.layout.viewpager_page4, null, false));

        mAdapter = new ViewPagerAdapter(mPageList);
        mViewPager.setAdapter(mAdapter);

        mViewPager.addOnPageChangeListener(this);
    }

    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

    }

    @Override
    public void onPageSelected(int position) {
        Toast.makeText(this, "第" + (position + 1) + "页", Toast.LENGTH_SHORT).show();
    }

    @Override
    public void onPageScrollStateChanged(int state) {

    }
}

　　修改程序启动的Activity，运行程序，然后左右滑动屏幕，可以看到下图所示界面效果。

技术分享