Android——使用TabLayout+ViewPager实现顶部导航栏

使用TabLayout+ViewPager的方式，实现顶部导航栏切换的效果，效果如下图。

实现的主要有以下几点：

1. 在activity的xml文件中加入 TabLayout 和 ViewPager；
2. 创建fragment和fragmentactivity/appcompatactivity；
3. 自定义一个类继承自FragmentPagerAdapter，里面重写getPageTitle，getCount，getItemPosition，instantiateItem，getItem方法；
4. 在activity中将tablayout、viewpager、adapter绑定。

代码:

xml文件：

    <android.support.design.widget.TabLayout
        android:id="@+id/tab_layout_msg"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/color_white"
        app:tabIndicatorColor="@color/colorTheme"
        app:tabIndicatorHeight="4dp"
        app:tabMode="fixed"
        app:tabSelectedTextColor="@color/colorTheme"
        app:tabTextColor="@color/color_333333" />

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

activity：

private TabLayout mTabLayout;
private ViewPager mViewPager;
private MessageFragmentAdapter myFragmentPagerAdapter;
private String[] tabs = {"全部", "应用提醒", "城市推送", "系统通知"};

@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_message_list);
    showContentView();
    initView();
}

@Override
protected void getData() {
    super.getData();
    showContentView();
}

private void initView() {
    mTabLayout = bindingView.tabLayoutMsg;
    mViewPager = bindingView.viewPagerMsg;
    myFragmentPagerAdapter = new MessageFragmentAdapter(getSupportFragmentManager(), tabs);
    mViewPager.setAdapter(myFragmentPagerAdapter);
    mTabLayout.setupWithViewPager(mViewPager);
}

fragmentadapter文件：

public class MessageFragmentAdapter extends FragmentPagerAdapter {

private String[] mTitles;

public MessageFragmentAdapter(FragmentManager fm, String[] tabs) {
    super(fm);
    mTitles = tabs;
}

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

@Override
public Object instantiateItem(ViewGroup container, int position) {
    MessageFragment fragment = (MessageFragment) super.instantiateItem(container, position);
    fragment.updateArguments(position);
    return fragment;
}

@Override
public int getItemPosition(Object object) {
    return PagerAdapter.POSITION_NONE;
}

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

//用来设置tab的标题
@Override
public CharSequence getPageTitle(int position) {
    return mTitles[position];
}}

fragment文件：

public class MessageFragment extends MvvmBaseFragment<FragmentMessageBinding> {

private int mType;
private final int MESSAGE_TYPE_ALL = 0;
private final int MESSAGE_TYPE_APP = 1;
private final int MESSAGE_TYPE_PUSH = 2;
private final int MESSAGE_TYPE_SYSTOM = 3;

private List<MessageBean.DataBean.MsgsBean> msgBeans = new ArrayList<>();
private MessageItemAdapter adapter;

@Override
public int setContent() {
    return R.layout.fragment_message;
}

@Override
protected void getData() {
    super.getData();
    showContentView();
}

@Override
public void onResume() {
    super.onResume();
    if (msgBeans.isEmpty()) {
        //查询最新数据
        getLatestMessageList(mType);
    }
}


@Override
public void onActivityCreated(@Nullable Bundle savedInstanceState) {
    super.onActivityCreated(savedInstanceState);
    adapter = new MessageItemAdapter(msgBeans, getContext());
    bindingView.rvMessageList.setAdapter(adapter);
    bindingView.rvMessageList.setLayoutManager(new LinearLayoutManager(getContext()));
}

private void getLatestMessageList(int type) {
    //TODO 四种消息类型，type不同，发送网络请求
    msgBeans.add(new MessageBean.DataBean.MsgsBean(
            "https://blog.csdn.net/NNadn/article/details/89211845",
            "CXTX",
            "申请事项：********************\n预约时间：2019-01-11 上午9:00-12:00",
            "预约成功！",
            "1078130680573059074",
            "09:20"));

    msgBeans.add(new MessageBean.DataBean.MsgsBean(
            "",
            "CXTX",
            "过年期间，请注意防火防盗，不要燃放烟花爆竹，不要往人员密集的地方跑。",
            "安全通知",
            "1078130680573059074",
            "昨天09:20"));

    msgBeans.add(new MessageBean.DataBean.MsgsBean(
            "",
            "CXTX",
            "恭喜！您的实名认证已经通过。",
            "实名认证",
            "1078130680573059074",
            "昨天09:20"));
    adapter.notifyDataSetChanged();
}

//从adapter中拿到type
public static MessageFragment newInstance(int type) {
    MessageFragment f = new MessageFragment();
    Bundle b = new Bundle();
    b.putInt("type", type);
    f.setArguments(b);
    return f;
}

@Override
public void onAttach(Context context) {
    super.onAttach(context);
    Bundle arguments = getArguments();
    if (arguments != null) {
        //当前页面消息类型
        mType = arguments.getInt("type", 0);
    }
}

//更新type
public void updateArguments(int pageType) {
    this.mType = pageType;
    Bundle args = getArguments();
    if (args != null) {
        args.putInt("type", pageType);
    }
}}

其中fragment中的newInstance、onAttach、updateArguments方法是因为我用的是4个相同的fragment，但是需要在页面请求上做不同的操作。我在fragmentadapter中实例化fragment的时候，将type传入，这样getmessage方法里直接根据传入的type方法就可以区别处理了。