web-dev-qa-db-ja.com

Android AutoCompleteTextView with chip

このUI機能に適切な言葉を使っているかどうかはわかりませんが、アプリで実現しようとしているもののスナップショットを添付しました。

これはGo SMSで使用され、ユーザーが編集テキストに連絡先を入力します。ユーザーが完了ドロップダウンから連絡先を選択すると、添付画像に示されているように、連絡先が編集テキストに挿入されます。編集テキストは引き続き開いています。さらに入力を受け入れます。

私のアプリでは、StackOverflowのタグ入力が機能するのと同じように、ユーザーがカンマを入力したらすぐにグループ化と挿入を行いたいと思います（ただし、それだけで処理できると思います）。これは、ビューの種類です。または、このように動作するようにEditTextを変更するにはどうすればよいですか？

EditText with Grouped Values

ありがとう。

javaandroidandroid-edittext
25
nmvictor

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

21
Scott Kennedy

さらに2つのチップライブラリ。

  • Androidチップ 。他のいくつかとは異なり、これは新しくリリースされた「マテリアルデザイン」を反映するビジュアルを持つように更新されます 標準 。

    enter image description here

  • トークンの自動完了 。これはAndroid Gmailスタイルトークンのオートコンプリートテキストフィールドとフィルターです。

    enter image description here
    enter image description here

14
naXa

更新：

それを行う公式の方法は、現在、Chips Material Componentを介して行われています。

https://material.io/components/chips/

https://material.io/develop/Android/components/chip/

https://medium.com/material-design-in-action/chips-material-components-for-Android-46001664a40f

古い回答：

Chipsライブラリを探しています。

11
M-WaJeEh

RecyclerビューとEdit textまたはAuto complete textビューで独自のチップビューを構築できると思います。そのため、簡単にカスタマイズできます。

（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"/>

。アクティビティレイアウトでは、タグを維持するために編集テキストのすぐ上にウィジェットリサイクラービューを実装し、タグを入力するためにテキストまたはオートコンプリートテキストビューを編集します。

   <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。マニフェストファイルにはgradlesを含める必要があります

implementation 'com.Android.support:recyclerview-v7:27.1.1'
implementation 'com.google.Android:flexbox:1.0.0'
2
Rejsal

Androidサポートライブラリバージョン28.0.0から開始Googleがレイアウトにチップビューを表示できるようにする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
Volodymyr

新しい ライブラリ Android Material Chips！

1
Alex

たくさん変わった。新しいライブラリがあります。 このライブラリ をお勧めします。とても簡単で強力です。

この依存関係を追加するだけです

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)
0
M. Usman Khan