Блог

Я пробовал искать так хорошо, как мог, но я даже не знаю правильных ключевых слов. Я хочу эффект, подобный приведенному ниже скриншоту при выборе нескольких объектов.

Идея состоит в том, чтобы легко увидеть, кто выбран, и просто нажать «x», чтобы удалить из выбора. Я не знаю, существует ли такой компонент уже или мне нужно создать его вручную, и если да, то я понятия не имею, как это сделать. Самое близкое, что у меня есть, — это список с несколькими вариантами выбора, но в идеале это не то, что я хочу.

Google называет этот тип доступности пользовательского интерфейса фишкой.

https://material.google.com/components/chips.html

Контейнер, который вам, скорее всего, понадобится для ваших чипов, — это FlowLayout .

Проблема в том, что у Google нет готовых компонентов для их реализации.

Вот как я сделал свои фишки:

/res/drawable/chip_background.xml:

 <?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/translucent_gray"/>
    <corners android:radius="16dp"/>
</shape>
  

/res/layout/chip.xml

 <?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="32dp"
    android:orientation="horizontal"
    android:gravity="center_vertical"
    android:layout_marginLeft="4dp"
    android:layout_marginRight="4dp"
    android:layout_marginTop="2dp"
    android:layout_marginBottom="2dp"
    android:background="@drawable/chip_background">

    <TextView
        android:id="@ id/title"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:gravity="center_vertical"
        android:maxLines="1"
        android:ellipsize="end"
        android:textSize="13sp"
        android:textColor="@android:color/white"
        tools:text="Sample Text"/>

    <ImageButton
        android:id="@ id/removeButton"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:background="@null"
        android:alpha=".8"
        android:scaleType="fitCenter"
        android:padding="7dp"
        android:src="@drawable/ic_cancel_white_24dp"/>

</LinearLayout>
  

Тип заполнения и масштаба на кнопке удаления немного уменьшает значок 24dp, чтобы он хорошо вписался в овал чипа.

Для a FlowLayout вы можете найти в GitHub «Android FlowLayout» и найти библиотеку для использования.

Вы могли бы попробовать решение с использованием my ChipsLayoutManager для RecyclerView . С его помощью для решения вашей проблемы вам просто нужно создать адаптер с прослушивателем удаления (как вы могли сделать для любого другого типа LayoutManager ) и элементами.

 ChipsLayoutManager chipsLayoutManager = ChipsLayoutManager.newBuilder()
    .build();
recyclerView.setLayoutManager(chipsLayoutManager);
//your adapter
adapter = new RecyclerViewAdapter(items, onRemoveListener);
  

в прослушивателе просто удалите удаленный элемент из списка элементов и обновите адаптер

 private OnRemoveListener onRemoveListener = new OnRemoveListener() {
    @Override
    public void onItemRemoved(int position) {
        items.remove(position);
        adapter.notifyItemRemoved(position);
    }
};
  

Элемент будет удален с анимацией.