PagerTabStrip实现导航栏

前言

之前写过关于TabLayout实现导航栏的文章，今天这篇文章，让我们来学习下新的实现导航栏效果的控件PagerTabStrip

今天涉及知识点：

1. PagerTabStrip简介
2. 实现导航栏的前置条件
3. PagerTabStrip在Activity中使用
4. 效果图和项目结构图
5. PagerTabStrip属性方法
   5.1 布局
   5.2 设置显示位置
   5.3 设置导航下划线颜色
   5.4 其他设置
6. PagerTabStrip自定义属性思路
7. 适配器TempPagerAdapter源码

先来波效果图：

1.gif
2.gif

---

更多精彩内容，请关注微信公众号 "Android进击",大家一起来学习进步吧

---

一. PagerTabStrip简介

PagerTabStrip是Android中一个实现ViewPager+Fragment界面时，帮助快速实现切换导航栏的类，其继承自PagerTitleStrip。PagerTitleStrip和PagerTabStrip使用方法差不多，但由于PagerTabStrip相比之下功能更加强大，所以此文主要介绍PagerTabStrip的使用，这里需要注意的是PagerTabStrip控件布局的时候必须放在ViewPager控件内部，且只有在和ViewPager结合使用的时候，PagerTabStrip功能才生效。可以说是为ViewPager实现导航效果而生。

二. 实现导航栏的前置条件

要实现ViewPager+Fragment界面效果，首先我们得准备几个Fragement，这里为了方便讲述，我准备了三个Fragment：FragmentA,FragmentB和FragmentC。三个Fragment代码及布局几乎一致。下面就以FragmentA为例，贴下Fragment代码：

public class FragmentA extends Fragment {

    private View mLayoutView;
    private Context mContext;
    private TextView mTvTestA;

    @Override
    public void onAttach(Context context) {
        super.onAttach(context);
        this.mContext=context;
    }

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        mLayoutView = inflater.inflate(R.layout.fragment_a, container, false);

        initView();
        initData();
        setListener();

        return mLayoutView;
    }

    private void initView(){
        mTvTestA=mLayoutView.findViewById(R.id.tv_a);
    }

    private void initData(){
        Bundle bundle=getArguments();
        String value="";
        if(bundle!=null) {
            value = bundle.getString("A");
        }
        mTvTestA.setText("魂斗罗");
    }

    private void setListener(){}

}

FragmentA对应布局fragment_a.xml代码如下：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
    tools:context=".MainActivity"
    android:clickable="true"
    android:background="@color/white">

    <TextView
        android:id="@+id/tv_a"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginBottom="8dp"
        android:text="Hello World!"
        android:textColor="#000000"
        android:textSize="16sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

然后还会涉及到一个ViewPager相关的适配器——TempPagerAdapter.我在TempPagerAdapter中封装了几个关于PagerTabStrip属性设置的方法：

    /***
     * 设置PagerTabStrip字体颜色
     *
     * @param colorId: eg:R.color.red
     */
    public void setColorId(int colorId)

    /**设置PagerTabStrip字体大小**/
    public void setTextSize(float textSize)

    /***
     * 设置PagerTabStrip下划线颜色
     * @param indicatorColor eg:R.color.red
     * @param pagerTabStrip  PagerTabStrip对象
     */
    public void setIndicatorColor(int indicatorColor, PagerTabStrip pagerTabStrip) 

TempPagerAdapter代码的话，后面会贴出来，让我们接着往下看。

三. PagerTabStrip在Activity中使用

下面贴出PagerTabStrip在Activity中使用代码:

public class TempActivity extends AppCompatActivity implements View.OnClickListener {

    private ViewPager mViewPager;
    private PagerTabStrip mPagerTabStrip;

    private List<String> mTitleList;
    private List<Fragment> mFragmentList;
    private TempPagerAdapter mTempPagerAdapter;

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

        //初始化控件
        initView();
        //初始化数据
        initData();
        //控件监听
        setListener();
    }

    /**初始化控件**/
    private void initView(){
        mViewPager=findViewById(R.id.viewPager);
        mPagerTabStrip=findViewById(R.id.pagertab);
    }

    /**初始化数据**/
    private void initData(){
        //标题填充
        mTitleList = new ArrayList<>();
        mTitleList.add("魂斗罗");
        mTitleList.add("双截龙");
        mTitleList.add("忍者神龟");
        //fragment填充
        mFragmentList = new ArrayList<>();
        mFragmentList.add(0, new FragmentA());
        mFragmentList.add(1, new FragmentB());
        mFragmentList.add(2, new FragmentC());
        //viewPager设置
        mTempPagerAdapter = new TempPagerAdapter(getSupportFragmentManager(), mFragmentList,mTitleList);
        mViewPager.setOffscreenPageLimit(mTitleList.size());// 设置预加载Fragment个数
        mViewPager.setAdapter(mTempPagerAdapter);
        mViewPager.setCurrentItem(0);// 设置当前显示标签页为第一页
        //PagerTabStrip设置
        mTempPagerAdapter.setIndicatorColor(R.color.blue,mPagerTabStrip);//改下划线颜色
        //设置PagerTabStrip字体颜色
        mTempPagerAdapter.setColorId(R.color.black);
        //设置PagerTabStrip字体大小
        mTempPagerAdapter.setTextSize(1.5f);
    }

    /**控件监听**/
    private void setListener(){
        mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
                switch (position) {
                    case 0:
                        break;
                    case 1:
                        break;
                    case 2:
                        break;
                    default:
                        break;
                }
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
    }

    @Override
    public void onClick(View v) {

    }

}

接着贴出TempActivity对应布局activity_temp.xml代码:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
    android:background="@color/white">

   <androidx.viewpager.widget.ViewPager
       android:id="@+id/viewPager"
       android:layout_width="0dp"
       android:layout_height="0dp"
       app:layout_constraintTop_toTopOf="parent"
       app:layout_constraintStart_toStartOf="parent"
       app:layout_constraintEnd_toEndOf="parent"
       app:layout_constraintBottom_toBottomOf="parent">

       <androidx.viewpager.widget.PagerTabStrip
           android:id="@+id/pagertab"
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:layout_gravity="top"
           android:paddingLeft="5dp"
           android:paddingRight="5dp"
           android:background="@color/green"/>

   </androidx.viewpager.widget.ViewPager>

</androidx.constraintlayout.widget.ConstraintLayout>

四. 效果图和项目结构图

1.gif
2.gif
项目结构图.png

五. PagerTabStrip属性方法

5.1 布局

PagerTabStrip在布局中一般放放到ViewPager内部，如下：