您的位置:首页 > 其它

ViewPager顶部标题控件PagerSlidingTabStrip

2015-06-29 10:43 274 查看
最近搞一个项目,要求做一个和网易新闻顶部菜单的滑动效果,如图:



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

自己搞了一上午无果,还是是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 每个标签的分割线的颜色

pstsIndicatorHeight
Height 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);
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: