Question

我想只制作Tab指示器圆角而不是整个标签。我曾尝试设置自定义视图，但它没有帮助我。任何帮助，将不胜感激。感谢

Answer 1

在支持库28中，您可以使用app:tabIndicator来设置客户可绘制形状。

因此您可以执行以下操作：

创建带有圆角的自定义形状指示器，此外，您还可以从形状的左，右和底部设置边距，以便更正确地显示舍入（因此指示器不会触碰屏幕的边缘）或查看）

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:end="2dp"
        android:start="2dp"
        android:bottom="2dp">
        <shape android:shape="rectangle">
            <corners android:radius="20dp" />
            <solid android:color="@color/colorAccent" />
        </shape>
    </item>
</layer-list>

然后在TabLayout xml中设置可绘制的app:tabIndicator="@drawable/shape_tab_indicator"

您也可以设置app:tabIndicatorFullWidth="false"而不是为形状项目设置边距。

Answer 2

您可以使用此库CircularIndicatorTabLayout。

<强>安装

您可以从here
将 circular-idicator-tab-layout-1.0.0.aar 移至 app / libs
在项目build.gradle文件中添加存储库if(attrs.deploy){ scope.deploy = scope.$eval(attrs.deploy); }
在 app build.gradle 文件中添加{ flatDir { dirs 'libs' } }

示例

在布局文件中添加

compile(name: 'circular-idicator-tab-layout-1.0.0', ext: 'aar')

在您的java文件中

<np.com.ngimasherpa.citablayout.CircularIndicatorTabLayout android:id="@+id/tab_monitoring_criteria" android:layout_width="match_parent" android:layout_height="@dimen/spacing_72" app:iconColor="@color/colorPrimaryDark" app:indicatorColor="@color/colorAccent" app:indicatorPosition="bottom" app:lineColor="@android:color/holo_red_dark" app:lineEnabled="true" app:mode="fixed" app:selectedIconColor="@color/colorAccent" app:tabViewIconId="@+id/iconTabViewLayout" app:tabViewLayoutId="@layout/tab_layout" app:tabViewTextViewColor="@color/colorPrimaryDark" app:tabViewTextViewId="@+id/textTabViewLayout" app:tabViewTextViewSelectedColor="@color/colorAccent" app:tab_gravity="fill" />

Answer 3

您可以尝试使用自定义矢量图像为TabLayout设置tabIndicator。

<com.google.android.material.tabs.TabLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        app:tabIndicator="@drawable/custom_tab_indicator"
        app:tabTextAppearance="?textAppearanceH3"
        app:tabMode="auto">

下面是您的custom_tab_indicator.xml：

<vector
    android:height="4dp"
    android:width="24dp"
    android:viewportHeight="4.0"
    android:viewportWidth="24.0"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <path
        android:strokeWidth="4"
        android:fillColor="@color/red"
        android:strokeColor="@color/red"
        android:strokeLineCap="round"
        android:pathData="M12,4 H12, 4 z"/>
</vector>

Answer 4

实际上很简单，您要做的就是制作一个带有圆角的自定义形状，并将其设置为tabIndicator。

这里是称为custom_tab_indicator.xml的圆角形状

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/colorAccent" />
    <corners
        android:bottomLeftRadius="0dp"
        android:bottomRightRadius="0dp"
        android:topLeftRadius="10dp"
        android:topRightRadius="10dp" />
</shape>

然后像这样将其设置为tabLayout中的tabIndicator。

<com.google.android.material.tabs.TabLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabIndicator="@drawable/custom_tab_indicator"
    app:tabIndicatorFullWidth="false"
    app:tabIndicatorHeight="3dp" />

那应该可以使您在边缘获得圆润的效果。

自定义TabLayout指标。制作标签指示器圆角？

4 个答案: