【Android界面实现】使用PagerSlidingTabStrip实现滑动标签同步的ViewPager效果

 前面已经有三篇文章介绍如何在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