Android带有标签的自动完成文本框

28

我不确定是否使用了正确的单词来描述这个UI特性,但是我附上了一个截图,展示了我在我的应用程序中想要实现的功能。

它被 Go SMS 使用,用户在编辑文本中输入联系人,当用户从完成下拉列表中选择联系人时,联系人会像所附图像中显示的那样插入到编辑文本中。编辑文本仍然处于打开状态以接受进一步的输入。

对于我的应用程序,我希望在用户输入逗号时立即进行分组和插入,就像StackOverflow的标签输入一样(但我相信我可以独自处理这个问题)。我的问题是这种视图是什么或者如何修改EditText以像这样运行?

EditText with Grouped Values

谢谢。

7个回答

20

@ScottKennedy 如何将芯片导入到Android Studio? - Bhargav
@ScottKennedy 如何将芯片导入Android Studio作为当前项目的库,以及如何使用这个库? - Bhargav

14

又有两个 Chips 库。

  • Android Chips。与其他一些库不同的是,该库已更新以反映最新发布的“Material Design”标准所体现的视觉效果。

    图片描述

  • Token Auto Complete。它是一种 Android Gmail 风格的令牌自动完成文本框和过滤器。

    图片描述
    图片描述


谢谢,这很简单且实用。 - Akhilesh Mani
组件采用Apache2许可证,这是否意味着如果我使用它,我也必须开源我的应用程序? - bormat
请至少上传样品/演示APK,以便我们在实际使用之前进行测试。谢谢。 - ralphgabb
1
@ralphspoon 一个处于困境中的人就是那个必须要逗笑的人 =) 这两个代码库都包含示例。克隆代码库,用Android Studio打开,为自己构建一个示例并运行它。 - naXa stands with Ukraine
1
@bormat 我不是律师。请阅读常见问题解答 - naXa stands with Ukraine

11

不错的发现。我会记住这个的。 - SBerg413
我相信那样做就可以了,非常感谢你! - nmvictor

3
I think 我们可以用 Recycler view 和 Edit text 或者 Auto complete text view 来构建自己的芯片视图。这样我们就可以很容易地进行自定义。
1. 创建了一个标签形状,例如 tags_layout.xml 在 Drawable 中。
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#cfcfcf">
</solid>
<corners android:radius="20dp">
</corners>

2. 创建Recycler View的布局

<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. 为 RecyclerView 创建了一个模型 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. 清单文件应包含Gradle版本

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

很好。但是是否可能像上面的图像输出那样同时使用RecyclerView和MultiAutoCompleteTextView? - Aminul Haque Aome
我认为这是可能的。需要尝试在可回收视图中添加EditText,并将其显示为最后一种视图类型。 - Rejsal

1

从 Android 支持库版本 28.0.0 开始,谷歌添加了 Chip 视图,允许我们在布局中显示芯片视图。 关于 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>

enter image description here


1

1
很多事情都发生了变化。我们有新的库。我建议使用这个库。它非常简单而且功能强大。
只需添加这个依赖项。
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)

每个芯片是否有取消选项以取消选择它? - Shyamaly Lakhadive

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接