Android底部导航栏标签切换: ToolBar+TabLayout+ViewPager+Fragment

摘要：本文主要讲解Android中常见的导航栏/标签栏的实现，仅供交流学习。

---

1 效果与分析

效果图如下，一般的手机应用首页就是这种样式，包括手机淘宝、QQ、微信。

下面是新版QQ的界面，底部的导航栏实现的是切换Fragment效果，四个标签选项卡。“看点”就是从前的“QQ看点”，这个选项有点特殊，里面内嵌了顶部导航栏，而且数据刷新实现了“懒加载”的效果，也就是我不点击，它就不会更新推送，但只要我切换到这个选项就会自动加载新的推送内容，这就是关于ViewPager+Fragment的一点妙用。懒加载会在 分析模仿QQ看点 的博文中详细讲解。

部分控件作用

1. TabLayout：标签布局，用于新建导航栏。
2. ViewPager：视图翻页容器，将多个View放在同一个ViewPager，通过左右滑动实现翻页效果。Google推荐使用Fragment+ViewPager的组合，更便于管理生命周期。
3. Fragment：碎片，可以理解为需要依赖于Activity存在的小型Activity，有自己的生命周期。
4. ToolBar：工具栏，标题栏。
   想要详细了解这几个控件作用的朋友可以参考下面的文章：
   TabLayout属性
   ToolBar简单实用

2 实现

2.1 添加依赖

使用 TabLayout 需要先添加依赖implementation 'com.android.support:design:26.1.0'，ViewPager在v4包里，可以直接使用。

2.2 布局文件

将ToolBar、ViewPager和TabLayout 的位置分配好，新建activity_main.xml：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
    tools:context=".MainActivity">

    <android.support.v7.widget.Toolbar
        android:id="@+id/main_toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/colorPrimary">

        <TextView
            android:id="@+id/toolbar_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="标题"
            android:textColor="@android:color/white"
            android:textSize="18sp" />
        
    </android.support.v7.widget.Toolbar>


    <android.support.v4.view.ViewPager
        android:id="@+id/main_viewpager"
        android:layout_width