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


108

Я пытаюсь добавить эффект пульсации в элемент RecyclerView. Я поискал в Интернете, но не смог найти то, что мне нужно. Я предполагаю, что это должен быть индивидуальный эффект. Я попробовал атрибут android: background для самого 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, к которому я пытаюсь добавить эффект:

введите описание изображения здесь


1
Я снова открываю это как не дубликат этого вопроса . Хотя решения могут быть схожими, CardViewв этом вопросе есть определенные аспекты, которые не относятся к этому более общему вопросу.
Suragch

@Suragch Спасибо, что заметили разницу :)
Георгий Коэмджиев 07

Ответы:


225

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

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>

Результат:

введите описание изображения здесь

Если вы по-прежнему не видите эффект пульсации, добавьте эти строки также в корневой элемент макета.

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

3
Что, если корневым элементом является CardView?
Набин

7
@SpiderMan Вы должны написать свой код в относительном или линейном макете, а затем поместить его в макет карты.
SanVed 03

7
@pronoobsanved, это мне помогло! Для тех, кто все еще сталкивается с проблемой, CardView принимает в качестве дочернего элемента один макет. Для этого ребенка, установленного Clickable, фокусируемого как истинный и фона , как атр / selectedableItemBackground?
Vamsi Challa

42
@NabinKhadka для CardView вместо этого установил его в качестве переднего плана, то естьandroid:foreground="?android:attr/selectableItemBackground"
Lorne Laliberte

6
Я должен был добавить возможность android:clickable="true"также сделать эту работу
Хоакин Юрчук

71

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

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

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

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

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

Пример эффекта пульсации гифка

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

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

Щелкните res/drawableпапку правой кнопкой мыши и выберите « Создать»> «Файл ресурсов с возможностью рисования» . Назови это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цвет выделения для нажатого состояния, потому что он уже был доступен, но вы можете определить любой цвет, который хотите.

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

Щелкните res/drawableпапку правой кнопкой мыши и выберите « Создать»> «Файл ресурсов с возможностью рисования» . Назови это custom_rippleснова. Но на этот раз пока не нажимайте ОК. Из Доступных отборочного списка выберите версию , затем нажмите >> кнопку и запись 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 за помощь.


Если вы хотите иметь цвет фона по умолчанию, просто удалите строку 'android: id = "@ android: id / mask', а затем установите любой цвет рисунка, какой захотите.
Джордан Хохстетлер,

26

Думаю, упускается одна маленькая деталь.

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

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

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


5

добавьте эти строки в корневое представление xml вашего адаптера

android:background="?attr/selectableItemBackground"
android:clickable="true"
android:focusable="true"

2

Простой и индивидуальный подход - установить тему представления, как описано здесь .

some_view.xml

<ImageView
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:background="?attr/selectableItemBackgroundBorderless"
   android:focusable="true"
   android:src="@drawable/up_arrow"
   android:theme="@style/SomeButtonTheme"/>

some_style.xml

<style name="SomeButtonTheme" >
   <item name="colorControlHighlight">@color/someColor</item>
</style>

Другие пользовательские реализации можно найти здесь .


1

Использование стиля кнопки

Это работало для меня бесчисленное количество раз.

Добавьте стиль кнопки без полей к корневому элементу макета. Нет необходимости в атрибутах focusableили clickable, стиль по умолчанию инкапсулирует все это за вас.

<androidx.constraintlayout.widget.ConstraintLayout
    style="@android:style/Widget.Material.Button.Borderless"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

@ededede Вы можете использовать атрибуты XML min-height, max-height, width ..., чтобы настроить их на свой вкус.
Феликс Фавор Чинемерем
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.