在相对布局中为芯片组添加水平滚动

Question

我在一个组中创建了几个静态芯片。 我正在使用此链接（https://material.io/design/components/chips.html#）作为参考。 代码如下：

<RelativeLayout
        android:id="@+id/inputLayout"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:layout_alignParentBottom="true"
        android:background="@android:color/white"
        android:gravity="bottom"
        android:paddingStart="8dp"
        android:paddingTop="8dp"
        android:paddingEnd="8dp"
        android:paddingBottom="9dp">

        <ImageView
            android:id="@+id/sendBtn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentEnd="true"
            android:paddingTop="4dp"
            app:srcCompat="@drawable/chatbot_send_btn" />

        <EditText
            android:id="@+id/queryEditText"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentStart="true"
            android:layout_toStartOf="@+id/sendBtn"
            android:imeOptions="actionSend"
            android:inputType="text"
            android:paddingTop="4dp"
            android:textSize="18sp" />

        <com.google.android.material.chip.ChipGroup
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="16dp"
            android:layout_above="@id/queryEditText">

            <com.google.android.material.chip.Chip
                style="@style/Widget.MaterialComponents.Chip.Choice"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="wsfdsd" />

            <com.google.android.material.chip.Chip
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="wsfdsd"
                style="@style/Widget.MaterialComponents.Chip.Choice"/>

            <com.google.android.material.chip.Chip
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="wsfdsd"
                style="@style/Widget.MaterialComponents.Chip.Choice"/>

            <com.google.android.material.chip.Chip
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="wsfdsd"
                style="@style/Widget.MaterialComponents.Chip.Choice"/>

            <com.google.android.material.chip.Chip
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="wsfdsd"
                style="@style/Widget.MaterialComponents.Chip.Choice"/>

            <com.google.android.material.chip.Chip
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="wsfdsd" />

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

    </RelativeLayout>  

这并不显示所有的芯片，它只显示一个芯片。我该如何添加横向滚动？我需要动态地显示芯片以便添加横向滚动吗？

- Ajay Kulkarni

---

根据材料指南，选择芯片可以水平滚动。我需要将该芯片组添加到“水平滚动视图”中吗？ - Ajay Kulkarni

从文档中得知：“ChipGroup 用于容纳多个芯片。默认情况下，芯片会在多行上重新排列。将 app:singleLine 属性设置为将芯片限制在单个水平线上。如果这样做，通常需要将此 ChipGroup 包装在 HorizontalScrollView 中。” https://developer.android.com/reference/com/google/android/material/chip/ChipGroup也许可以试一试，看看会发生什么 :) - Zee

我按照你的建议添加了app:singleLine属性，现在它已经变成单行了，但是没有水平滚动。 - Ajay Kulkarni

我已经添加了水平滚动条，代码在此链接中：https://codeshare.io/anYAp1。生成的用户界面在此链接中：https://cdn1.imggmi.com/uploads/2019/1/4/ca1892f6995fc6f8079b907899388542-full.png。但是它看起来很混乱。 - Ajay Kulkarni

嗯...我通过在HorizontalScrollView中添加android:layout_alignParentBottom="true"属性来解决了它。谢谢 :) - Ajay Kulkarni

Answer 1

只需添加 horizontalScrollView 并设置 android:scrollbars="none"

   <HorizontalScrollView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:scrollbars="none">

            <com.google.android.material.chip.ChipGroup
                android:id="@+id/chipsPrograms"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="8dp"
                android:layout_marginBottom="8dp"
                android:paddingStart="8dp"
                android:paddingEnd="8dp"
                app:chipSpacing="8dp"
                app:singleSelection="true" />
        </HorizontalScrollView>

- Vishal Nagvadiya

Answer 2

你可以将ChipGroup放置在HorizontalScrollView中

- Jassem Ben Hamida

---

我将其添加到了“horizontalscrollview”下，现在UI有点混乱，https://cdn1.imggmi.com/uploads/2019/1/4/ca1892f6995fc6f8079b907899388542-full.png - Ajay Kulkarni

我通过在HorizontalScrollView中添加android:layout_alignParentBottom="true"属性来解决了这个问题。谢谢 :) - Ajay Kulkarni