java 在图像视图上设置波纹效果

Set ripple effect on Image View

提问by Jjang

Got the following 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 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:

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

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

This is my ripple.xml:

这是我的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. Changing android:background to android:foreground, which didn't work.
2. Configuring another transparent ImageView on top of this one, but since it was transparent ripple wasn't shown.

1. 将 android:background 更改为 android:foreground，这不起作用。
2. 在这个之上配置另一个透明的 ImageView，但由于它是透明的波纹没有显示。

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

有任何想法吗？我已经看到 Lollipop Contacts 也做了这个。

回答by Albert Vila Calvo

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

我有一个图片库（用 aRecyclerView和 a构建GridLayoutManager）。图像是使用毕加索设置的。为了给图像添加涟漪，我ImageView用FrameLayout. 项目布局是：

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

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

注意android:foreground. 它与android:background. 我试过没有android:clickable="true"并且android:focusable="true"它也有效，但没有伤害。

Then add a ripple.xmldrawable into res/drawable:

然后添加一个ripple.xmldrawable到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>

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.

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). 如果你不想要它，你可以删除它。

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

然后将ripple.xml带有涟漪的drawable添加到res/drawable-v21：

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

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:

您可以使用默认的涟漪效果而不是 custom ripple.xml，但在图像顶部很难看到，因为它是灰色的：

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

回答by Gabriele Mariotti

You can achieve it,wrapping the drawable in a RippleDrawable.

您可以实现它，将可绘制对象包装在 RippleDrawable 中。

ImageView iv=((ImageView)rootView.findViewById(R.id.header));
Drawable image = .... // your image.

RippleDrawable rippledImage = new   
         RippleDrawable(ColorStateList.valueOf(rippleColor), image, null);
iv.setImageDrawable(rippledImage)

;

;

回答by amalBit

For lazy people like me:

对于像我这样的懒人：

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

And customize the ripple color in your style.

并根据您的风格自定义波纹颜色。

in values/styles.xml

在 values/styles.xml 中

<style name="colorControlHighlight_blue">
   <item name="colorControlHighlight">@color/main_blue_alpha26</item>
</style>

Then, in your fragment before inflation in onCreateView():

然后，在 onCreateView() 膨胀之前的片段中：

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
   getContext().getTheme().applyStyle(R.style.colorControlHighlight_blue, true); //blue ripple color
   View view = inflater.inflate(R.layout.my_fragment_layout, container, false);
   return view;
}

回答by álvaro Agüero

With a circular effect try this :

使用圆形效果试试这个：

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:color="@color/colorTema3"
tools:targetApi="lollipop">
<item android:id="@android:id/mask">
    <shape android:shape="rectangle">
        <solid android:color="@color/colorPurpleBarra" />
    </shape>
</item>
<item
    android:id="@android:id/background"
    android:drawable="@android:color/transparent" />