为了账号安全，请及时绑定邮箱和手机立即绑定
首页 手记 Android零基础入门第69节：ViewPager快...

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

标签：
Android

 在很多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代码：

?

01

02

03

04

05

06

07

08

09

10

11

<?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代码：

?

01

02

03

04

05

06

07

08

09

10

11

<?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:class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="@drawable/image_01"/>

</RelativeLayout>

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

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

[代码]java代码：

?

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

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));

    }

}

</view></view>

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

[代码]java代码：

?

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

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) {

 

    }

}

</view>

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

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

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

原文链接：http://www.apkbus.com/blog-205190-72814.html

点击查看更多内容
发表于 2018.09.05 18:25， 共 1666 人浏览

本文原创发布于慕课网 ，转载请注明出处，谢谢合作

举报
为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

作者其他优质文章

正在加载中

一只名叫tom的猫

手记
篇
粉丝
62
获赞与收藏
330

关注作者，订阅最新文章

阅读免费教程

  • 推荐
  • 评论
  • 收藏
  • 共同学习，写下你的评论
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消