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

时间 2019-11-17

标签 android 零基础入门 viewpager 快速实现引导栏目 Android 繁體版

原文原文链接

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

1、ViewPager简介

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

ViewPager的主要方法有如下几个：缓存

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

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

onPageScrollStateChanged(int state) ：该方法在手指操做屏幕的时候发生变化。有三个值：0(END)、1(PRESS) 、2(UP) 。当用手指滑动翻页时，手指按下去的时候会触发这个方法，state值为1，手指抬起时，若是发生了滑动（即便很小），这个值会变为2，而后最后变为0 。总共执行这个方法三次。一种特殊状况是手指按下去之后一点滑动也没有发生，这个时候只会调用这个方法两次，state值分别是一、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的具体使用相似于以前学习的列表类组件，首先构造适配器，而后提供数据源，最后加载适配器。

2、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，运行程序，而后左右滑动屏幕，能够看到下图所示界面效果。

不知道你是否发现，这是否是就是咱们常见的应用程序启动时的引导页，只是示例相对来讲比较简单，没有页面指示引导，这一块后续学习再逐步来优化完成。

今天就先到这里，若是有问题欢迎留言一块儿探讨，也欢迎加入Android零基础入门技术讨论微信群，共同成长！

此文章版权为微信公众号分享达人秀（ShareExpert）——鑫鱻全部，若需转载请联系做者受权，特此声明！

往期总结分享：

Android零基础入门第1节：Android的前世此生

Android零基础入门第2节：Android 系统架构和应用组件那些事

Android零基础入门第3节：带你一块儿来聊一聊Android开发环境

Android零基础入门第4节：正确安装和配置JDK, 高富帅养成第一招

Android零基础入门第5节：善用ADT Bundle, 轻松邂逅女神

Android零基础入门第6节：配置优化SDK Manager, 正式约会女神

Android零基础入门第7节：搞定Android模拟器，开启甜蜜之旅