资料

• Android原生TabLayout使用全解析，看这篇就够了

简介

• TabLayout：一个横向可滑动的菜单导航ui组件
• Tab：TabLayout中的item，可以通过newTab()创建
• TabView：Tab的实例，是一个包含ImageView和TextView的线性布局
• TabItem：一种特殊的“视图”，在TabLayout中可以显式声明Tab

简单使用

• 依赖

    api 'com.google.android.material:material:1.5.0'

• xml静态写法
• TabLayout和每个Item都在xml中定义好;这种是在你能确定有多少个item的时候使用.

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tab_pic"
        android:layout_width="match_parent"
        android:layout_height="44dp"
        app:layout_constraintTop_toTopOf="parent">

        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="全部" />

        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="未上传" />

        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="已上传" />

        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="上传中" />
    </com.google.android.material.tabs.TabLayout>

• 设置字体是通过设置TabLayout的tabTextAppearance属性，传入一个style样式

   <com.google.android.material.tabs.TabLayout
        android:id="@+id/tab_pic"
        android:layout_width="match_parent"
        android:layout_height="44dp"
        app:tabTextAppearance="@style/pic_manager_layout_style"
        app:layout_constraintTop_toTopOf="parent">

  //但是下面不是所有属性都能起作用，设置宽度和行数就没用，只有字体，粗体有用
     <!--TabLayout文字样式-->
    <style name="pic_manager_layout_style">
        <item name="android:textSize">12sp</item>
        <item name="android:textStyle">bold</item>
        <item name="maxLines">1</item>
        <item name="singleLine">true</item>
        <item name="android:ellipsize">end</item>
    </style>

• 设置图标,大多数时候图标和文字都是二选其一。

        //添加图标
        //其实TabLayout的item就是一个ImageView和TextView上下组合而成的。
        tableLayout.getTabAt(0).setIcon(R.mipmap.ic_launcher);

• 去掉长按提示

//去掉长按提示
        tableLayout.setLongClickable(false);

• 去掉下划线,因为方法过时了，所以直接设置自己定义的下划线，不想要就定义一个空的就好了.

        //去掉下划线
        //这个方法过时了，它推荐使用下面的方法代替
        tableLayout.setSelectedTabIndicatorHeight(0);
        tableLayout.setSelectedTabIndicator(null);

• 自定义下划线样式
• 先自定义drawable样式

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:width="20dp"
        android:height="5dp"
        android:gravity="center">
        <shape>
            <corners android:radius="2dp"/>
            <solid android:color="@color/purple_200"/>
        </shape>
    </item>
</layer-list>

图片.png

• xml中设置

        app:tabIndicator="@drawable/pic_manager_layout_underline"

图片.png

• 下划线的宽度
• 共通过下面的代码控制是否占满。但是设置了下划线样式后这个属性无效。

        app:tabIndicatorFullWidth="false"

• 文字颜色,下面两个属性分别设置选择时的颜色和常态颜色

        app:tabSelectedTextColor="@color/purple_200"
        app:tabTextColor="@color/teal_700"

• 下划线颜色，听过样式设置的颜色无效,需要通过下面的属性设置

        app:tabIndicatorColor="@color/teal_200"

今天到这里了，今天解决bug搞了太久了，看这个的时间就不够了，而且bug还没解决。5555我太难了。

Tab添加小红点

• 这个功能一般也就首页分类用的比较多把，一般是提醒来消息了或者未处理的任务啥的。

    /**
     * 设置消息红点
     */
    private void setRedPoints(){
        TabLayout.Tab item = tableLayout.getTabAt(0);
        BadgeDrawable drawable = item.getOrCreateBadge();
        if (drawable == null) drawable = BadgeDrawable.create(this);
        drawable.setBackgroundColor(Color.RED);//背景颜色
        drawable.setMaxCharacterCount(3);//消息最大长度
        drawable.setNumber(28);//消息数量
        drawable.setBadgeTextColor(Color.WHITE);//消息文字颜色
    }
    /**
     * 设置消息红点
     */
    private void setRedPoints2(){
        TabLayout.Tab item = tableLayout.getTabAt(1);
        BadgeDrawable drawable = item.getOrCreateBadge();
        if (drawable == null) drawable = BadgeDrawable.create(this);
        drawable.setBackgroundColor(Color.BLUE);
    }

消息红点.png

贴一下主要的属性

主要属性

• tabSelectedTextColor，改变选中字体的颜色
• tabTextColor，未选中字体的颜色
• tabTextAppearance，字体大小
• tabIndicatorColor，指示器下标的颜色
• tabIndicatorHeight，指示器下标的高度
• tabGravity，内容显示方式center(内容居中显示)和fill(内容尽可能充满) 其实还有一个start，但是用起来感觉和center没什么区别.
• tabMode，tab选项卡的行为模式,fixed(tab固定)和scrollable(tab可滑动)
• tabBackground，背景
• tabContentStart，相对起始位置tab的Y轴偏移量
• tabPadding，tab的内边距
• tabPaddingStart，tab的左侧内边距
• tabPaddingEnd，tab的右侧内边距
• tabPaddingTop，tab的顶部内边距
• tabPaddingBottom，tab的底部内边距
• tabMaxWidth，tab选项卡的最大宽度
• tabMinWidth，tab选项卡的最小宽度

TabLayout主要方法

• addTab(Tab)，向此布局添加选项卡
• addView(View)，添加子视图
• addOnTabSelectedListener(OnTabSelectedListener)，添加监听器
• newTab()，创建一个新的tab
• setTabTextColors(int, int)，设置用于选项卡的不同状态的文本颜色
• setSelectedTabIndicatorColor(int)，设置选中的tab的指示器颜色
• setSelectedTabIndicatorHeight(int)，设置选中的tab的指示器的高度
• setTabGravity(int)，设置TabLayout的布局方式
• setTabMode(int)，设置tab选项卡的行为模式
• setupWithViewPager(ViewPager, boolean)，将TabLayout与ViewPager绑定在一起