Question

我不确定我是否正在使用这个用户界面功能的正确字词，但我附上了我希望在我的应用中实现的快照。

由Go SMS使用，其中用户在编辑文本中键入联系人，在用户从完成下拉列表中选择联系人后，联系人将插入编辑文本中，如附图中所示。编辑文本为仍然愿意接受进一步的投入。

对于我的应用程序，我想在用户输入逗号后立即进行分组和插入，就像StackOverflow的Tag输入一样（但我相信我可以单独处理它。）我的问题是什么样的视图是这个或如何修改EditText以表现这样？

EditText with Grouped Values

感谢。

Answer 1

来自Google的官方筹码库（用于Gmail，电子邮件，日历，消息）位于https://android.googlesource.com/platform/frameworks/opt/chips/

可以在https://code.google.com/p/platform-features-talk-io-2013/source/browse/src/com/example/iotalk/ChipsActivity.java

找到如何使用它的简单示例

Answer 2

另外两个芯片库。

Android Chips。与其他一些不同，这个更新为具有反映新发布的“Material Design”standard的视觉效果。
Token Auto Complete。它是Android Gmail样式令牌自动完成文本字段和过滤器。

Answer 3

您正在寻找筹码库。

这是一个https://github.com/kpbird/chips-edittext-library
另一个与Roman Nurik https://plus.google.com/+RomanNurik/posts/WUd7GrfZfiZ的联系人合作的图书馆

Answer 4

Android Material Chips有一个新的library！

Answer 5

我认为我们可以使用“回收者”视图和“编辑文本”或“自动完成文本”视图来构建自己的芯片视图。这样我们就可以轻松自定义它。

1。在Drawable中创建了一个标签形状，例如tags_layout.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#cfcfcf">
</solid>
<corners android:radius="20dp">
</corners>

2。为回收者视图创建了一个布局

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:layout_margin="4dp"
android:gravity="center"
android:background="@drawable/tags_layout">
<TextView
    android:id="@+id/tag_textView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:maxLines="1"
    android:maxLength="25"
    android:ellipsize="end"
    android:padding="2dp"
    android:text="Hello"/>
<ImageView
    android:id="@+id/tag_closeBtn"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_close"/>

3。在我们的活动布局中，我们在编辑文本上方保留小部件回收器视图以保留标签，然后在编辑文本或“自动完成文本”视图上方输入标签。

   <android.support.v4.widget.NestedScrollView
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
<android.support.v7.widget.RecyclerView
    android:id="@+id/tagsRecyclerView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">
</android.support.v7.widget.RecyclerView>
        <EditText
            android:id="@+id/tagsEditText"
            android:inputType="text"
            android:imeOptions="actionDone"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
    </LinearLayout>
</android.support.v4.widget.NestedScrollView>

4。为回收者视图创建了一个模型Java类

        public class RecyclerModel {
    private String tagText;

    public RecyclerModel(String tagText){
        this.tagText = tagText;
    }
    public String getTagText() {
        return tagText;
    }

    public void setTagText(String tagText) {
        this.tagText = tagText;
    }
}

5。回收站视图的适配器类

    public class RecyclerAdapter extends RecyclerView.Adapter<RecyclerAdapter.RecyclerAdapterHolder> {
    Context context;
    ArrayList<RecyclerModel> model = new ArrayList<>(  );

    public RecyclerAdapter(Context context,ArrayList<RecyclerModel> model){
        this.context = context;
        this.model = model;
    }

    @NonNull
    @Override
    public RecyclerAdapterHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View itemView = LayoutInflater.from(parent.getContext())
                .inflate(R.layout.recycler_layout, parent, false);

        return new RecyclerAdapterHolder(itemView);
    }

    @Override
    public void onBindViewHolder(final RecyclerAdapterHolder holder, final int position) {
        final RecyclerModel mod = model.get( position );
        holder.tagTextView.setText( mod.getTagText() );
        //remove tag on click x button
        holder.tagImageView.setOnClickListener( new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                model.remove( position );
                notifyDataSetChanged();
            }
        } );
    }

    @Override
    public int getItemCount() {
        return model.size();
    }

    public static class RecyclerAdapterHolder extends RecyclerView.ViewHolder {
        public TextView tagTextView;
        public ImageView tagImageView;
        public RecyclerAdapterHolder(View itemView) {
            super( itemView );
            tagTextView = itemView.findViewById( R.id.tag_textView );
            tagImageView = itemView.findViewById( R.id.tag_closeBtn );
        }
    }
}

6。最后，在我们的活动中，通过在编辑文本中输入数据将数据添加到回收站中

public class MainActivity extends AppCompatActivity {
    RecyclerView tagsRecyclerView;
    EditText tagsEditText;
    ArrayList<RecyclerModel> recyclerModels = new ArrayList<>(  );

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate( savedInstanceState );
        setContentView( R.layout.activity_main );
        tagsRecyclerView = findViewById( R.id.tagsRecyclerView );
        tagsEditText = findViewById( R.id.tagsEditText );
        tagsEditText.setOnEditorActionListener( new TextView.OnEditorActionListener() {
            @Override
            public boolean onEditorAction(TextView v, int actionId, KeyEvent event) {
                if (actionId == EditorInfo.IME_ACTION_DONE) {
                    Toast.makeText( MainActivity.this,"hello",Toast.LENGTH_SHORT );
                    String str = tagsEditText.getText().toString();
                    if(str != null && !str.equals( "" )) {
                        getUpdateData( str );
                        tagsEditText.setText( null );
                        RecyclerAdapter adapter = new RecyclerAdapter( MainActivity.this, recyclerModels );
                        FlexboxLayoutManager gridLayout = new FlexboxLayoutManager( MainActivity.this );
                        tagsRecyclerView.setLayoutManager( gridLayout );
                        tagsRecyclerView.setAdapter( adapter );
                    }
                }
                return false;
            }
        } );
    }

    private void getUpdateData(String str) {
        RecyclerModel model = new RecyclerModel( str );
        recyclerModels.add( model );
    }
}

7。清单文件应包含等级

implementation 'com.android.support:recyclerview-v7:27.1.1'
implementation 'com.google.android:flexbox:1.0.0'

Answer 6

从android支持库版本28.0.0开始，Google添加了Chip视图，该视图允许我们在布局中显示芯片视图。 Design and documentation about Chip

一个简单的例子：

<android.support.design.chip.ChipGroup
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="16dp"
    app:chipSpacing="8dp">

    <android.support.design.chip.Chip
        android:id="@+id/some_chip"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Android Chip Group"
        app:chipIcon="@drawable/ic_android"
        app:closeIconVisible="true" />

    <android.support.design.chip.Chip
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Android"
        app:chipIcon="@drawable/ic_android" />

    <android.support.design.chip.Chip
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Chip"
        app:chipIcon="@drawable/ic_android" />

    <android.support.design.chip.Chip
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Group"
        app:chipIcon="@drawable/ic_android" />
</android.support.design.chip.ChipGroup>

Answer 7

很多变化。我们有新的图书馆。我会推荐this library。它非常简单而且功能强大。

只需添加此依赖项

implementation "com.hootsuite.android:nachos:1.1.1"

和此视图

<com.hootsuite.nachos.NachoTextView
    android:id="@+id/nacho_text_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:chipHorizontalSpacing="2dp"
    app:chipBackground="@color/chip_background"
    app:chipTextColor="@color/cheddar"
    app:chipTextSize="16dp"
    app:chipHeight="30dp"
    app:chipVerticalSpacing="3dp"/>

和此适配器：

val suggestions = arrayOf("Tortilla Chips", "Melted Cheese", "Salsa", "Guacamole", "Mexico", "Jalapeno")
val adapter = ArrayAdapter(context, android.R.layout.simple_dropdown_item_1line, suggestions)
nachoTextView.setAdapter(adapter)

带有芯片的Android AutoCompleteTextView

7 个答案: