Android-具有芯片风格的自定义选项卡布局？

如何在选项卡中实现此外观？

我希望它：

•根据查看的页面更改文本的颜色我已经通过默认supportLibrary的小部件TabLayout实现了这一点 •更改背景笔划的颜色 •每个选项卡元素之间的间距无法通过填充选项实现

有没有一个库可以帮助我，我搜索了，但没有得到任何有用的细节，事实上，我不知道在搜索栏中键入什么。 这种款式叫什么

提前感谢。

输出：

大部分是xml定制

style.xml

在活动/片段中的tabLayout.setupWithViewPager之后添加以下代码：

for (i in 0 until binding.toolbarHolder.tabLayout.getTabCount()) {
        val tab = (binding.toolbarHolder.tabLayout.getChildAt(0) as ViewGroup).getChildAt(i)
        val p = tab.layoutParams as ViewGroup.MarginLayoutParams
        p.setMargins(Utils.dpToPx(8), 0, Utils.dpToPx(8), 0)
        tab.requestLayout()
    }

根据您的要求更改颜色。快乐编码

输出：

大部分是xml定制

style.xml

在活动/片段中的tabLayout.setupWithViewPager之后添加以下代码：

for (i in 0 until binding.toolbarHolder.tabLayout.getTabCount()) {
        val tab = (binding.toolbarHolder.tabLayout.getChildAt(0) as ViewGroup).getChildAt(i)
        val p = tab.layoutParams as ViewGroup.MarginLayoutParams
        p.setMargins(Utils.dpToPx(8), 0, Utils.dpToPx(8), 0)
        tab.requestLayout()
    }

---

根据您的要求更改颜色。快乐编码

为此，您需要将自定义选项卡设置为tablayout。我也在尝试实现同样的目标。我定制了可拉制的标签和其他东西。唯一悬而未决的是芯片之间的余量。我将在一段时间内添加我的代码。为此，您需要将自定义选项卡设置为tablayout。我也在尝试实现同样的目标。我定制了可拉制的标签和其他东西。唯一悬而未决的是芯片之间的余量。我会在一段时间内添加我的代码。非常感谢！你是最棒的。你好，帕里托斯，谢谢你的解决方案。我唯一的问题是，在标签上点击的涟漪超出了矩形的形状。有什么想法吗？@Alator我会查一查的谢谢！你是最棒的。你好，帕里托斯，谢谢你的解决方案。我唯一的问题是，在标签上点击的涟漪超出了矩形的形状。有什么想法吗？@Alator我会查一查

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#B1BCBE"/>
    <stroke
            android:width="2dp"
            android:color="#B1BCBE"/>
    <corners android:radius="20dp"/>
    <padding
            android:left="0dp"
            android:top="0dp"
            android:right="0dp"
            android:bottom="0dp"/>
</shape>

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/chip_outline_selected" android:state_pressed="true"/>
    <item android:drawable="@drawable/chip_outline_selected" android:state_selected="true"/>
    <item android:drawable="@drawable/chip_outline_selected" android:state_activated="true"/>
    <item android:drawable="@drawable/chip_outline" android:state_pressed="false"/>
    <item android:drawable="@drawable/chip_outline" android:state_selected="false"/>
    <item android:drawable="@drawable/chip_outline" android:state_activated="false"/>
</selector>

<com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize">

    <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolBar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_collapseMode="pin"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            android:layout_marginBottom="4dp"
            android:background="@android:color/white"
            android:elevation="4dp">

        <com.google.android.material.tabs.TabLayout
                android:id="@+id/tabLayout"
                style="@style/ChipTabLayout"
                android:layout_width="match_parent"
                android:layout_height="30dp"
                app:tabIndicatorHeight="30dp"
                app:tabMode="scrollable"
                android:minWidth="80dp"
                app:tabGravity="fill"
                android:layout_gravity="center"
                app:tabIndicatorGravity="center"
                android:background="@android:color/white"
                android:minHeight="?attr/actionBarSize"/>
    </androidx.appcompat.widget.Toolbar>

</com.google.android.material.appbar.AppBarLayout>

class Utils {
    companion object {
        fun dpToPx(dp: Int): Int {
            return ((dp * Resources.getSystem().displayMetrics.density).toInt());
        }

        fun pxToDp(px: Int, context: Context): Int {
            return ((px / Resources.getSystem().displayMetrics.density).toInt());
        }
    }
}

for (i in 0 until binding.toolbarHolder.tabLayout.getTabCount()) {
        val tab = (binding.toolbarHolder.tabLayout.getChildAt(0) as ViewGroup).getChildAt(i)
        val p = tab.layoutParams as ViewGroup.MarginLayoutParams
        p.setMargins(Utils.dpToPx(8), 0, Utils.dpToPx(8), 0)
        tab.requestLayout()
    }