Android零基础入门第70节：ViewPager轻松完成Ta

作者: 今生心理金馀 | 来源:发表于2017-09-28 10:26 被阅读233次

上一期学习了ViewPager的简单使用，本期一起来学习ViewPager的更多用法。

相信很多同学都使用过今日头条APP吧，一打开主界面就可以看到顶部有很多Tab，然后通过左右滑动来切换，就可以通过ViewPager来完成。当然具体实现又会有很多方式，我们本期就先来学习最简单的Tab切换吧，有一点类似于之前了解的TabHost。

一、PagerTitleStrip与PagerTabStrip

在实际运用中，很多时候只有页面滑动是不够的，还需要有标题栏才够友好。首先来学习一下官方自带的，在android.support.v4包中的两个控件PagerTabStrip与PagerTitleStrip。

上面提到的2个控件，其中PagerTitleStrip是普通文字，PagerTabStrip带有下划线。PagerTabStrip在效果上包含了PagerTitleStrip。

如果只添加PagerTabStrip可以看到只有线，但是它占的布局是有一定高度的，而且默认是不显示标题的，如果要显示出来，需在适配器里重写getPageTitle(int position)方法。关于标题及这条线的颜色，和整个标识View的背景，都可以在代码里设置。

还有一个区别就是，PagerTabStrip可以点击切换View，而PagerTitleStrip不能点击。

接下来通过一个案例来学习PagerTabStrip的使用。

继续再上一期的案例基础上来进行修改，首先修改viewpager_layout.xml文件，修改后的代码如下：

然后几个页面布局文件不变，既然需要在顶部显示Tab和标题，那就需要我们通过适配器来设置，修改后的ViewPagerAdapter类代码如下：

接着修改ViewPagerActivity，修改的代码如下：

重新运行程序，可以看到界面中已经出现了久违的Tab和标题，左右滑动页面也可以看到Tab处的线条跟随改变，如下图所示：

从上面的案例可以发现，PagerTabStrip是ViewPager的一个关于当前页面、上一个页面和下一个页面的一个可交互的指示器。其默认显示在顶部，还可以通过android:layout_gravity 属性设置为TOP或BOTTOM将它显示在ViewPager的顶部或底部。

关于PagerTitleStrip的使用，和PagerTabStrip基本差不多，只是布局文件中ViewPager包含的控件不同而已，这里就不再详细说明了，建议自己动手练习，如果有问题，欢迎进Android入门讨论群一起探讨。

二、自定义实现

上面我们使用了系统自带的控件来完成Tab显示，可能有的同学已经发现其与TabHost还是有一定的差别的，上面的Tab只显示3个，而且也不能完全满足实际需求，就需要我们自定义来实现了。

接下来依然通过一个案例来学习如何自定义ViewPager的Tab标签。

继续使用WidgetSample工程的advancedviewsample模块，在src/main/res/layout/目录下创建viewpager_custom_layout.xml文件，在其中填充如下代码片段：

在页面顶部有一个线性布局，里面包含3个TextView，也就是ViewPager顶部的3个Tab标签。然后下面紧跟一个ImageView，主要用于指示当前是哪一个Tab标签对应的页面，也就是常说的滑块。最后在最底下是一个ViewPager，其中android:flipInterval属性设置了动画的时间间隔，android:persistentDrawingCache属性指控件的绘制缓存策略，一共有4个可选值，或者选择2个进行组合，分别如下：

none：不在内存中保存绘图缓存。

animation:只保存动画绘图缓存。

scrolling：只保存滚动效果绘图缓存。

all：所有的绘图缓存都应该保存在内存中。

然后新建几个页面文件，这里继续使用上一期ViewPager快速实现引导页里面的页面文件，同样使用相同的适配器ViewPagerAdapter。

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

可以发现这里的代码和上期大致相同，只是在其中增加了滑块的位置及动画设置，为3个Tab标签监听了点击事件。其中initCursorPosition()方法主要初始化指示器图标的位置，需要根据屏幕宽度来计算游标显示位置。然后同样设置了页面监听器，主要根据滑动到的页面把游标滑动找指定位置。关于动画的这一块代码，可能有很多新人不太懂，不要太介意这个了，后续会专门进行学习，这里只需要知道可以这样使用就行。

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