如何正确制作标签项填充？

Posted 2023-04-13

【中文标题】如何正确制作标签项填充？

【英文标题】：How to make tabs items padding correctly?

【发布时间】：2021-12-28 07:49:09

【问题描述】：

我想在图像中制作像这种设计这样的自定义选项卡，我在这个问题here 上找到了该案例的答案，但是在应用它的解决方案后，我在图像中得到了结果，我想要做的是设置我使用 app:tabPadding 对 tablayout 中的项目进行填充，但它没有任何区别。

这是我的实现

1- 活动布局

<?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_
    android:layout_
    tools:context=".MainActivity">

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tabLayout"
        android:layout_
        android:layout_
        android:layout_marginStart="8dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="8dp"
        android:background="@drawable/tab_layout_bg"
        android:clipToPadding="true"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:tabBackground="@drawable/selector_tab"
        app:tabGravity="fill"
        app:tabIndicatorColor="@android:color/transparent"
        app:tabIndicatorHeight="0dp"
        app:tabMode="fixed"
        app:tabPadding="8dp"
        app:tabRippleColor="@null"
        app:tabSelectedTextColor="@color/black"
        app:tabTextColor="@color/black">

        <com.google.android.material.tabs.TabItem
            android:layout_
            android:layout_
            android:text="Order Tracking" />

        <com.google.android.material.tabs.TabItem
            android:layout_
            android:layout_
            android:text="Order details" />
    </com.google.android.material.tabs.TabLayout>



</androidx.constraintlayout.widget.ConstraintLayout> 

2 - 选择器标签

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- drawable for selected tab -->
    <item
        android:drawable="@drawable/shape_tab_selected"
        android:state_selected="true"/>

    <!-- drawable for unselected tab -->
    <item
        android:drawable="@drawable/shape_tab_un_selected"
        android:state_selected="false"/>

</selector>

3 - shape_tab_selected

   <?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <!-- radius should be half of the desired TabLayout height -->
    <corners android:radius="10dp" />
    <solid android:color="@color/white"/>

</shape>

4 - shape_tab_un_selected

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <!-- color of the selected tab -->
    <solid android:color="@android:color/transparent" />


</shape>

5 - tab_layout_bg

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <!-- radius should be half of the desired TabLayout height -->
    <corners android:radius="10dp" />
    <solid android:color="@color/colorGray"/>

</shape>

6 - 颜色

<color name="black">#FF000000</color>
<color name="white">#FFFFFFFF</color>
<color name="colorBlack">#F2F4F7</color>
<color name="colorGray">#F2F4F7</color>

【参考方案1】：

我找到了解决方案，在这里

1 - 创建一个可绘制的选择器 (selector_tabs.xml)

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

2 - 对于选定状态 ic_tab_selected 上的可绘制对象，创建一个矢量可绘制对象并使用缩放和枢轴值来控制要应用的填充方式

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:
    android:
    android:viewportWidth="174"
    android:viewportHeight="42">
    <group
        android:scaleX="0.92"
        android:scaleY="0.90"
        android:pivotX="87"
        android:pivotY="21">
        <path
            android:pathData="M12,4L162,4A8,8 0,0 1,170 12L170,30A8,8 0,0 1,162 38L12,38A8,8 0,0 1,4 30L4,12A8,8 0,0 1,12 4z"
            android:fillColor="#ffffff"/>
    </group>

</vector>

3 - 在标签布局上使用

app:tabBackground="@drawable/selector_tabs"

【参考方案2】：

如果你只是简单地给选定的drawable添加一个笔触，它也可以工作。

3 - shape_tab_selected

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <stroke android:color="@color/colorGray"
    android:/>

    <!-- radius should be half of the desired TabLayout height -->
    <corners android:radius="10dp" />
    <solid android:color="@color/white"/>

</shape>