底部导航TabLayout拉近图标与文字的距离

在使用TabLayout的时候，对于导航内容的图标和文字设置，通常如下：

tabLayout = (TabLayout) findViewById(R.id.tab);
tabLayout.addTab(tabLayout.newTab().setText("关注").setIcon(R.drawable.ic_home_white_24dp));
tabLayout.addTab(tabLayout.newTab().setText("发现").setIcon(R.drawable.ic_data_usage_white_24dp));
tabLayout.addTab(tabLayout.newTab().setText("个人").setIcon(R.drawable.ic_person_white_24dp));

展示效果如下：

image

然后就会发现图标与文字之间的距离过大，导致导航高度过长，看得实在是不太顺眼 = =。如何调近它们之间的距离呢？这里介绍一个很简单的方法。
首先重写一个图标+文字的布局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文件里添加如下函数：

// 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;
    }

然后进行调用：

tabLayout = (TabLayout) findViewById(R.id.tab);
tabLayout.addTab(tabLayout.newTab().setText("关注").setIcon(R.drawable.ic_home_white_24dp));
tabLayout.addTab(tabLayout.newTab().setText("发现").setIcon(R.drawable.ic_data_usage_white_24dp));
tabLayout.addTab(tabLayout.newTab().setText("个人").setIcon(R.drawable.ic_person_white_24dp));
// 修改样式，主要是调近了图标与文字之间的距离
tabLayout.getTabAt(0).setCustomView(getTabView("关注",R.drawable.ic_home_white_24dp));
tabLayout.getTabAt(1).setCustomView(getTabView("发现",R.drawable.ic_data_usage_white_24dp));
tabLayout.getTabAt(2).setCustomView(getTabView("个人",R.drawable.ic_person_white_24dp));

可以在布局文件里将TabLayout控件的高度调小，最终效果如下，感觉是不是顺眼多了？

image

对了，使用这个方法的话，要顺便再修改一下移动Tab时对应的监听事件，大致如下：

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("关注")) {
            img_title.setImageResource(R.drawable.ic_home_green_24dp);
        } else if (txt_title.getText().toString().equals("发现")) {
            img_title.setImageResource(R.drawable.ic_data_usage_green_24dp);
        }  else if (txt_title.getText().toString().equals("个人")) {
            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("关注")) {
            img_title.setImageResource(R.drawable.ic_home_white_24dp);
        } else if (txt_title.getText().toString().equals("发现")) {
            img_title.setImageResource(R.drawable.ic_data_usage_white_24dp);
        }  else if (txt_title.getText().toString().equals("个人")) {
            img_title.setImageResource(R.drawable.ic_person_white_24dp);
        }
    }

好了,到这就结束了,别忘记点赞哦!