Подтвердить что ты не робот

Добавление эффекта пульсации в элемент RecyclerView

Я пытаюсь добавить эффект Ripple в элемент RecyclerView. Я смотрел онлайн, но не мог найти то, что мне нужно. Я предполагаю, что это должен быть особый эффект. Я пробовал андроид: фоновый атрибут самому RecyclerView и установил его на "? Android: selectableItemBackground", но это не помогло:

    <android.support.v7.widget.RecyclerView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:focusable="true"
    android:clickable="true"
    android:background="?android:selectableItemBackground"
    android:id="@+id/recyclerView"
    android:layout_below="@+id/tool_bar"/>

Это RecyclerView, к которому я пытаюсь добавить эффект:

enter image description here

4b9b3361

Ответ 1

Я понял. Единственное, что я должен был сделать, это добавить этот атрибут:

android:background="?android:attr/selectableItemBackground"

к корневому элементу макета, который мой адаптер RecyclerView раздувает так:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                xmlns:tools="http://schemas.android.com/tools"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:paddingTop="8dp"
                android:paddingBottom="8dp"
                android:background="?android:attr/selectableItemBackground"
                tools:background="@drawable/bg_gradient">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="17sp"
        android:layout_marginLeft="15dp"
        android:layout_marginStart="15dp"
        android:id="@+id/shoppingListItem"
        android:hint="@string/enter_item_hint"
        android:layout_centerVertical="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"/>

    <CheckBox
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/shopping_list_item_checkbox_label"
        android:id="@+id/shoppingListCheckBox"
        android:layout_centerVertical="true"
        android:layout_marginRight="15dp"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        android:checked="false"/>
</RelativeLayout>

Результат:

enter image description here

Ответ 2

Как уже было сказано, самым простым решением является просто добавить одно из следующего в качестве фона строки RecyclerView:

  • android:background="?android:attr/selectableItemBackground"
  • android:background="?attr/selectableItemBackground"

Однако, если вы испытываете проблемы с этим методом или хотите более тонкого контроля над цветами, вы можете сделать следующее.

Пользовательский эффект пульсации

Этот ответ начинается с этого простого примера Android RecyclerView. Это будет выглядеть следующим образом.

Ripple effect example GIF

Добавить селектор для устройств pre API 21

Перед API 21 (Android 5.0 Lollipop), щелкнув элемент RecyclerView просто изменил свой цвет фона (без эффекта пульсации). Это то, что мы тоже будем делать. Если у вас все еще есть пользователи с этими устройствами, они привыкли к такому поведению, поэтому мы не будем слишком беспокоиться о них. (Конечно, если вам действительно нужен эффект пульсации для них, вы также можете использовать специальную библиотеку.)

Щелкните правой кнопкой мыши папку res/drawable и выберите New> Drawable resource file. Назовите его custom_ripple. Нажмите "ОК" и вставьте следующий код.

custom_ripple.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <shape android:shape="rectangle">
            <solid android:color="@color/colorAccent" />
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle">
            <solid android:color="@android:color/transparent" />
        </shape>
    </item>
</selector>

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

Добавить эффект пульсации для устройств API 21+

Щелкните правой кнопкой мыши папку res/drawable и выберите New> Drawable resource file. Вызовите его custom_ripple раз. Не нажимайте OK, но на этот раз. В списке " Доступные классификаторы" выберите " Версия", затем нажмите кнопку >> и напишите 21 для уровня API платформы. Теперь нажмите "ОК" и вставьте следующий код.

v21/custom_ripple.xml

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/colorAccent">

    <item
        android:id="@android:id/mask"
        android:drawable="@android:color/white" />
</ripple>

Опять же, я использовал colorAccent для цвета пульсации, потому что он был доступен, но вы можете использовать любой цвет, который вы хотите. Маска ограничивает эффект пульсации только макетом строк. Цвет маски, по-видимому, не имеет значения, поэтому я просто использовал непрозрачный белый цвет.

Установить как фон

В вашем корневом макете элемента RecyclerView задайте фон для настраиваемой пульсации, которую мы создали.

android:background="@drawable/custom_ripple"

В примере, с которого мы начали, он выглядит так:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:background="@drawable/custom_ripple"
    android:padding="10dp">

    <TextView
        android:id="@+id/tvAnimalName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="20sp"/>

</LinearLayout>

Законченный

Это. Теперь вы сможете запустить свой проект. Благодаря этому ответу и этому видео на YouTube.

Ответ 3

Я думаю, что есть одна небольшая деталь, которая пропущена.

Если вы все еще не получаете эффект пульсации после добавления android:background="?android:attr/selectableItemBackground" попробуйте добавить следующие строки в корень макета.

android:clickable="true"
android:focusable="true"

Это позволит убедиться, что просмотр является кликабельным и позволит эффект ряби с указанным выше атрибутом фона