2

我当前的 Android 应用程序采用com.google.android.material.tabs.TabLayout

三个选项卡。

我希望在三个选项卡周围有一个带圆角的边框（由笔画宽度 = 2dp 而非全色组成）。但是我想在三个选项卡之间有直线。

我非常接近预期的效果，但是我被圆角和方角困住了。有没有一种简单的方法可以达到我想要的结果？

这是我用过的drawables

 <com.google.android.material.tabs.TabLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="@dimen/margin4"
            android:background="@drawable/tab_layout_round_border"
            app:tabBackground="@drawable/tab_layout_border"
            app:tabGravity="fill"
            app:tabIndicatorHeight="0dp"
            app:tabMode="fixed"
            app:tabPaddingEnd="0dp"
            app:tabPaddingStart="0dp"
            app:tabTextAppearance="@style/Tab.TextAppearance.Literal"
            app:tabTextColor="?android:attr/textColorPrimary" />

@drawable/tab_layout_round_border

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <stroke
        android:width="2dp"
        android:color="@color/secondaryColor" />
    <solid android:color="@android:color/transparent" />
    <corners android:radius="5dp" />
    <padding
        android:bottom="0dp"
        android:left="0dp"
        android:right="0dp"
        android:top="0dp" />
</shape>

@drawable/tab_layout_border

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <stroke
        android:width="1dp"
        android:color="@color/secondaryColor" />
    <solid android:color="@android:color/transparent" />
    <corners android:radius="0dp" />
    <padding
        android:bottom="0dp"
        android:left="0dp"
        android:right="0dp"
        android:top="0dp" />
</shape>

这是它的样子

在此处输入图像描述

一旦我完成了这项工作，我还需要使用与绘制边框相同的颜色填充选定的选项卡

4

1 回答 1

1

而是app:tabBackground="@drawable/tab_layout_border"在 xml 中定义，您可以在特定的TabItem程序中应用它。当您在 xml 中定义它时，它会导致冲突，我的意思是它适用于您的所有三个项目。如果我们查看您附加的图片，那么我们可以在这里看到第一个和最后三个项目的制作问题。

所以我们将尝试应用第二项中的tab_layout_border 唯一。我不确定这对您的项目是否有帮助，但您可以检查 -

 <com.google.android.material.tabs.TabLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="@dimen/margin4"
    android:background="@drawable/tab_layout_round_border"
    app:tabGravity="fill"
    app:tabIndicatorHeight="0dp"
    app:tabMode="fixed"
    app:tabPaddingEnd="0dp"
    app:tabPaddingStart="0dp"
    app:tabTextAppearance="@style/Tab.TextAppearance.Literal"
    app:tabTextColor="?android:attr/textColorPrimary" />

你也可以在@drawable/tab_layout_border中使用stroke width = 2dp

<shape xmlns:android="http://schemas.android.com/apk/res/android">
<stroke
    android:width="2dp"
    android:color="@color/secondaryColor" />
<solid android:color="@android:color/transparent" />
<corners android:radius="0dp" />
<padding
    android:bottom="0dp"
    android:left="0dp"
    android:right="0dp"
    android:top="0dp" />

示例代码-

    TabLayout tabLayout = findViewById(R.id.tab);
    tabLayout.addTab(tabLayout.newTab().setText("One"));
    tabLayout.addTab(tabLayout.newTab().setText("Two"));
    tabLayout.addTab(tabLayout.newTab().setText("Tree"));

    ViewGroup tabItem = (ViewGroup) tabLayout.getChildAt(0);
    for (int i = 0; i < tabItem.getChildCount(); i++) {
        View tabView = tabItem.getChildAt(i);
        if (tabView !=null && i == 1) {
            int paddingStart = tabView.getPaddingStart();
            int paddingTop = tabView.getPaddingTop();
            int paddingEnd = tabView.getPaddingEnd();
            int paddingBottom = tabView.getPaddingBottom();
            ViewCompat.setBackground(tabView, AppCompatResources.getDrawable(getApplicationContext(), R.drawable.tab_layout_border));
            ViewCompat.setPaddingRelative(tabView, paddingStart, paddingTop, paddingEnd, paddingBottom);

        }
    }

输出- 在此处输入图像描述

于 2021-09-03T19:25:59.837 回答