在 MaterialCardView 的边框上绘制 ChipGroup 内的 Chip

Posted 2023-04-18

【中文标题】在 MaterialCardView 的边框上绘制 ChipGroup 内的 Chip

【英文标题】：Draw Chip inside ChipGroup over border of MaterialCardView

【发布时间】：2021-12-12 15:17:57

【问题描述】：

我正在为 recyclerview 行进行布局，我希望 ChipGroup 像在这个模型中一样在 MaterialCard 的边框上绘制：

问题是我使用什么父布局无关紧要，或者如果我禁用clipChildren，芯片永远不会与MaterialCardView重叠，如果我用一个简单的按钮替换芯片，它看起来正是我想要的。

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_
    android:layout_>
    <com.google.android.material.chip.ChipGroup
        app:layout_constraintTop_toTopOf="parent"
        android:layout_
        android:layout_
        android:layout_marginStart="10dp"
        app:singleLine="true">

        <com.google.android.material.chip.Chip
            android:id="@+id/chip_1"
            android:layout_
            android:layout_
            android:clickable="false"
            android:text="Urgente"
            app:chipIcon="@drawable/ic_baseline_circle_24"
            app:chipIconSize="16dp"
            app:chipIconTint="@android:color/holo_orange_dark"
            app:chipStartPadding="6dp" />

        <com.google.android.material.chip.Chip
            android:id="@+id/chip_2"
            android:layout_
            android:layout_
            android:text="Etiqueta 1" />

        <com.google.android.material.chip.Chip
            android:id="@+id/chip_3"
            android:layout_
            android:layout_
            android:text="Etiqueta 2" />

    </com.google.android.material.chip.ChipGroup>
    <com.google.android.material.card.MaterialCardView
        android:layout_
        app:layout_constraintTop_toTopOf="parent"
        android:layout_
        android:layout_marginTop="22dp"
        app:cardCornerRadius="0dp"
        app:strokeColor="@android:color/holo_red_light"
        app:strokeWidth="2dp"/>

</androidx.constraintlayout.widget.ConstraintLayout>

这就是它的外观（ChipGroup 是在 xml 中的 MaterialCardView 之前还是之后都没有关系，如果我把它放在 MaterialCardView 里面它只会在里面绘制）。

这是用 Button 替换 ChipGroup，您可以看到它在 MaterialCardView 的边框上绘制，这正是我想要的。

【问题讨论】：

MaterialCardView 的默认高度约为 2-4dp，因此您可以将 cardElevation 设置为 0dp 或将芯片组的高度增加到 4dp 或更高。这里要注意的是，给chipGroup 赋予高度会导致在每个芯片下方显示阴影。请注意，API 级别超过 21 级将适用提升。

这可能已经改变了，我针对 api 31 并将 CardView 的高度设置为 0dp 不起作用，而且芯片不会在芯片组中显示高度为 2dp 的阴影，这足以让他们在 MaterialCardView 上绘制

【参考方案1】：

你可以使用海拔。

来源链接

https://material.io/design/environment/elevation.html#depicting-elevation

【讨论】：

完美！将 android:elevation="2dp" 添加到 ChipGroup，现在它可以工作了，非常感谢！