Android 用 TabLayout + ViewPager + Fragment 实现顶部、底部导航栏

       这是我们 Material Design 系列的第四篇分享了，对 Material Design 还不是太清楚的可以先看前几篇博文大概的了解一下，今天我们主要通过实现顶部和底部导航栏的功能来了解又一个 Material Design 的控件 TabLayout 的使用，在移动应用开发中，由于屏膜大小的限制，使得顶部、底部 Tab 导航栏的使用非常的广泛，相信大家在实际开发过程中也是经常遇到，以前可以通过 RadioGroup，FragmentTabHost 以及后来的 Bottom Navigation 等方法来实现，现在我们可以使用 Design Support library 库的 TabLayout 来实现了

一、底部导航栏

我们先上效果图吧

      上面就是我们的效果图，接下来我们来通过代码一步步实现上面的效果，这里我使用了一点 DataBinding 的知识，如果对 DataBinding 还没有一点了解的可以去看我以前的博文简单的了解一下(这里强烈的建议大家一定去了解一下 DataBinding 相关的知识)，好了开始代码演绎吧

Android DataBinding 详解

1.首先我们先来创建所需要的 Fragement 以及相对应的布局文件，这里我们拿首页 HomeFragment 来做示例：

首先创建 fragment_home.xml 布局文件如下：

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:orientation="vertical">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="首页"
            android:textSize="40sp" />

    </LinearLayout>
</layout>

       这里非常简单，一个线性布局里面放一个 TextView，想必大家一看就明白，只是要注意最外层布局是 <layout> 标签，这就是刚才提到的 DataBinding 需要的，和我们平时的布局不太一样的一点

接下来创建 HomeFragment 类:

package com.example.qiudengjiao.tablayout.Module.home;

import android.databinding.DataBindingUtil;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import com.example.qiudengjiao.tablayout.Base.BaseFragment;
import com.example.qiudengjiao.tablayout.R;
import com.example.qiudengjiao.tablayout.databinding.FragmentHomeBinding;

/**
 * 主界面 - 首页Fragment
 * Created by qiudengjiao on 2017/5/6.
 */

public class HomeFragment extends BaseFragment {
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {

        FragmentHomeBinding binding = DataBindingUtil.inflate(inflater, R.layout.fragment_home, container, false);
        
        return binding.getRoot();
    }
}

         我们来简单看一下上面的这段代码，和我们平时写的其实差不太多，使用 DataBindingUtil 调用 inflate() 方法来加载我们刚写好的布局，返回一个 FramentHomeBinding 对象，这个对象是自动生成的，这个对象的生成和布局文件的名字是有关系的，生成规则就是布局文件的名字加 Binding，更详细的大家可以去看我关于 DataBinding 的博文，这里不再展开详细描述，再就是  return binding.getRoot()，这句代码就是返回上面绑定的布局文件，到这里我们的首页 HomeFragment 就创建完成了，剩下了热卖、购物车、分类、我的依次类推，我们一一创建完成，这里不再描述，如下：

       这样我们所需要的所有 Fragment 就全部创建完成，需要多少个 Tab 就创建多少个相对应的 Fragment，这个大家根据自己的项目来定

接下来我们来创建主布局文件 activity_main.xml 代码如下：