使用PagerSlidingTabStrip实现顶部导航栏

在开发中，我们有时会遇到顶部导航栏滑动切换页面的设计，如网易新闻。实现的方式有很多种，今天我们使用PagerSlidingTabStrip配合ViewPager实现顶部导航栏。

效果图如下。


PagerSlidingTabStrip是github上的一个开源项目，项目地址如下。
https://github.com/astuetz/PagerSlidingTabStrip

（一）PagerSlidingTabStrip的使用

在使用之前，我们先来看一下PagerSlidingTabStrip中的自定义属性。

<declare-styleable name="PagerSlidingTabStrip">
    <attr name="pstsIndicatorColor" format="color" />
    <attr name="pstsUnderlineColor" format="color" />
    <attr name="pstsDividerColor" format="color" />
    <attr name="pstsIndicatorHeight" format="dimension" />
    <attr name="pstsUnderlineHeight" format="dimension" />
    <attr name="pstsDividerPadding" format="dimension" />
    <attr name="pstsTabPaddingLeftRight" format="dimension" />
    <attr name="pstsScrollOffset" format="dimension" />
    <attr name="pstsTabBackground" format="reference" />
    <attr name="pstsShouldExpand" format="boolean" />
    <attr name="pstsTextAllCaps" format="boolean" />
</declare-styleable>

各属性的详细介绍如下。
pstsIndicatorColor：滑动条的颜色。
pstsIndicatorHeight：滑动条的高度。
pstsUnderlineColor：底部线条的颜色。（底部线条会填充屏幕宽度）
pstsUnderlineHeight：底部线条的高度。
pstsDividerColor：tab之间的竖直分割线的颜色。
pstsDividerPadding：tab之间的竖直分割线，距离顶部和底部的距离，即它的paddingTop和paddingBottom。
pstsTabPaddingLeftRight：单个tab内部的左间距和右间距，即它的paddingLeft和paddingRight。
pstsTabBackground：单个tab的背景。
pstsScrollOffset：当前tab滚动的偏移量。
pstsShouldExpand：设置为ture，每个tab的权重一样，均分屏幕宽度，默认值false。
pstsTextAllCaps：是否将tab中的字母转换成大写，默认值true。

下面，我们将PagerSlidingTabStrip使用到具体项目中。

首先将PagerSlidingTabStrip添加到工程module的gradle中。