在开发中,我们有时会遇到顶部导航栏滑动切换页面的设计,如网易新闻。实现的方式有很多种,今天我们使用PagerSlidingTabStrip配合ViewPager实现顶部导航栏。
效果图如下。
PagerSlidingTabStrip是github上的一个开源项目,项目地址如下。
https://github.com/astuetz/PagerSlidingTabStrip
(一)PagerSlidingTabStrip的使用
在使用之前,我们先来看一下PagerSlidingTabStrip中的自定义属性。
各属性的详细介绍如下。
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是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使用到具体项目中。