标签—PagerSlidingTabStrip和ViewPager联动效果

自我介绍

GitHub源码链接
主要实现功能是，Tab标签和ViewPager实现联动，并且实现Fragment填充内容，实现切换标签展示不同内容的效果。

1、依赖

dependencies {
   compile 'cc.tracyzhang:PagerSlidingTabStrip:1.1.1'
}

2、布局中加入PagerSlidingTabStrip控件

它通常要在ViewPager控件之上，app:是姓名空间，自动填充就行，根据自己的业务逻辑的需要设置不同的属性

 <com.astuetz.PagerSlidingTabStrip
        android:id="@+id/tablayout"
        android:layout_width="match_parent"
        android:layout_height="40dp"

        app:pstsIndicatorColor="#0f0"  //滑动条颜色
        app:pstsIndicatorHeight="2dp"  //滑动条高度
        app:pstsIndicatorMarginLeftRight="10dp"//滑动条距离左右距离

        app:pstsUnderlineColor="#f00"  //滑动条所在父线的颜色
        app:pstsUnderlineHeight="1dp"  //滑动条所在父线的高度

       //如果设置为true，每个标签是相同的控件，均匀平分整个屏幕，默认是false
        app:pstsShouldExpand="true"   

        app:pstsDividerColor="#00f" //分割线的颜色
        app:pstsDividerWidth="1dp"  //分割线的宽度
        app:pstsDividerPadding="5dp"//分割线底部和顶部的填充宽度

        app:pstsTabTextStyle="bold|italic" //
        app:pstsTabBackground="@drawable/tab_bg"  //标签文本背景颜色
        app:pstsTabTextSize="30sp"        //标签文本大小
        app:pstsTextAllCaps       //如果为true，所有标签都是大写字母，默认为true
        />           

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >
    </android.support.v4.view.ViewPager>

3、这是一个测试Fragment

public class TestFragment extends Fragment {
  //定义TestFragment的获取对象方法，从外界获取文本内容
    public static TestFragment newInstance(String content){
        Bundle arg = getBundle(content);

        TestFragment fragment = new TestFragment();
        fragment.setArguments(arg);
        return fragment;
    }
   //定义一个Bundle方法传输文本
    @NonNull
    public static Bundle getBundle(String content) {
        Bundle arg = new Bundle();
        arg.putString("content",content);
        return arg;
    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        Bundle arg = getArguments();//获取一个Bundle
        String content = arg.getString("content");//通过定义好的tag获取数据

        TextView textView = new TextView(getActivity());//代码实现布局，只是一个text的文本
        textView.setText(content);//给文本设置获取到的内容
        return textView;
    }
}

4、绑定PagerSlidingTabStrip控件到ViewPager上

NewsFragment为例：

public class NewsFragment extends Fragment {

    @butterknife.InjectView(R.id.tablayout)
    PagerSlidingTabStrip tablayout;
    @butterknife.InjectView(R.id.viewpager)
    ViewPager viewpager;

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_news, null);

        butterknife.ButterKnife.inject(this, view);
        //创建一个集合，放入创建Fragment
        List<Fragment> fragmentlist = new ArrayList<>();
        fragmentlist.add(TestFragment.newInstance("这是 资讯 界面"));
        fragmentlist.add(TestFragment.newInstance("这是 热点 界面"));
        fragmentlist.add(TestFragment.newInstance("这是 博客 界面"));
        fragmentlist.add(TestFragment.newInstance("这是 推荐 界面"));

       viewpager.setAdapter(newMyViewPagerAdapter(getFragmentManager(),fragmentlist));
        // 关联标题栏和Viewpager
        tablayout.setViewPager(viewpager);

    @Override
    public void onDestroyView() {
        super.onDestroyView();
        butterknife.ButterKnife.reset(this);
    }
}

5、创建MyViewPagerAdapter

public class MyViewPagerAdapter extends FragmentPagerAdapter {

    private List<Fragment> fragmentList;
  //获取传入的集合
    public MyViewPagerAdapter(FragmentManager fm, List<Fragment> fragmentList) {
        super(fm);
        this.fragmentList = fragmentList;
    }
  //索引下对应的Fragment
    @Override
    public Fragment getItem(int position) {
        return fragmentList.get(position);
    }
   //获取有多少个Fragment
    @Override
    public int getCount() {
        return fragmentList.size();
    }
   //tab标签设置文本
    @Override
    public CharSequence getPageTitle(int position) {
        return "界面 "+position;
    }
}

 /**
     * 初始化指针控件
     * 特殊要求：必须重写adapter中的getpagetitle
     */
    private void initPagerSlidingTabStrip() {
        // 写在ViewPager初始化后面
        PagerSlidingTabStrip tabs = (PagerSlidingTabStrip) findViewById(R.id.main_content_viewpager_tabs);
        //设置标签的高
        tabs.setIndicatorHeight(5);
        //设置颜色
        //颜色
        int color= Color.parseColor("#38ACFF");
        tabs.setIndicatorColor(color);
        //设置分割线
        tabs.setUnderlineHeight(2);
        tabs.setUnderlineColor(color);
        //设置标签字体大小
        tabs.setTextSize(25);
        //设置字体颜色，选择器StateList表示选择器内的item>=2
        tabs.setTextColorStateListResource(R.drawable.tab_text_color_selector);
        //设置标签背景透明
        tabs.setTabBackground(android.R.color.transparent);
        //设置初始化后的ViewPager
        tabs.setViewPager(mViewPager);
    }