如何像下面的布局一样自定义 TabLayout

Question

大家好，我被卡住了，我想重现这个 TabLayout 的设计。有人知道怎么做吗？

Answer 1

为选中和未选中创建 2 个可绘制对象，如下所示，

1. drawable_selected_tab.xml

   <shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">
       <corners android:radius="5dp" />
       <solid android:color="@android:color/white"/>
   </shape>
   

2. drawable_unselected_tab.xml

   <shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">
       <solid android:color="@color/gray"/>
   </shape>
   

现在，您必须使用这 2 个可绘制对象创建选择器，

1. tab_selector.xml

    <selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- For selected tab -->
    <item
        android:drawable="@drawable/drawable_selected_tab"
        android:state_selected="true"/>
   
    <!-- For unselected tab -->
    <item
        android:drawable="@drawable/drawable_unselected_tab"
        android:state_selected="false"/>
    </selector>
   

现在把这个 tab_Selector.xml 给你的 TabLayout 的 tabBackground 就好了，

    <com.google.android.material.tabs.TabLayout 
       ...
       app:tabBackground="@drawable/selector_tab" />

根据您的要求在上面的 TabLayout 中添加更多属性。