添加涟漪效应到回收视图项

我试图添加涟漪效应回收视图的项目。我在网上看了一下，但是找不到我需要的东西。我想这一定是定制的效果。我试过将 android: back 属性设置为“ ？但是它不能工作:

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

这是回收视图，我试图添加的效果:

enter image description here

90599 次浏览
小开
最佳答案

我想出来了，我唯一要做的就是添加这个属性:

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

到布局的根元素，我的回收视图适配器就是这样充气的:

<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

如果你仍然不能看到涟漪效果，添加这些线也到布局的根元素。

android:clickable="true"
android:focusable="true"
小开

如前所述，最简单的解决方案是添加以下内容之一作为 RecyclerView行的背景:

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

但是，如果您正在使用此方法体验 问题，或者希望对颜色进行更精细的控制，则可以执行以下操作。

自定义涟漪效应

这个答案是从 这个简单的 Android 回收视图例子开始的。

Ripple effect example GIF

为前 API 21设备添加选择器

在 API 21(Android 5.0棒棒糖)之前，单击一个 RecyclerView项目只是改变了它的背景颜色(没有涟漪效应)。这也是我们要做的。如果你仍然有用户使用这些设备，他们已经习惯了这种行为，所以我们不会太担心他们。(当然，如果你真的想让它们产生连锁反应，你可以使用 定制图书馆。)

右键单击 res/drawable文件夹并选择 新建 > 可绘制资源文件。将其命名为 custom_ripple。单击 OK 并粘贴以下代码。

自定义 _ 涟漪. 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。但这次不要点击 OK。从 可用的限定词列表中选择 版本，然后单击 >>按钮并为 平台 API 级别写入 21。现在单击 OK 并粘贴以下代码。

V21/custom_ ripe.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的纹路颜色，因为它是可用的，但你可以使用任何颜色你想要的。掩码将涟漪效应仅限于行布局。面具的颜色显然是 无所谓了，所以我只用了一个不透明的白色。

设置为背景

在回收视图项目的根布局中，将背景设置为我们创建的自定义涟漪。

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:background="?android:attr/selectableItemBackground"尝试添加这些行在布局的根。

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

这些将确保视图是可点击的，并将启用与上述 背景属性的涟漪效应

小开

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

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

一种简单的自定义方法是设置一个概述为 给你的视图主题。

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>

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

小开

使用按钮样式

这对我有无数的帮助。

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

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

提交答案