使用PagerSlidingTabStrip实现滑动标签同步的ViewPager效果



转载请注明出处：http://blog.csdn.net/zhaokaiqiang1992

    前面已经有三篇文章介绍如何在ViewPager加上指示器了，这也是最后一篇介绍关于ViewPager的指示器的文章了。

    这篇文章介绍使用开源项目PagerSlidingTabStrip实现这种效果。这个开源项目和之前的ScrpllingTabs是同一个作者。

    下面我们首先看一下实现的效果。

    这种实现方式与前面的区别是，底部的颜色标签会随着ViewPager的滑动而跟着同步移动，比之前的实现方式，更加的生动。

    除此之外，代码编写和ScrollingTabs基本一样。

    首先是布局文件。

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <com.astuetz.PagerSlidingTabStrip
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="48dip"
        android:background="@drawable/background_tabs" />

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

</RelativeLayout>

    在Activity里面，设置适配器就可以了

@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);

		tabs = (PagerSlidingTabStrip) findViewById(R.id.tabs);
		pager = (ViewPager) findViewById(R.id.pager);
		adapter = new MyPagerAdapter(getSupportFragmentManager());
		pager.setAdapter(adapter);
				
		tabs.setViewPager(pager);

	}

    ViewPager的适配器

public class MyPagerAdapter extends FragmentPagerAdapter {

		private final String[] TITLES = { "Categories", "Home", "Top Paid", "Top Free", "Top Grossing", "Top New Paid",
				"Top New Free", "Trending" };

		public MyPagerAdapter(FragmentManager fm) {
			super(fm);
		}

		@Override
		public CharSequence getPageTitle(int position) {
			return TITLES[position];
		}

		@Override
		public int getCount() {
			return TITLES.length;
		}

		@Override
		public Fragment getItem(int position) {
			return SuperAwesomeCardFragment.newInstance(position);
		}

	}

    github的项目地址：https://github.com/astuetz/PagerSlidingTabStrip