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);

 

posted on 2015-06-29 10:43  AndroidSolo  阅读(8422)  评论(0编辑  收藏  举报

导航