Android 如何在所有 TabLayout 选项卡周围添加圆角外角并为内部选项卡边框添加方角

Question

我当前的 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>

这是它的样子

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

Answer 1

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

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

 <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);

        }
    }

输出-

Android 如何在所有 TabLayout 选项卡周围添加圆角外角并为内部选项卡边框添加方角

How to add rounded outer corners around all TabLayout Tabs and have square corners for inner tab borders on Android

android

android-drawable

android-tablayout