Android TabLayout中如何为选中的TabItem自定义背景？

Question

我正在尝试将选项卡布局实现为以下设计-

我可以这样设计-

有人可以帮助我实现以下几点吗？

1. 选择选项卡时，背景应填充选项卡的第一半或第二半。
2. 对于选定的选项卡项目，背景有一个小边距。它不应完全填满选项卡。

代码： MainActivity.xml

        <com.google.android.material.tabs.TabLayout
            android:id="@+id/tab"
            android:layout_width="440sp"
            android:layout_height="64sp"
            android:layout_marginTop="100dp"
            android:layout_marginBottom="101dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            android:background="@drawable/backGroundWithWhiteBorder"
            style="@style/customTabLayout"
            app:tabBackground="@drawable/tab_color_selector" />

tab_color_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true" android:drawable="@color/tiffany_blue" />
    <item android:drawable="@color/transparent" />
</selector>

backGroundWithWhiteBorder.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="376dp"
    android:height="64dp"
    android:viewportWidth="376"
    android:viewportHeight="64">
  <path
      android:strokeWidth="1"
      android:fillColor="#00000000"
      android:strokeColor="#fff"/>
</vector>

样式.xml

    <style name="customTabLayout" parent="Widget.Design.TabLayout">
        <item name="tabTextAppearance">@style/TabText</item>
    </style>
    <style name="TabText" parent="@android:style/TextAppearance.Widget.TabWidget">
        <item name="android:textAllCaps">false</item>
        <item name="android:textSize">30sp</item>
        <item name="android:textAlignment">center</item>
    </style>

Answer 1

您可以通过将

TabLayout

作为父级并将

MaterialCardView

作为子级来实现这种

TabLayout

。要绘制外部矩形部分，您可以简单地使用属性

app:strokeWidth

和

app:strokeColor

来绘制边框，并且可以使用

TabLayout

属性将

MaterialCardView

移动到

android:layout_margin

内。

示例：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/black">

    <com.google.android.material.card.MaterialCardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="10dp"
        android:layout_marginEnd="10dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:cardBackgroundColor="@android:color/black"
        app:cardCornerRadius="0dp"
        app:strokeWidth="1dp"
        app:strokeColor="@android:color/white">

        <com.google.android.material.tabs.TabLayout
            android:id="@+id/tabLayout"
            android:layout_width="match_parent"
            android:layout_height="40dp"
            android:backgroundTint="@android:color/transparent"
            android:layout_margin="5dp"
            app:tabGravity="fill"
            app:tabMode="fixed"
            app:tabMaxWidth="0dp"
            app:tabIndicatorColor="@android:color/transparent"
            app:tabIndicatorHeight="0dp"
            app:tabRippleColor="@android:color/transparent"
            app:tabTextColor="@android:color/darker_gray"
            app:tabSelectedTextColor="@android:color/white"
            app:tabBackground="@drawable/tabs_selector"
            app:tabTextAppearance="@style/CustomTabTextAppearance">

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

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

        </com.google.android.material.tabs.TabLayout>

    </com.google.android.material.card.MaterialCardView>

</androidx.constraintlayout.widget.ConstraintLayout>

其中

@drawable/tabs_selector

是可绘制选项卡背景选择器：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true">
        <shape android:shape="rectangle">
            <solid android:color="#5F9EA0" />
            <corners android:radius="0dp" />
        </shape>
    </item>
    <item android:state_selected="false">
        <shape android:shape="rectangle">
            <solid android:color="@android:color/transparent" />
            <corners android:radius="0dp" />
        </shape>
    </item>
</selector>

和

@style/CustomTabTextAppearance

用于设置自定义选项卡文本外观：

<style name="CustomTabTextAppearance" parent="TextAppearance.MaterialComponents.Button">
    <item name="android:textAllCaps">false</item>
    <item name="android:textSize">14sp</item>
</style>

结果：