RecyclerView中包含ImageView的项目的涟漪效果

Question

RecyclerView中包含ImageView的项目的涟漪效果

42

我有一个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:layout_marginLeft="@dimen/children_tile_border"
    android:layout_marginTop="@dimen/children_tile_border"
    android:clickable="true"
    android:focusable="true"
    android:background="?selectableItemBackground"
    tools:ignore="RtlHardcoded">

        <com.example.app.ui.widget.SquareImageView
            android:id="@+id/child_picture"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:visibility="visible"
            android:layout_alignParentBottom="true"/>

        <LinearLayout
            android:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="68dp"
            android:background="@color/tile_text_background"
            android:gravity="center_vertical"
            android:layout_alignParentBottom="true">

            ..............
        </LinearLayout>
</RelativeLayout>

但是，只有在我将SquareImageView的可见性设置为不可见时才会出现涟漪效果。似乎涟漪效果是在SquareImageView下面绘制的。我该如何使其在SquareImageView上方绘制？

- Binoy Babu

6个回答

13

更改：

android:background="?selectableItemBackground"

收件人:

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

将这部分内容添加到你的SquareImageView中

android:clickable="false"

- Enzokie

这个对我来说确实有效。我认为当Recyclerview项的核心视图是ImageView时，这是最好的解决方案。 - Aleksandar Stefanović

9

我们可以将RecyclerView项包裹在FrameLayout中，并将android:foreground属性设置为它。请查看以下链接了解详细信息。对我来说效果很不错。

- Sagar Trehan

4

如果您有一个 CardView + ImageView
只需将其插入到 CardView 中

android:focusable="true"
android:foreground="?android:attr/selectableItemBackground"

对于RelativeLayout + ImageView
将其插入到RelativeLayout中

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

或者

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

这段代码对我很有用。

- Mahdi Hossaini

如果使用约束布局和ImageView呢！ - Rucha Bhatt Joshi

1

你的SquareImageView填满了整个空间（width为match_parent，height为wrap_content），因此SquareImageView接收到了点击事件。

在我的情况下有效的方法是将RelativeLayout中所有对象的可点击状态设置为false：

android:clickable="false"

请确保您的RelativeLayout在活动中处理点击事件。在我的代码中，我将RelativeLayout设置为view v，并设置了一个onClick Listener来处理列表项中的CheckBox。

v.setOnClickListener(this);

希望这能帮助到任何阅读它的人。

- Hugo Mulder

1

以上答案是正确的。但我建议使用android:foreground，因为它可以在imageView前显示涟漪效果。

在您的根视图上添加以下内容。

android:foreground="@drawable/ripple_effect_color_primary"
android:clickable="true"
android:focusable="true"

我知道这是对一个很旧的帖子的相当晚的回答。但是谁知道呢，也许有人会发现它有用。

- Sami Adam

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jinu · Accepted Answer

将以下代码添加到您的父布局中。

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

如果你想要自定义涟漪效果，请将ripple_custom.xml添加到你的drawable-v21文件夹中。

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/colorHighlight">

    <item
        android:id="@android:id/mask"
        android:drawable="@color/windowBackground" />
</ripple>

为支持旧版本，请在drawable中添加ripple_custom.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/colorHighlight" />
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle">
            <solid android:color="@android:color/transparent" />
        </shape>
    </item>
</selector>