TabLayout简单使用及修改文字图片间距(自定义布局)

首先引入库

implementation 'com.android.support:design:27.1.1'

然后在XML文件加入

<android.support.design.widget.TabLayout
    android:layout_width="match_parent"
    android:layout_height="@dimen/dp_56"
    android:id="@+id/main_tablayout"
    app:tabTextColor="@color/noselect_bottom_text_color" //文字默认颜色
    app:tabSelectedTextColor="@color/select_bottom_text_color" //文字选中颜色
    app:tabMode="fixed" //是否固定Tab(固定则Tab不可滑动)
    android:background="#fff" 
    app:tabIndicatorHeight="0dp" //指示器的高度
    app:tabIndicatorColor="@color/transparent" //指示器的颜色
    >
</android.support.design.widget.TabLayout>
由于设计稿不需要指示器所以高度设置为0了，颜色设置透明

Activity中使用

初始化TabLayout
TabLayout main_tablayout=findViewById(R.id.main_tablayout);
main_tablayout.addTab(main_tablayout.newTab().setText("客户管理").setIcon(R.drawable.selector_tab_xinwen));
main_tablayout.addTab(main_tablayout.newTab().setText("公司管理").setIcon(R.drawable.selector_tab_geren));
main_tablayout.addTab(main_tablayout.newTab().setText("业务管理").setIcon(R.drawable.selector_tab_shezhi))；
main_tablayout.addTab(main_tablayout.newTab().setText("关于我的").setIcon(R.drawable.selector_tab_wode))；//setIcon设置图标如果不需要可以不设置(如果需要选中状态，可以设置成背景选择器drawable.xml文件).

设置监听

        main_tablayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                switch (tab.getText().toString()){//这里我用的text去区分，你也可以用tab.getPosition()去区分
                    case "客户管理":
                        if(oldCheckNumber!=0){
                            checkNumber(0);//checkNumber就是fragment的切换逻辑请自行处理
                        }
                        break;
                    case "公司管理":
                        if(oldCheckNumber!=1){
                            checkNumber(1);
                        }
                        break;
                    case "业务管理":
                        if(oldCheckNumber!=2){
                            checkNumber(2);
                        }
                        break;
                    case "关于我的":
                        if(oldCheckNumber!=3){
                            checkNumber(3);
                        }
                        break;
                }
            }

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

            }

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

            }
        });

以上就是TabLayout的简单用法，运行就可以看到效果。

如果你的Tab是带图片的那么就会发现，文字与图片的间距偏大，查看TabLayout源码可以看到，里面有个常量

static final int DEFAULT_GAP_TEXT_ICON = 8; // dps

这个就是间距的值，遗憾的是没有办法通过外部修改。

解决方案用自定义view

首先自定义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:textColor="@color/select_text_color"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/dp_5"
        android:textSize="@dimen/dp_11"
        />
</LinearLayout>
你要修改图片与文字间距就修改TextView的marginTop的值即可
然后Activity中添加方法
// Tab自定义view
public View getTabView(String title, int image_src) {
    View v = LayoutInflater.from(getApplicationContext()).inflate(R.layout.tab_item_view, null);
    TextView textView = v.findViewById(R.id.textview);
    textView.setText(title);
    ImageView imageView =v.findViewById(R.id.imageview);
    imageView.setImageResource(image_src);
    v.setTag(title);//因为我用tag去区分点击的item，如果你用的tab.getPosition可以不设置这个值
    return v;
}
然后修改Tab初始化方法
main_tablayout.addTab(main_tablayout.newTab().setText(""));//addTab这里由于只是用来占位效果，所以可以不设置值跟图标
main_tablayout.addTab(main_tablayout.newTab().setText(""));
main_tablayout.addTab(main_tablayout.newTab().setText(""));
main_tablayout.addTab(main_tablayout.newTab().setText(""));
main_tablayout.getTabAt(0).setCustomView(getTabView("客户管理",R.drawable.selector_tab_kehugl));
main_tablayout.getTabAt(1).setCustomView(getTabView("公司管理",R.drawable.selector_tab_gsgl));
main_tablayout.getTabAt(2).setCustomView(getTabView("业务管理",R.drawable.selector_tab_ywgl));
main_tablayout.getTabAt(3).setCustomView(getTabView("关于我的",R.drawable.selector_tab_wode));

修改监听方法
main_tablayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
    @Override
    public void onTabSelected(TabLayout.Tab tab) {
        switch (tab.getCustomView().getTag().toString()){//这里我用的子View的tag去区分，也可以用tab.getPosition()区分
            case "客户管理":
                if(oldCheckNumber!=0){
                    checkNumber(0);
                }
                break;
            case "公司管理":
                if(oldCheckNumber!=1){
                    checkNumber(1);
                }
                break;
            case "业务管理":
                if(oldCheckNumber!=2){
                    checkNumber(2);
                }
                break;
            case "关于我的":
                if(oldCheckNumber!=3){
                    checkNumber(3);
                }
                break;
        }
    }

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

    }

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

    }
});

今天刚好使用了，就在这里记录。