Android滑动页面导航效果: PagerSlidingTabStrip

最新推荐文章于 2016-11-17 18:58:00 发布

原创最新推荐文章于 2016-11-17 18:58:00 发布 · 3w 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#Android #PagerSlidingTabStrip #微信导航 #滑动导航

Android_ 专栏收录该内容

66 篇文章

订阅专栏

本文介绍了如何在PagerSlidingTabStrip基础上进行自定义，实现tab文字选中时颜色变化的功能，类似于微信导航栏的效果，并提供了代码示例。

广告时间：张大妈好看美剧妹子图

把github上的PagerSlidingTabStrip稍作修改：

tab的文字颜色选中变色（原版文字不变色）,类似微信导航

栗子：http://download.youkuaiyun.com/detail/onlyonecoder/7722021

PagerSlidingTabStrip 自定义属性列表：

pstsIndicatorColor Color of the sliding indicator
pstsUnderlineColor Color of the full-width line on the bottom of the view
pstsDividerColor Color of the dividers between tabs
pstsIndicatorHeightHeight of the sliding indicator
pstsUnderlineHeight Height of the full-width line on the bottom of the view
pstsDividerPadding Top and bottom padding of the dividers
pstsTabPaddingLeftRight Left and right padding of each tab
pstsScrollOffset Scroll offset of the selected tab
pstsTabBackground Background drawable of each tab, should be a StateListDrawable
pstsShouldExpand If set to true, each tab is given the same weight, default false
pstsTextAllCaps If true, all tab titles will be upper case, default true

修改后加了一个属性 selectedTabTextColor

如果不设置默认和滑动指示器颜色（pstsIndicatorColor）一致

下图效果的代码：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" 
    xmlns:app="http://schemas.android.com/apk/res/org.lmw.demo.slidingtab">

    <org.lmw.demo.slidingtab.widget.PagerSlidingTabStrip
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        app:pstsShouldExpand="true"
        app:pstsUnderlineHeight="2dp"
        app:pstsIndicatorHeight="2dp"
        app:pstsIndicatorColor="@android:color/holo_blue_light"
       	app:selectedTabTextColor="@android:color/holo_blue_light"
        app:pstsDividerColor="@android:color/transparent"
	    app:pstsTabBackground="@drawable/background_tab"
	   	android:background="@android:color/white"
         />

    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/tabs" />

</RelativeLayout>