先附上效果圖

第一步：書寫佈局

我的佈局檔案是這樣的

<?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"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
    <android.support.v4.view.ViewPager
 
android:id="@+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="9">
    </android.support.v4.view.ViewPager>
    <android.support.design.widget.TabLayout
android:id="@+id/tab_layout"
android:layout_width="match_parent"
android:layout_height=
 
"match_parent"
android:layout_gravity="fill_horizontal|center_horizontal"
android:background="@color/colorPrimary"
app:tabTextColor="@color/tabTextColor"
android:layout_weight="1">
    </android.support.design.widget.TabLayout>
</LinearLayout>

第二步：自定義fragment介面卡

package com.example.wf.study;
 
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import java.util.ArrayList;
import java.util.List;
/**
 * Created by WF on 2018/6/29.
 */
public class MyFragmentAdapter extends FragmentPagerAdapter {
    private List<Fragment> mFragmentList;
    public void setFragments(ArrayList<Fragment> fragments) {
        mFragmentList = fragments;
}

    public MyFragmentAdapter(FragmentManager fm) {
        super(fm);
}

    @Override
public Fragment getItem(int position) {
        Fragment fragment = mFragmentList.get(position);
        return fragment;
}

    @Override
public int getCount() {
        return mFragmentList.size();
}

    @Override
public CharSequence getPageTitle(int position) {
        return super.getPageTitle(position);
}
}

第三步：書寫activity

package com.example.wf.study;
import android.content.res.ColorStateList;
import android.graphics.Typeface;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;
import com.example.wf.study.fragment.FourFragment;
import com.example.wf.study.fragment.OneFragment;
import com.example.wf.study.fragment.ThreeFragment;
import com.example.wf.study.fragment.TwoFragment;
import java.util.ArrayList;
public class TabLayoutActivity extends AppCompatActivity {
    private TabLayout tabLayout;
    private ViewPager viewPager;
String[] tabName = {"&#xe633", "大廳", "任務", "我的"};
    int[] tab_img = {R.drawable.head4, R.drawable.head2, R.drawable.e4well, R.drawable.cat, R.drawable.head1};
@Override
protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
setContentView(R.layout.activity_tab_layout);
tabLayout = findViewById(R.id.tab_layout);
viewPager = findViewById(R.id.view_pager);
Typeface iconfont = Typeface.createFromAsset(getAssets(), "fonts/iconfont.ttf");
// 建立一個集合,裝填Fragment
ArrayList<Fragment> fragments = new ArrayList<>();
// 裝填
fragments.add(new OneFragment());
fragments.add(new TwoFragment());
fragments.add(new ThreeFragment());
fragments.add(new FourFragment());
// 建立ViewPager介面卡
MyFragmentAdapter myPagerAdapter = new MyFragmentAdapter(getSupportFragmentManager());
myPagerAdapter.setFragments(fragments);
// 給ViewPager設定介面卡
viewPager.setAdapter(myPagerAdapter);
// 使用 TabLayout 和 ViewPager 相關聯
tabLayout.setupWithViewPager(viewPager);
// TabLayout 指示器 (記得自己手動建立4個Fragment,注意是 app包下的Fragment 還是 V4包下的 Fragment)
tabLayout.setTabTextColors(ColorStateList);
tabLayout.getTabAt(0).setText("主頁").setIcon(tab_img[0]);
tabLayout.getTabAt(1).setText("大廳").setIcon(tab_img[0]);
tabLayout.getTabAt(2).setText("任務").setIcon(tab_img[0]);
tabLayout.getTabAt(3).setText("我的").setIcon(tab_img[0]);
        for (int i = 0; i < 4; i++) {
            setTabItem(i);
}
    }}

注：這裡我在將tabLayout與viewPager進行繫結後，直接使用getTabAt()方法獲取一個tab,但是我並沒有使用addTab()方法來新增過任何一個tab,那為什麼能夠拿到tab呢？

原因如下：檢視TabLayout原始碼發現這樣一個方法

void populateFromPagerAdapter() {
    removeAllTabs();
    if (mPagerAdapter != null) {
        final int adapterCount = mPagerAdapter.getCount();
        for (int i = 0; i < adapterCount; i++) {
            addTab(newTab().setText(mPagerAdapter.getPageTitle(i)), false);
}

        // Make sure we reflect the currently set ViewPager item
if (mViewPager != null && adapterCount > 0) {
            final int curItem = mViewPager.getCurrentItem();
            if (curItem != getSelectedTabPosition() && curItem < getTabCount()) {
                selectTab(getTabAt(curItem));
}
        }
    }
}

二、通過自定義佈局檔案自定義tab樣式

1、自定義一個tab_item.xml檔案

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical">
    <ImageView
android:id="@+id/tab_img"
android:layout_width="24dp"
android:layout_height="24dp"
android:contentDescription="@string/app_name"
android:scaleType="fitXY"
android:src="@drawable/selector_tab_image" />
    <TextView
android:id="@+id/tab_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="兒童"
android:textColor="@drawable/selector_tab_text" />
</LinearLayout>

這是tab的通用樣式，可以通過改變圖片和文字來達到顯示不同的效果

2、通過activity來配置顯示效果

package com.example.wf.study;
import android.content.res.ColorStateList;
import android.graphics.Typeface;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;
import com.example.wf.study.fragment.FourFragment;
import com.example.wf.study.fragment.OneFragment;
import com.example.wf.study.fragment.ThreeFragment;
import com.example.wf.study.fragment.TwoFragment;
import java.util.ArrayList;
public class TabLayoutActivity extends AppCompatActivity {
    private TabLayout tabLayout;
    private ViewPager viewPager;
String[] tabName = {"主頁", "大廳", "任務", "我的"};
    int[] tab_img = {R.drawable.head4, R.drawable.head2, R.drawable.e4well, R.drawable.cat, R.drawable.head1};
@Override
protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
setContentView(R.layout.activity_tab_layout);
tabLayout = findViewById(R.id.tab_layout);
viewPager = findViewById(R.id.view_pager);
Typeface iconfont = Typeface.createFromAsset(getAssets(), "fonts/iconfont.ttf");
// 建立一個集合,裝填Fragment
ArrayList<Fragment> fragments = new ArrayList<>();
// 裝填
fragments.add(new OneFragment());
fragments.add(new TwoFragment());
fragments.add(new ThreeFragment());
fragments.add(new FourFragment());
// 建立ViewPager介面卡
MyFragmentAdapter myPagerAdapter = new MyFragmentAdapter(getSupportFragmentManager());
myPagerAdapter.setFragments(fragments);
// 給ViewPager設定介面卡
viewPager.setAdapter(myPagerAdapter);
// 使用 TabLayout 和 ViewPager 相關聯
tabLayout.setupWithViewPager(viewPager);
        for (int i = 0; i < 4; i++) {
            setTabItem(i);
}

    }

    public void setTabItem(int position) {
        View view = LayoutInflater.from(this).inflate(R.layout.tab_item, null);
TextView textView = (TextView) view.findViewById(R.id.tab_name);
textView.setText(tabName[position]);
ImageView imageView=(ImageView)view.findViewById(R.id.tab_img);
imageView.setImageResource(tab_img[position]);
tabLayout.getTabAt(position).setCustomView(view);
}
}

這裡通過獲取到tab_item佈局檔案的view物件，通過該物件獲取我們定義的ImageView和TextView並設定相關屬性，最後通過setCustomView()方法將view傳給tab顯示。