android：无法制作多线芯片组答案

【问题标题】：android:unable to make multiline chipgroupandroid：无法制作多线芯片组
【发布时间】：2019-05-21 18:58:14
【问题描述】：

我在相对布局中有一个芯片组以及一个文本视图，其代码如下所示。

    <RelativeLayout
    ...

    <TextView
        android:layout_width="30dp"
        android:layout_height="wrap_content"
        android:text="TextTitle"
        android:layout_alignParentStart="true"
        android:gravity="left"
        android:layout_marginTop="16dp"
        android:textColor="@android:color/white"
        android:textStyle="bold"
        android:textSize="14sp"
        android:id="@+id/tv"
        android:layout_toLeftOf="@id/cg"
        android:layout_alignBaseline="@id/cg"
        />

       <com.google.android.material.chip.ChipGroup
       android:id="@+id/cg"
       android:layout_width="wrap_content"
       android:layout_height="14dp"
       android:layout_marginTop="20dp"
       android:layout_marginBottom="5dp"
       android:layout_alignParentRight="true"
       android:layout_alignParentEnd="true"
       android:textColor="@android:color/black"
       android:textStyle="bold"
       android:textSize="12sp"
       app:singleSelection="false"
       app:chipSpacingVertical="32dp"
       app:chipSpacingHorizontal="5dp"
       app:singleLine="false"
       />
  </RelativeLayout>

我像下面这样动态地将芯片添加到这个芯片组中：

Chip chip;

for(int i=0;i<2;i++){
    chip = new Chip(this);
    chip.setText("Text:"+i);
    chip.setChipBackgroundColorResource(android.R.color.darker_gray);
    chip.setTextColor(Color.WHITE);
    mChipGroup.addView(chip);
}

上面将textview和chipgroup并排显示（芯片在textview的最右边，这是我想要的）。

对于 2 或 3 个芯片，输出如下所示：

但是当我有超过 3 个筹码时，它看起来很糟糕：

我参考了文档并尝试使芯片组多行并在芯片组 xml 中添加以下内容

   app:chipSpacingVertical="32dp"
   app:chipSpacingHorizontal="5dp"
   app:singleLine="false"

它看起来和 pic2 中的一样。

我需要的是一个带有多行选项的芯片组，其间距与 pic1 中的一样，即在 pic1 中，如果芯片数量增加，我希望 Text3 在 Text0 下方和 Text4 在 Text1 下方等等！强>。

我确定我一定遗漏了一些东西，但不知道它是什么。任何帮助都会非常有用。提前致谢！！

【问题讨论】：

检查我的答案
你想让你所有的筹码单行显示吗？
不，我希望它们在多行中，它们各自的大小如上图所示。

标签： android android-relativelayout androidx android-chips

【解决方案1】：

我从@Sajith 的答案更新，看看它是否可以工作：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:weightSum="100">

        <TextView
            android:layout_width="0dp"
            android:layout_weight="25"
            android:layout_height="wrap_content"
            android:text="TextTitle"
            android:gravity="left"
            android:layout_marginTop="16dp"
            android:textColor="@android:color/white"
            android:textStyle="bold"
            android:textSize="14sp"
            android:id="@+id/tv" />

        <FrameLayout
            android:layout_width="0dp"
            android:layout_weight="75"
            android:layout_height="wrap_content" >

            <com.google.android.material.chip.ChipGroup
                android:id="@+id/cg"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="end"
                android:layout_marginTop="20dp"
                android:layout_marginBottom="5dp"
                android:textColor="@android:color/black"
                android:textStyle="bold"
                android:textSize="12sp"
                app:singleSelection="false"
                app:chipSpacingVertical="32dp"
                app:chipSpacingHorizontal="5dp"
                app:singleLine="false" />
        </FrameLayout>

    </LinearLayout>
</RelativeLayout>

【讨论】：

它很棒的家伙..这是我需要的。顺便说一句，有什么诀窍？它使用框架布局吗？如果是这样，我们什么时候使用框架布局？
我很高兴它可以工作。使用FrameLayout的时机很难概括，但你可以通过更多的使用来掌握它。
如果我们用线性或任何其他布局替换框架布局，那么它也可以工作吗？
我遇到了同样的问题。我已经遇到了 FrameLayout 是诀窍的问题，但在这种情况下我没有。非常感谢！

【解决方案2】：

像下面这样使用你的xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:weightSum="100">

    <TextView
        android:layout_width="0dp"
        android:layout_weight="25"
        android:layout_height="wrap_content"
        android:text="TextTitle"
        android:gravity="left"
        android:layout_marginTop="16dp"
        android:textColor="@android:color/white"
        android:textStyle="bold"
        android:textSize="14sp"
        android:id="@+id/tv"
        />

    <com.google.android.material.chip.ChipGroup
        android:id="@+id/cg"
        android:layout_width="0dp"
        android:layout_weight="75"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:layout_marginBottom="5dp"
        android:textColor="@android:color/black"
        android:textStyle="bold"
        android:textSize="12sp"
        app:singleSelection="false"
        app:chipSpacingVertical="32dp"
        app:chipSpacingHorizontal="5dp"
        app:singleLine="false"
        />

</LinearLayout>

</RelativeLayout>

您的最终屏幕如下所示。根据您的要求调整芯片的空间和宽度。

编辑

如果您想设置高度，请在您的活动中使用它，如下所示（在for 循环内）

 chip.setChipMinHeight(10);

【讨论】：

感谢 Sajith 的回答。但我希望芯片尺寸小。我给了 4 个芯片，它看起来很大，有额外的间隙。我设置了 layout_height，但有两个芯片超出了框架.我希望芯片大小与你带来的多线完全一样
如果这是您要寻找的答案，您能否投票并接受我的答案？
嗨 Sajith，尽管它使芯片成为多行，但它并没有像 pic1 中所示将芯片对齐到右侧。假设我有 2 个芯片，它们应该向右对齐，但是现在它是靠左对齐的，你能不能给点意见！！
这里有答案stackoverflow.com/questions/51199787/…

【解决方案3】：

如果您想在多行上使用芯片实现类似 gmail 的行为，那么所有以前的解决方案都不适用于我。为了做到这一点，我不得不避免使用 ChipGroup，而是使用 FlexboxLayout。

your_recipient_layout：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <TextView
        android:id="@+id/recipient_label_TV"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="8dp"
        android:layout_gravity="center_vertical" />

    <com.google.android.flexbox.FlexboxLayout
        android:id="@+id/recipient_group_FL"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_gravity="center_vertical"
        app:flexWrap="wrap"
        app:alignItems="stretch"
        app:alignContent="space_around"
        app:showDivider="beginning|middle|end"
        app:dividerDrawable="@drawable/divider">

        <EditText
            android:id="@+id/recipient_input_ET"
            android:layout_width="wrap_content"
            android:layout_height="32dp"
            app:layout_flexGrow="1"
            android:background="@android:color/transparent"
            android:imeOptions="actionDone"
            android:inputType="text"/>

    </com.google.android.flexbox.FlexboxLayout>

</LinearLayout>

<androidx.recyclerview.widget.RecyclerView
    android:id="@+id/recipients_list_RV"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:visibility="gone" />

现在的诀窍是在组中添加一个新筹码，但排名倒数第二。像这样的：

private fun addChipToGroup(person: String, chipGroup: FlexboxLayout) {
    val chip = Chip(context)
    chip.text = person
    chip.chipIcon = ContextCompat.getDrawable(requireContext(), R.mipmap.ic_launcher_round)
    chip.isCloseIconEnabled = true
    chip.isClickable = true
    chip.isCheckable = false
    chipGroup.addView(chip as View, chipGroup.childCount - 1)
    chip.setOnCloseIconClickListener { chipGroup.removeView(chip as View) }
}

【讨论】：