ViewPager顶部标题控件PagerSlidingTabStrip

最近搞一个项目，要求做一个和网易新闻顶部菜单的滑动效果，如图：

顶部标题中下面有个红色的矩形小条，左右滑动时会跟随手势动态滑动，效果很绚丽，唉，特效啊！

自己搞了一上午无果，还是是github上找大神吧，最后发现了PagerSlidingTabStrip这个库，如下图：

顶部就是用的PagerSlidingTabStrip下面是用ViewPager实现的，红色矩形条可以跟着屏幕的滑动而滑动，效果同样非常炫，最重要的是使用非常方便，引入library方式或者自己整理出来都可以，很方便很实用，Github地址为：https://github.com/astuetz/PagerSlidingTabStrip 万能的Github啊。具体怎么引入工程中使用就不多介绍了，大家都搞的定的，下面简单介绍下这个类库常用的方法和属性。

PagerSlidingTabStrip常用属性如下，所有的属性都可以在xml中或者Activity中设置，可以通过get和set方法来设置属性：

• 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  每个标签的背景，应该是一个StateListDrawable
• pstsShouldExpand If set to true, each tab is given the same weight, default false   如果设置为true，每个标签是相同的控件，均匀平分整个屏幕，默认是false
• pstsTextAllCaps If true, all tab titles will be upper case, default true   如果为true，所有标签都是大写字母，默认为true

简单介绍下用法，下载后在sample/文件夹下可运行的示例工程，可以参考着写

第一步、引入library作为本地包工程，在你的layout的xml布局文件中加入PagerSlidingTabStrip控件

<com.demo.PagerSlidingTabStrip
    android:id="@+id/tabs"
    android:layout_width="match_parent"
    android:layout_height="50dp" />

第二步、在Activity的onCreate方法中绑定PagerSlidingTabStrip控件到ViewPager上

//为ViewPager设置适配器

ViewPager .setAdapter(new MyAdapter(getSupportFragmentManager())); 

//ViewPager绑定PagerSlidingTabStrip PagerSlidingTabStrip tabs = (PagerSlidingTabStrip) findViewById(R.id.tab_one); tabs.setViewPager(pager);注意：这里的ViewPager的适配器必须是继承的FragmentPagerAdapter，并重写getPageIconResId(int position)或者getPageTitle(int position)方法 

第三步、设置onPageChangeListener监听方法

 tabs.setOnPageChangeListener(onPageChangeListener);