在使用TabLayout的時(shí)候，對(duì)于導(dǎo)航內(nèi)容的圖標(biāo)和文字設(shè)置，通常如下：

tabLayout = (TabLayout) findViewById(R.id.tab);
tabLayout.addTab(tabLayout.newTab().setText("關(guān)注").setIcon(R.drawable.ic_home_white_24dp));
tabLayout.addTab(tabLayout.newTab().setText("發(fā)現(xiàn)").setIcon(R.drawable.ic_data_usage_white_24dp));
tabLayout.addTab(tabLayout.newTab().setText("個(gè)人").setIcon(R.drawable.ic_person_white_24dp));

展示效果如下：

初始

然后就會(huì)發(fā)現(xiàn)圖標(biāo)與文字之間的距離過(guò)大，導(dǎo)致導(dǎo)航高度過(guò)長(zhǎng)，看得實(shí)在是不太順眼 = =。如何調(diào)近它們之間的距離呢？這里介紹一個(gè)很簡(jiǎn)單的方法。
首先重寫一個(gè)圖標(biāo)+文字的布局tab_item_view.xml，大致如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:gravity="center"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <ImageView
        android:id="@+id/imageview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <TextView
        android:id="@+id/textview"
        android:textSize="11dp"
        android:textColor="@color/colorBackground"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</LinearLayout>

接著在activity的Java文件里添加如下函數(shù)：

// Tab自定義view
    public View getTabView(String title, int image_src) {
        View v = LayoutInflater.from(getApplicationContext()).inflate(R.layout.tab_item_view, null);
        TextView textView = (TextView) v.findViewById(R.id.textview);
        textView.setText(title);
        ImageView imageView = (ImageView) v.findViewById(R.id.imageview);
        imageView.setImageResource(image_src);
        return v;
    }

然后進(jìn)行調(diào)用：

tabLayout = (TabLayout) findViewById(R.id.tab);
tabLayout.addTab(tabLayout.newTab().setText("關(guān)注").setIcon(R.drawable.ic_home_white_24dp));
tabLayout.addTab(tabLayout.newTab().setText("發(fā)現(xiàn)").setIcon(R.drawable.ic_data_usage_white_24dp));
tabLayout.addTab(tabLayout.newTab().setText("個(gè)人").setIcon(R.drawable.ic_person_white_24dp));
// 修改樣式，主要是調(diào)近了圖標(biāo)與文字之間的距離
tabLayout.getTabAt(0).setCustomView(getTabView("關(guān)注",R.drawable.ic_home_white_24dp));
tabLayout.getTabAt(1).setCustomView(getTabView("發(fā)現(xiàn)",R.drawable.ic_data_usage_white_24dp));
tabLayout.getTabAt(2).setCustomView(getTabView("個(gè)人",R.drawable.ic_person_white_24dp));

可以在布局文件里將TabLayout控件的高度調(diào)小，最終效果如下，感覺(jué)是不是順眼多了？

改良后的樣式

對(duì)了，使用這個(gè)方法的話，要順便再修改一下移動(dòng)Tab時(shí)對(duì)應(yīng)的監(jiān)聽事件，大致如下：

tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                viewPager.setCurrentItem(tab.getPosition());
                changeTabSelect(tab);
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {
                changeTabNormal(tab);
            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {

            }
});

// 切換顏色
    private void changeTabSelect(TabLayout.Tab tab) {
        View view = tab.getCustomView();
        ImageView img_title = (ImageView) view.findViewById(R.id.imageview);
        TextView txt_title = (TextView) view.findViewById(R.id.textview);
        txt_title.setTextColor(getResources().getColor(R.color.colorBase1));
        if (txt_title.getText().toString().equals("關(guān)注")) {
            img_title.setImageResource(R.drawable.ic_home_green_24dp);
        } else if (txt_title.getText().toString().equals("發(fā)現(xiàn)")) {
            img_title.setImageResource(R.drawable.ic_data_usage_green_24dp);
        }  else if (txt_title.getText().toString().equals("個(gè)人")) {
            img_title.setImageResource(R.drawable.ic_person_green_24dp);
        }
    }

    private void changeTabNormal(TabLayout.Tab tab) {
        View view = tab.getCustomView();
        ImageView img_title = (ImageView) view.findViewById(R.id.imageview);
        TextView txt_title = (TextView) view.findViewById(R.id.textview);
        txt_title.setTextColor(getResources().getColor(R.color.colorBackground));
        if (txt_title.getText().toString().equals("關(guān)注")) {
            img_title.setImageResource(R.drawable.ic_home_white_24dp);
        } else if (txt_title.getText().toString().equals("發(fā)現(xiàn)")) {
            img_title.setImageResource(R.drawable.ic_data_usage_white_24dp);
        }  else if (txt_title.getText().toString().equals("個(gè)人")) {
            img_title.setImageResource(R.drawable.ic_person_white_24dp);
        }
    }