Android TabLayout 实现底部导航栏和顶部导航栏

写在前面

做为一名刚入门的Android个人开发者，最近在学习如何实现一个简易的导航栏，下面是我的实现具体步骤（idea集成Android Studio)
先来看看效果吧

底部导航栏的实现方法及代码

一、 配置 build.gradle (添加如下代码)

implementation 'com.android.support:appcompat-v7:27.+'
implementation 'com.android.support:design:27.+'

我的build.gradle截图如下：

二、在values文件夹下新建arrays.xml文件，主要是存放导航栏标题资源，内容如下：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string-array name="tab_titles">
        <item>首页</item>
        <item>发现</item>
        <item>分类</item>
        <item>购物车</item>
        <item>我的</item>
    </string-array>
</resources>

三、values文件夹下的colors.xml增加导航栏背景颜色，内容如下：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#008577</color>
    <color name="colorPrimaryDark">#00574B</color>
    <color name="colorAccent">#D81B60</color>
    <color name="tab_background">#ff9</color>
</resources>

四、values文件夹下的styles.xml增减导航栏样式，代码如下：

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

    <style name="MyCustomTabLayout" parent="Widget.Design.TabLayout">
        <item name="tabIndicatorColor">?attr/colorAccent</item>
        <item name="tabIndicatorHeight">1dp</item>
        <item name="tabTextColor">#6b7984</item>
        <item name="tabSelectedTextColor">#f7554a</item>
    </style>
</resources>

五、新建五个Fragment,并会生成对应的xml布局文件，下面展示其中的一个Fragment及其对应的xml布局文件，其他类似（偷点懒，布局只有简单的textVIew)

BlankFragment1代码如下，并没有特殊的功能代码

package com.example.test_tablayout;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup