为 RecyclerView 项目添加波纹效果

Question

我正在尝试为 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：

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

结果：

如果您仍然看不到波纹效果，请将这些行也添加到布局的根元素中。

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

Answer 2

正如已经回答的那样，最简单的解决方案是仅添加以下内容之一作为您的 RecyclerView 行的背景：

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

但是，如果您遇到 problems 使用此方法或想要更好地控制颜色，则可以执行以下操作。

自定义涟漪效果

此答案以开头。它将如下图所示。

为 API 21 台设备添加选择器

在 API 21 (Android 5.0 Lollipop) 之前，单击 RecyclerView 项目只会更改其背景颜色（无波纹效果）。这也是我们要做的。如果你仍然有用户使用这些设备，他们已经习惯了这种行为，所以我们不会太担心他们。（当然，如果你真的想要他们也有涟漪效应，你可以使用custom library。）

右键单击您的 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。不过这次不要单击“确定”。从 Available qualifiers 列表中选择 Version，然后单击 >> 按钮并写入 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 作为波纹颜色，因为它可用，但您可以使用任何您想要的颜色。掩码将涟漪效应限制在行布局中。面具颜色显然 doesn't matter 所以我只使用了不透明的白色。

设为背景

在您的 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>

完成

就是这样。您现在应该可以运行您的项目了。感谢 and this YouTube video 的帮助。

Answer 3

我觉得漏掉了一个小细节。

如果在添加 android:background="?android:attr/selectableItemBackground" 后仍然没有得到涟漪效果，请尝试在布局的根目录中添加以下这些行。

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

这些将确保视图是可点击的，并将启用带有上述 background 属性的涟漪效果

Answer 4

在您的适配器中添加此行 xml 根视图

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

Answer 5

一种简单的自定义方法是设置视图主题 here。

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>

可以找到其他自定义实现。

Answer 6

使用按钮样式

这对我有用无数次。

将无边框按钮样式添加到布局的根元素。不需要 focusable 或 clickable 属性，默认样式为您封装了所有这些。

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

为 RecyclerView 项目添加波纹效果

Adding Ripple Effect to RecyclerView item

android

android-animation

android-recyclerview