Android滑动页面导航效果: PagerSlidingTabStrip

jopen 11年前

实现类似google play store的滑动页面导航效果,在多个页面进行平滑的页面切换。

用法

For a working implementation of this project see the sample/ folder.

  1. Include the library as local library project or add the dependency in your build.gradle.

    dependencies {      compile 'com.astuetz:pagerslidingtabstrip:1.0.1'  }
  2. Include the PagerSlidingTabStrip widget in your layout. This should usually be placed above the ViewPager it represents.

    <com.astuetz.PagerSlidingTabStrip      android:id="@+id/tabs"      android:layout_width="match_parent"      android:layout_height="48dip" />
  3. In your onCreate method (or onCreateView for a fragment), bind the widget to the ViewPager.

     // Initialize the ViewPager and set an adapter   ViewPager pager = (ViewPager) findViewById(R.id.pager);   pager.setAdapter(new TestAdapter(getSupportFragmentManager()));     // Bind the tabs to the ViewPager   PagerSlidingTabStrip tabs = (PagerSlidingTabStrip) findViewById(R.id.tabs);   tabs.setViewPager(pager);
  4. (Optional) If you use an OnPageChangeListener with your view pager you should set it in the widget rather than on the pager directly.

     // continued from above   tabs.setOnPageChangeListener(mPageChangeListener);

定制

To not just look like another Play Store styled app, go and adjust these values to match your brand:

  • 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

unnamed1.pngunnamed.png

项目主页:http://www.open-open.com/lib/view/home/1388324511609