ViewPager快速实现引导页
在很多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模块,在src/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,运行程序,然后左右滑动屏幕,可以看到下图所示界面效果。
不知道你是否发现,这是不是就是我们常见的应用程序启动时的引导页,只是示例相对来说比较简单,没有页面指示引导,这一块后续学习再逐步来优化完成。
- Unity应用架构设计(10)——绕不开的协程和多线程(Part 1)
- 代码审计|PHP代码执行函数进阶版实力上线了!
- Golang中巧用defer进行错误处理
- Unity应用架构设计(10)——绕不开的协程和多线程(Part 2)
- 厚土Go学习笔记 | 07. 基本类型
- Unity应用架构设计(11)——一个网络层的构建
- Go语言·Web调优详解
- Unity应用架构设计(12)——AOP思想的实践
- 厚土Go学习笔记 | 26. 函数闭包
- 学会代码执行函数,让老哥带你勇闯天涯!
- ASP.NET Core知多少(6):VS Code联调Angular + .NetCore
- 线程安全知多少
- Parallel线程安全问题
- 厚土Go学习笔记 | 25. 函数值 函数是函数也是值
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- [-Flutter趣玩篇-] 出神入化的Align
- Android应用禁止屏幕休眠的3种方法
- Flutter 实现下拉刷新上拉加载的示例代码
- [- C++趣玩篇1 -] 从打印开始说起
- Android实现蓝牙(BlueTooth)设备检测连接
- JQuery 入门学习(三)
- Android实现美团APP的底部滑动菜单
- 正则十八式-第二式:控鹤擒龙
- android实现手写签名功能
- [普及]程序自启动方式 - ActiveX
- Android WebView实现顶部进度条
- 通过一个简单的例子学习Angular Injection Token工作原理
- Android 自定义球型水波纹带圆弧进度效果(实例代码)
- Android自定义View实现弹幕效果
- 使用Injection Token将字符串类型的参数注入到类的构造函数里