android tab选项卡使用及踩坑

目标效果
在这里插入图片描述
选中时改变背景颜色及设置圆角、设置字体变粗、设置字体大小

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tl"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/white"
        app:tabSelectedTextColor="#1876FF"
        app:tabTextColor="@color/tv_gray_888888"
        app:tabIndicatorFullWidth="false"
        app:tabIndicatorColor="#1876FF"
        app:tabIndicatorHeight="4dp"
        app:tabIndicator="@drawable/bg_news_tab">
        <!--
		app:tabIndicatorColor控制每一个tab的下划线颜色
		app:tabIndicator控制下划线的样式(这里drawable的颜色属性是无效的,以tabIndicatorColor为准)
		app:tabIndicatorHeight控制下划线高度
		app:tabIndicatorFullWidth控制下划线是跟随tab文字宽度,还是铺满
		app:tabIndicatorHeight设置为0dp时可以隐藏下划线
		-->

动态添加两个tab

        tabLayout=findViewById(R.id.tl);
        TabLayout.Tab tab=tabLayout.newTab();
        tab.setText("1");
        tabLayout.addTab(tab);
        TabLayout.Tab tab1=tabLayout.newTab();
        tab1.setText("2");
        tabLayout.addTab(tab1);

添加tab时必须通过

TabLayout.Tab tab=tabLayout.newTab();

创建,如果自己new Tab()的话,会抛出异常Caused by: java.lang.NullPointerException: Attempt to invoke virtual method 'void com.google.android.material.tabs.TabLayout$TabView.setContentDescription(java.lang.CharSequence)' on a null object reference

效果演示
在这里插入图片描述
修改选中项的背景和字体颜色,字体加粗的话,不需要自定义,通过代码可以直接设置(圆角背景需要自己准备drawable,如果不需要圆角的话,直接setBackgroundColor即可)

        tabLayout.addOnTabSelectedListener(new TabLayout.BaseOnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                /*
                * 点击设置过tab的背景后,设置tab的tag为"1"
                * */
                if (tab.getTag()==null||!((String)tab.getTag()).equals("1")){
                	//系统提供的tab被嵌套了一层放在tablayout中,这里获得放tab的ViewGroup
                    ViewGroup viewGroup=(ViewGroup) tabLayout.getChildAt(0);
                    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
                        viewGroup.getChildAt(tab.getPosition()).setBackground(getDrawable(R.drawable.tab_car_repair_top_10dp));
                    }else {
                        viewGroup.getChildAt(tab.getPosition()).setBackground(getResources().getDrawable(R.drawable.tab_car_repair_top_10dp));
                    }
                    tab.setTag("1");
                }else {
                    ViewGroup viewGroup=(ViewGroup) tabLayout.getChildAt(0);
                    viewGroup.getChildAt(tab.getPosition()).getBackground().setAlpha(255);
                }
                //通过富文本来修改文字的加粗和颜色
                String s = tab.getText().toString().trim();
                SpannableString spannableString = new SpannableString(s);
                StyleSpan styleSpan = new StyleSpan(Typeface.BOLD);
                spannableString.setSpan(styleSpan, 0, s.length(), SpannableString.SPAN_INCLUSIVE_EXCLUSIVE);
                spannableString.setSpan(new ForegroundColorSpan(Color.parseColor("#1876FF")),0, s.length(), SpannableString.SPAN_INCLUSIVE_EXCLUSIVE);
                tab.setText(spannableString);
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {
                ViewGroup viewGroup=(ViewGroup) tabLayout.getChildAt(0);
                viewGroup.getChildAt(tab.getPosition()).getBackground().setAlpha(0);
                String s = tab.getText().toString().trim();
                SpannableString spannableString = new SpannableString(s);
                StyleSpan styleSpan = new StyleSpan(Typeface.NORMAL);
                spannableString.setSpan(styleSpan, 0, s.length(), SpannableString.SPAN_INCLUSIVE_EXCLUSIVE);
                spannableString.setSpan(new ForegroundColorSpan(Color.parseColor("#1876FF")),0, s.length(), SpannableString.SPAN_INCLUSIVE_EXCLUSIVE);
                tab.setText(spannableString);
            }

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

            }
        });

这样就实现了目标效果除字体大小之外的要求了,但是想要修改字体大小,只能舍弃上面这些代码,通过tab的CustomView来实现这些功能

准备一个布局文件
tab_car_repair_top_10dp.xml

<?xml version="1.0" encoding="utf-8"?>
<TextView
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/tv"
        android:textSize="16sp"
        android:textColor="#1876FF"
        android:gravity="center"
        android:layout_gravity="center"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

设置customView

        TabLayout.Tab tab=tabLayout.newTab();
        tab.setCustomView(R.layout.tab_car_repair);
        View view=tab.getCustomView();
        TextView tvTab=view.findViewById(R.id.tv);
        tvTab.setText("车辆维修服务");
        tabLayout.addTab(tab);

看一下效果,tab的背景留空了一块
在这里插入图片描述
发现TabLayout中有tabPadding,估计是和button一样设置了默认的padding导致的了

                    android:padding="0dp"
                    app:tabPadding="0dp"

结果设置了tabPadding之后,还是这个样子,最后发现要设置tabPaddingStart和tabPaddingEnd才有效果,谷歌留的大坑啊!

©️2020 CSDN 皮肤主题: 1024 设计师:上身试试 返回首页