首页 > 解决方案 > 设置材质选项卡布局的样式

问题描述

我正在使用 kotlin 在我的 android 应用程序中进行材料设计。我想知道如何设置我的标签布局,就像它在下面显示的图像中一样。谢谢!

选项卡布局

 <com.google.android.material.tabs.TabLayout
        android:id="@+id/profileFreelancerTabLayoutCu"
        style="@style/Widget.AppCompat.Light.ActionBar.TabBar"
        android:layout_width="wrap_content"
        android:layout_height="60dp"
        app:tabTextColor="@color/colorPrimary"
        android:layout_marginVertical="20dp"
        android:layout_marginHorizontal="40dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/registeredOnValueProfileFreelancerCu"
        />

解决了:

<com.google.android.material.tabs.TabLayout
        android:id="@+id/profileFreelancerTabLayoutCu"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabTextColor="@color/colorPrimary"
        android:layout_marginVertical="20dp"
        android:layout_marginHorizontal="60dp"
        app:tabIndicatorGravity="stretch"
        app:tabIndicator="@drawable/tab_indicator_shape"
        android:background="@drawable/thicker_stroke_tab_layout"
        app:tabSelectedTextColor="@color/colorWhite"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        android:layout_marginBottom="10dp"
        app:layout_constraintTop_toBottomOf="@+id/registeredOnValueProfileFreelancerCu"
        />

标签: androidkotlinmaterial-designandroid-tablayoutmaterial-components

解决方案


只需使用该app:tabIndicatorGravity="stretch"属性来拉伸指示器以匹配此布局中选项卡项的高度和宽度。
您还可以使用app:tabIndicatorColor属性设置背景颜色:

  <com.google.android.material.tabs.TabLayout
      app:tabIndicatorGravity="stretch"
      app:tabIndicatorColor="@color/...."
      ...>

在此处输入图像描述

删除style="@style/Widget.AppCompat.Light.ActionBar.TabBar". _


推荐阅读