芯片组第二行重叠答案

【问题标题】：Chip Group Second Row Overlaps芯片组第二行重叠
【发布时间】：2021-01-18 15:02:27
【问题描述】：

现在我有一个包含 4 个芯片的芯片组，它的布局尺寸正确（意味着它没有获得整个屏幕宽度），当第四个芯片中的文本变得太长时，它会将其移动到下一行。我添加了这段代码：

app:chipMinTouchTargetSize="0dp"

为了让芯片之间的空间更小，因为以前空间真的很大，但现在空间太小了。填充或边距也不起作用，但我可能做错了什么。

<LinearLayout
        android:layout_width="312dp"
        android:layout_height="wrap_content"
        android:layout_marginBottom="1dp"
        android:layout_marginStart="15dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toTopOf="@+id/line2">

        <com.google.android.material.chip.ChipGroup
            android:layout_width="300dp"
            android:layout_marginBottom="0dp"
            app:layout_constraintBottom_toTopOf="@+id/line2"
            android:layout_height="match_parent">

            <com.google.android.material.chip.Chip
                android:id="@+id/tag1"
                style="@style/Colors_Widget.MaterialComponents.Chip.Choice"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="2dp"
                android:text="Tag1"
                android:textSize="11sp"
                app:chipMinTouchTargetSize="0dp" />

            <com.google.android.material.chip.Chip
                android:id="@+id/tag2"
                style="@style/Colors_Widget.MaterialComponents.Chip.Choice"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="2dp"
                android:text="Tag2"
                android:textSize="11sp"
                app:chipMinTouchTargetSize="0dp" />

            <com.google.android.material.chip.Chip
                android:id="@+id/tag3"
                style="@style/Colors_Widget.MaterialComponents.Chip.Choice"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="2dp"
                android:text="Tag3"
                android:textSize="11sp"
                app:chipMinTouchTargetSize="0dp" />

            <com.google.android.material.chip.Chip
                android:id="@+id/tag4"
                style="@style/Colors_Widget.MaterialComponents.Chip.Choice"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="5dp"
                android:text="Tag4"
                android:textSize="11sp"
                app:chipMinTouchTargetSize="0dp" />
        </com.google.android.material.chip.ChipGroup>
    </LinearLayout>
</LinearLayout>

Picture of my chip group

【问题讨论】：

标签： android xml android-studio material-components-android

【解决方案1】：

问题是我制作了一个单独的样式组件来设计芯片。我没有在布局文件中包含chipMinTouchTargetSize，而是将其包含在样式部分中。然后我将app:chipSpacingVertical="5dp" 添加到芯片组父级。它奏效了。

风格：

<style name="Colors_Widget.MaterialComponents.Chip.Choice" parent="Widget.MaterialComponents.Chip.Choice">
    <item name="chipCornerRadius">12dp</item>
    <item name="chipMinHeight">24dp</item>
    <item name="chipMinTouchTargetSize">5dp</item>
    <item name="chipBackgroundColor">@color/honeyBright</item>
    <item name="android:textColor">@color/black</item>
</style>

布局

<com.google.android.material.chip.ChipGroup
            android:layout_width="300dp"
            android:layout_marginBottom="0dp"
            app:chipSpacingVertical="5dp"
            app:layout_constraintBottom_toTopOf="@+id/line2"
            android:layout_height="match_parent">

            <com.google.android.material.chip.Chip
                android:id="@+id/tag1"
                style="@style/Colors_Widget.MaterialComponents.Chip.Choice"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Tag1"
                android:textSize="11sp" />
</com.google.android.material.chip.ChipGroup>

这是现在的样子：Correct Chip Group Image

【讨论】：