在LinearLayout中添加类似于Gmail地址建议的TextView芯片

Question

我一直在创建像Gmail和大多数社交安卓应用程序所使用的地址簿中的Chips。

问题

我已经将值附加到LinearLayout中，只要它小于设备宽度，就可以正常工作。但是，一旦长度超过设备宽度，它就会混乱。

如何在每个环境中保持相同的行为？

期望的行为：

我得到了什么

代码片段：

<LinearLayout
        android:id="@+id/chipsBoxLayout" 
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal"
        >
<!--Layout to add Chips like Gmail application-->
</LinearLayout>

---

LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT,1);
params.setMargins(5, 0, 5, 0);

Iterator<Contact> iterContacts = contacts.iterator();
while(iterContacts.hasNext()) 
{   
  Contact contact = iterContacts.next();
  TextView t = new TextView(MainActivity.this);
  t.setLayoutParams(params);
  t.setPadding(5, 5, 5, 5);
  t.setText(contact.getContactName());
  t.setTextColor(Color.WHITE);
  t.setBackgroundColor(Color.BLUE);
  chipsBoxLayout.addView(t);
}

- Vikalp Patel

---

请查看 这个 和 这个。 - Rethinavel

Answer 1

根据Rethinavel Pillai的说法，如果在FlowLayout中添加视图，则FlowLayout将会按预期工作。

代码片段：

FlowLayout 的功能如预期一样，在其中添加视图，它会自行适应。

<com.FlowLayout
            android:id="@+id/chips_box_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="start"
             >
</com.FlowLayout>

---

FlowLayout chipsBoxLayout;
chipsBoxLayout = (FlowLayout)findViewById(R.id.chips_box_layout);


FlowLayout.LayoutParams params = new FlowLayout.LayoutParams(FlowLayout.LayoutParams.WRAP_CONTENT, FlowLayout.LayoutParams.WRAP_CONTENT);
params.setMargins(5, 5, 5, 5);

Iterator<Contact> iterContacts = contacts.iterator();
while(iterContacts.hasNext()) 
{   
  Contact contact = iterContacts.next();
  TextView t = new TextView(MainActivity.this);
  t.setLayoutParams(params);
  t.setPadding(5, 5, 5, 5);
  t.setText(contact.getContactName());
  t.setTextColor(Color.WHITE);
  t.setBackgroundColor(Color.BLUE);
  chipsBoxLayout.addView(t);
}

- Vikalp Patel

---

这种布局在滚动视图/回收视图中效果不佳，添加的元素无法显示。https://github.com/ApmeM/android-flowlayout 在这种情况下效果更好。 - Ashwini Shahapurkar

Answer 2

你使用了LinearLayout，但Google不使用它。LinearLayout将不会换行，并且会将所有内容输出到一行中。

Gmail中的Chips在普通的textView中工作。它使用可跨度字符串（spannable string）来输出图像而非文本、背景色或其他内容。

请参见这里，其中包含其工作原理的代码。

- Alexander Mikhaylov

---

谢谢！这是一种好方法！但是我需要比那更简单的解决方案。 - Vikalp Patel

好的，请阅读这篇文章：http://www.kpbird.com/2013/02/android-chips-edittext-token-edittext.html。虽然有很多代码，但你可以在那里了解如何在你的情况下实现它。 - Alexander Mikhaylov

如果这个答案解决了你的问题，请不要忘记将其标记为解决方案 =) - Alexander Mikhaylov

Answer 3

FlowLayout是可行的，可以在下面给出的URL中找到：

https://github.com/ApmeM/android-flowlayout

@Rethinavel Pillai是正确的。

- sais

Answer 4

有一种名为Chips的组件实现了Material Design：

Definition: material.io/design/components/chips.html#input-chips

Android组件库: material.io/develop/android/components/chip

- Francis

Answer 5

我认为问题在于你使用了

android:layout_width="match_parent"

怎么样，你考虑使用权重总和代替…？

- user3481961

Answer 6

尝试这样做： 使用权重属性： 我在我的应用程序中使用了它，它工作得很好，而且非常有用，可以节省时间。

<LinearLayout
    android:id="@+id/lLListImages"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true"
    android:orientation="horizontal"
    android:weightSum="1" >

    <Button
        android:id="@+id/button1"
        android:layout_width="0dip"
        android:layout_height="wrap_content"
        android:layout_weight="0.30"
        android:text="Button" />

    <Button
        android:id="@+id/button2"
        android:layout_width="0dip"
        android:layout_height="wrap_content"
        android:layout_weight="0.20"
        android:text="Button" />

    <Button
         android:layout_width="0dip"
        android:layout_height="wrap_content"
        android:layout_weight="0.35"
        android:text="Button" />

    <Button
         android:layout_width="0dip"
        android:layout_height="wrap_content"
        android:layout_weight="0.15"
        android:text="Button" />
</LinearLayout>

- Engr Waseem Arain

---

只要在XML中嵌入WeightSum，我都同意使用它。我试图在那个从互联网获取的LinearLayout中添加标签，但是我对它一无所知。 - Vikalp Patel

这不是导致投票下降的原因，这是我的独立工作，不是从互联网上复制的。 - Engr Waseem Arain

这是错误的答案。线性布局不会换行，也不会将子元素绘制在多行上。 - Alexander Mikhaylov

@EngrWaseemArain，文本数量不固定，这就是为什么有人会对您的答案进行投票，因为它完全浪费时间。 - duggu

为什么要取消踩？你的解决方案是错误的。它不能解决问题。你建议使用linearlayout，但是linearlayout有另一种行为。你没有帮助，反而让人浪费时间去尝试你的“解决方案”。 - Alexander Mikhaylov