web-dev-qa-db-fra.com

Ajout d'effet d'ondulation à l'objet RecyclerView

J'essaie d'ajouter Ripple Effect à l'article de RecyclerView. J'ai regardé en ligne, mais je n'ai pas trouvé ce dont j'avais besoin. Je suppose que cela doit être un effet personnalisé. J'ai essayé Android: attribut d'arrière-plan à RecyclerView lui-même et réglez-le sur "? Android: selectableItemBackground", mais cela n'a pas fonctionné.:

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

C'est le RecyclerView que j'essaye d'ajouter l'effet à:

enter image description here

androidandroid-animationandroid-recyclerview
77
Georgi Koemdzhiev

J'ai réalisé. La seule chose à faire est d'ajouter cet attribut:

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

à l'élément racine de la présentation que mon adaptateur RecyclerView gonfle comme ceci:

<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>

Résultat:

enter image description here

165
Georgi Koemdzhiev

Comme déjà répondu, la solution la plus simple consiste à ajouter l’un des éléments suivants au fond de votre ligne RecyclerView:

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

Toutefois, si vous rencontrez problèmes avec cette méthode ou si vous souhaitez un contrôle plus précis des couleurs, vous pouvez procéder comme suit.

Effet d'ondulation personnalisé

Cette réponse commence par this simple Android Exemple de RecyclerView . Cela ressemblera à l'image suivante.

Ripple effect example GIF

Ajouter un sélecteur pour les périphériques pré API 21

Avant API 21 (Android 5.0 Lollipop), un clic sur un élément RecyclerView venait de changer sa couleur d’arrière-plan (aucun effet d’ondulation). C'est ce que nous allons faire aussi. Si vous avez encore des utilisateurs avec ces appareils, ils sont habitués à ce comportement, nous ne nous en inquiétons donc pas trop. (Bien sûr, si vous voulez vraiment l'effet d'entraînement pour eux aussi, vous pouvez utiliser une bibliothèque personnalisée .)

Faites un clic droit sur votre res/drawable dossier et choisissez Nouveau> Fichier de ressources pouvant être dessiné . Appeler custom_ripple. Cliquez sur OK et collez le code suivant.

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>

J'ai utilisé colorAccent comme couleur de surbrillance pour l'état pressé car il était déjà disponible, mais vous pouvez définir la couleur de votre choix.

Ajouter un effet d'entraînement pour les périphériques API 21+

Faites un clic droit sur votre res/drawable dossier et choisissez Nouveau> Fichier de ressources pouvant être dessiné . Appeler custom_ripple encore. Ne cliquez pas sur OK, mais cette fois encore. Dans la liste des qualificateurs disponibles , choisissez Version , puis cliquez sur le bouton >> et écrivez 21 pour le niveau de l’API de la plate-forme . Maintenant, cliquez sur OK et collez le code suivant.

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>

Encore une fois, j’ai utilisé colorAccent pour la couleur d’ondulation car elle était disponible, mais vous pouvez utiliser la couleur de votre choix. Le masque limite l’effet d’ondulation à la disposition des lignes. La couleur du masque apparemment peu importe alors je viens d'utiliser un blanc opaque.

Définir comme arrière-plan

Dans la disposition racine de votre élément RecyclerView, définissez l'arrière-plan sur l'ondulation personnalisée que nous avons créée.

Android:background="@drawable/custom_ripple"

Dans le exemple de projet avec lequel nous avons commencé, cela ressemble à ceci:

<?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>

Fini

C'est ça. Vous devriez pouvoir exécuter votre projet maintenant. Merci à cette réponse et cette vidéo YouTube à l’aide.

49
Suragch

Je pense qu'il y a un petit détail qui manque.

Si vous n'obtenez toujours pas l'effet d'entraînement après avoir ajouté Android:background="?android:attr/selectableItemBackground" essayez d’ajouter les lignes suivantes à la racine de la présentation.

Android:clickable="true"
Android:focusable="true"

Cela garantira que la vue est cliquable et activera l'effet d'entraînement avec l'attribut background mentionné ci-dessus.

17
Sriram R