如何在 ChipGroup 中居中对齐芯片？

Question

我有 3 个芯片，我想要实现的是将第一个芯片水平对齐到屏幕的开头，第二个在中间，第三个在屏幕末端。

我还想问一下如何在芯片组中添加新行，比如在第一行添加 3 个芯片，然后在第二行添加 TextView，在第三行添加另外 3 个芯片。

编辑：我通过用 LinearLayout 包裹我的 TextView 解决了第二个问题

<com.google.android.material.chip.ChipGroup
            android:id="@+id/chipGroup"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            app:chipSpacingHorizontal="40dp"
            app:singleSelection="true">


            <com.google.android.material.chip.Chip
                android:id="@+id/chip_1"
                style="@style/CustomChipChoice"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:checked="false"
                android:text="8:30 AM"
                app:chipCornerRadius="7dp" />

            <com.google.android.material.chip.Chip
                android:id="@+id/chip_2"
                style="@style/CustomChipChoice"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:checked="false"
                android:text="9:00 AM"
                app:chipCornerRadius="7dp" />

            <com.google.android.material.chip.Chip
                android:id="@+id/chip_3"
                style="@style/CustomChipChoice"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:checked="false"
                android:text="9:30 AM"
                app:chipCornerRadius="7dp" />

            <TextView
                android:id="@+id/TextView"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="20dp"
                android:fontFamily="@font/poppins_bold"
                android:text="TextView"
                android:textSize="18sp" />

            <com.google.android.material.chip.Chip
                android:id="@+id/chip_4"
                style="@style/CustomChipChoice"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:checked="false"
                android:text="8:30 AM"
                app:chipCornerRadius="7dp" />

            <com.google.android.material.chip.Chip
                android:id="@+id/chip_5"
                style="@style/CustomChipChoice"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:checked="false"
                android:text="8:30 AM"
                app:chipCornerRadius="7dp" />

            <com.google.android.material.chip.Chip
                android:id="@+id/chip_6"
                style="@style/CustomChipChoice"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:checked="false"
                android:text="8:30 AM"
                app:chipCornerRadius="7dp" />
</com.google.android.material.chip.ChipGroup>

Answer 1

你可以在没有图书馆的情况下实现这一目标。为此，您制作 LinearLayouts 来包装每一行。为了得到相等的 space，我们对 group 中的每个 chip 使用 android:layout_weight=".1"。如果你给它相同的 weight 它将是平衡的，反之亦然。这就是我想出的：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.material.chip.ChipGroup
        android:id="@+id/chipGroup"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:chipSpacingHorizontal="40dp"
        app:singleSelection="true">
        
        <LinearLayout
            android:id="@+id/ll1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

            <com.google.android.material.chip.Chip
                android:id="@+id/chip_1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="20dp"
                android:layout_marginEnd="20dp"
                android:layout_weight=".1"
                android:checked="false"
                android:text="8:30 AM"
                android:textAlignment="center"
                app:chipCornerRadius="7dp" />

            <com.google.android.material.chip.Chip
                android:id="@+id/chip_2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="20dp"
                android:layout_marginEnd="20dp"
                android:layout_weight=".1"
                android:checked="false"
                android:text="9:00 AM"
                android:textAlignment="center"
                app:chipCornerRadius="7dp" />

            <com.google.android.material.chip.Chip
                android:id="@+id/chip_3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="20dp"
                android:layout_marginEnd="20dp"
                android:layout_weight=".1"
                android:checked="false"
                android:text="9:30 AM"
                android:textAlignment="center"
                app:chipCornerRadius="7dp" />

        </LinearLayout>

        <LinearLayout
            android:id="@+id/ll2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <TextView
                android:id="@+id/TextView"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_margin="10dp"
                android:text="MyTextisHere"
                android:textSize="18sp" />

        </LinearLayout>

        <LinearLayout
            android:id="@+id/ll3"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

            <com.google.android.material.chip.Chip
                android:id="@+id/chip_4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="20dp"
                android:layout_marginEnd="20dp"
                android:layout_weight=".1"
                android:checked="false"
                android:text="10:00 AM"
                android:textAlignment="center"
                app:chipCornerRadius="7dp" />

            <com.google.android.material.chip.Chip
                android:id="@+id/chip_5"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="20dp"
                android:layout_marginEnd="20dp"
                android:layout_weight=".1"
                android:checked="false"
                android:text="10:30 AM"
                android:textAlignment="center"
                app:chipCornerRadius="7dp" />

            <com.google.android.material.chip.Chip
                android:id="@+id/chip_6"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="20dp"
                android:layout_marginEnd="20dp"
                android:layout_weight=".1"
                android:checked="false"
                android:text="11:00 AM"
                android:textAlignment="center"
                app:chipCornerRadius="7dp" />

        </LinearLayout>
    </com.google.android.material.chip.ChipGroup>
</RelativeLayout>

结果：

如何在 ChipGroup 中居中对齐芯片？

How to center align Chips in ChipGroup?

android

android-studio

material-design

android-chips