在图像视图上设置涟漪效果 [英] Set ripple effect on Image View

问题描述

获得以下图片视图：

<ImageView
    android:id="@+id/header"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    android:scaleType="centerCrop"
    app:layout_collapseMode="parallax" 
    android:clickable="true"
    android:focusable="true"
    android:background="?android:attr/selectableItemBackground"/>

如果我没有在图像视图中设置位图，则Ripple效果很好。但是一旦我设置了这样的位图，涟漪效应就消失了：

Ripple works great if I don't set a bitmap to the image view. But once I set a bitmap like this, ripple effect is gone:

ImageView iv=((ImageView)rootView.findViewById(R.id.header));
iv.setImageBitmap(myBitmap);

这是我的ripple.xml：

This is my ripple.xml:

<ripple xmlns:android="http://schemas.android.com/apk/res/android" 
                  android:color="?android:colorControlHighlight">
    <item android:id="@android:id/mask">
        <shape android:shape="oval">
            <solid android:color="?android:colorAccent" />
        </shape>
    </item>
</ripple>

我想位图隐藏了涟漪效应，我怎样才能看到它？已经尝试过了：

I guess that the bitmap hides the ripple effect, how can I make it visible? Already tried:

1. 将android：background更改为android：前景，这不起作用。


2. 在这一个上面配置另一个透明的ImageView，但因为它是透明的，所以没有显示纹波。

有什么想法吗？我见过Lollipop Contacts也是这样做的。

Any ideas? I've seen Lollipop Contacts made this as well.

推荐答案

我有一个图片库（用 RecyclerView 和 GridLayoutManager ）。使用Picasso设置图像。为图像添加纹波我用 FrameLayout 包装 ImageView 。项目布局为：

I have an image gallery (built with a RecyclerView and a GridLayoutManager). The image is set using Picasso. To add a ripple to the image I've wrapped the ImageView with a FrameLayout. The item layout is:

<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="120dp"
    android:foreground="@drawable/ripple"
    android:clickable="true"
    android:focusable="true"
    >
    <ImageView
        android:id="@+id/grid_item_imageView"
        android:layout_width="match_parent"
        android:layout_height="120dp"
        android:layout_gravity="center"
        android:scaleType="centerInside"
        />
</FrameLayout>

注意 android：前景 即可。它与 android：background 不同。我试过没有 android：clickable =true和 android：focusable =true并且也可以，但它不会受到伤害。

Note the android:foreground. It's not the same as android:background. I've tried without android:clickable="true" and android:focusable="true" and it also works, but it doesn't hurt.

然后添加 ripple.xml 可绘制到 res / drawable ：

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <shape android:shape="rectangle">
            <solid android:color="#7FF5AC8E" />
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle">
            <solid android:color="@android:color/transparent" />
        </shape>
    </item>
</selector>

请注意，当选择项目时，这会在图像顶部显示半透明颜色（对于版本低于Android 5.0的设备。如果您不想要，可以将其删除。

Note that this shows a semi-transparent color on top of the image when the item is selected (for devices with version older than Android 5.0). You can remove it if you don't want it.

然后将 ripple.xml drawable与ripple一起添加到 res / drawable-v21 ：

Then add the ripple.xml drawable with ripple into res/drawable-v21:

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
        android:color="@color/coral">
</ripple>

您可以使用默认的涟漪效应而不是自定义 ripple.xml ，但是很难在图像上看到，因为它是灰色的：

You can use the default ripple effect instead of the custom ripple.xml, but it's really difficult to see on top of an image because it's grey:

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

这篇关于在图像视图上设置涟漪效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！