将波纹效果添加到 RecyclerView 项目

Posted 2023-02-22

【中文标题】将波纹效果添加到 RecyclerView 项目

【英文标题】：Adding Ripple Effect to RecyclerView item

【发布时间】：2015-09-05 01:37:22

【问题描述】：

我正在尝试将波纹效果添加到 RecyclerView 的项目。我在网上看了一下，但找不到我需要的东西。我认为它必须是自定义效果。我已尝试将 android:background 属性设置为 RecyclerView 本身并将其设置为“？android:selectableItemBackground”，但它不起作用。：

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

这是我尝试添加效果的 RecyclerView：

【问题讨论】：

我重新打开这个不是this question的副本。尽管解决方案可能相似，但在该问题中具有CardView 的某些方面与这个更一般的问题无关。

@Suragch 感谢您注意到不同之处:)

【参考方案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_
    android:layout_
    android:paddingTop="8dp"
    android:paddingBottom="8dp"
    android:background="?android:attr/selectableItemBackground"
    tools:background="@drawable/bg_gradient">

    <TextView
        android:layout_
        android:layout_
        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_
        android:layout_
        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"

【讨论】：

如果根元素是 CardView 怎么办？

@SpiderMan 您应该在相对或线性布局中编写代码，然后将其放在卡片布局中。

@pronoobsanved，这对我有帮助！对于那些仍然面临问题的人，CardView 将单个布局作为子项。对于那个孩子，将可点击、可聚焦设置为 true 并将背景设置为 ?attr/selectedableItemBackground

@NabinKhadka 对于 CardView 将其设置为前景，即android:foreground="?android:attr/selectableItemBackground"

我还必须添加选项 android:clickable="true" 才能完成这项工作

【参考方案2】：

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

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

但是，如果您正在使用此方法体验problems，或者您想要更好地控制颜色，那么您可以执行以下操作。

自定义波纹效果

此答案以this simple Android RecyclerView example 开头。如下图所示。

为 pre 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，然后点击 >> 按钮并为 Platform API 级别写 21强>。现在单击确定并粘贴以下代码。

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"

在我们开始使用的example project 中，它看起来像这样：

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

    <TextView
        android:id="@+id/tvAnimalName"
        android:layout_
        android:layout_
        android:textSize="20sp"/>

</LinearLayout>

完成

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

【讨论】：

如果你想要一个默认的背景颜色，只需删除 'android:id="@android:id/mask' 行，然后将 drawable 的颜色设置为你想要的任何颜色。

【参考方案3】：

我认为遗漏了一个小细节。

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

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

这些将确保视图是可点击的，并使用上面提到的 background 属性启用涟漪效果

【参考方案4】：

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

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

【参考方案5】：

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

some_view.xml

<ImageView
   android:layout_
   android:layout_
   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>

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

【参考方案6】：

使用按钮样式

这对我非常有用。

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

<androidx.constraintlayout.widget.ConstraintLayout
    style="@android:style/Widget.Material.Button.Borderless"
    android:layout_
    android:layout_>

【讨论】：

@ededede 您可以使用 min-height、max-height、width...XML 属性来调整它以适应您的喜好。