我一直在尝试与纹波动画在我的最新辅助项目。我有一些麻烦，找到一个优雅的解决方案为触摸事件某些情况下使用它。即以影像，特别是在列表中，网格和回收的意见。动画几乎总是似乎认为后面的动画，而不是在它的上面。这是一个没有问题的按钮和TextViews但如果你有图像的GridView控件，纹波出现后面或实际图像的下方。显然，这不是我想要的，虽然有一些我认为是围绕一个工作的解决方案，我希望能有更简单的东西我只是不知道。

I've been experimenting with the ripple animation in my latest side project. I'm having some trouble finding an "elegant" solution to using it in certain situations for touch events. Namely with images, especially in list, grid, and recycle views. The animation almost always seems to animate behind the view, not the on top of it. This is a none issue in Buttons and TextViews but if you have a GridView of images, the ripple appears behind or below the actual image. Obviously this is not what I want, and while there are solutions that I consider to be a work around, I'm hoping there is something simpler i'm just unaware of.

我用下面的code实现与图像的自定义网格视图。我会充分code 点击此处所以，如果你选择，你可以跟着。

I use the following code to achieve a custom grid view with images. I'll give full code CLICK HERE so you can follow along if you choose.

现在只是重要的东西。为了让我的形象在触摸我需要这个动画

Now just the important stuff. In order to get my image to animate on touch I need this

button_ripple.xml

<ripple
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/cream_background">
    <item>
        <selector xmlns:android="http://schemas.android.com/apk/res/android">
            <!-- Pressed -->
            <item
                android:drawable="@color/button_selected"
                android:state_pressed="true"/>
            <!-- Selected -->
            <item
                android:drawable="@color/button_selected"
                android:state_selected="true"/>
            <!-- Focus -->
            <item
                android:drawable="@color/button_selected"
                android:state_focused="true"/>
            <!-- Default -->
            <item android:drawable="@color/transparent"/>
        </selector>
    </item>
</ripple>

custom_grid.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:gravity="center_horizontal"
              android:orientation="horizontal">

    <ImageView
        android:id="@+id/sceneGridItem"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/button_ripple"
        android:gravity="center_horizontal"/>

</LinearLayout>

activity_main.xml

<GridView
    android:id="@+id/sceneGrid"
    android:layout_marginTop="15dp"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:verticalSpacing="15dp"
    android:numColumns="5" />

，所有的魔法和问题发生的线路是，当我设置背景。虽然这实际上给我一个波纹动画在我的ImageView，它以动画的背后的ImageView的。我希望出现在动画的在图像的顶部的。于是，我就喜欢

The line where all magic and problems occur is when I set the background. While this does in fact give me a ripple animation on my imageview, it animates behind the imageview. I want the animation to appear on top of the image. So I tried a few different things like

设置整个网格背景button_ripple。

<GridView
    android:id="@+id/sceneGrid"
    android:layout_marginTop="15dp"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:verticalSpacing="15dp"
    android:background="@drawable/button_ripple"
    android:numColumns="5" />

这不正是你会觉得，现在整个电网有一个半透明的背景，无论什么样的形象我preSS整个网格动画从电网的中心。虽然这是挺酷的，它不是我想要的。

It does exactly what you'd think, now the entire grid has a semi transparent background and no matter what image i press the entire grid animates from the center of the grid. While this is kind of cool, its not what I want.

设置root /父背景button_ripple。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
                  android:layout_width="wrap_content"
                  android:layout_height="wrap_content"
                  android:gravity="center_horizontal"
                  android:background="@drawable/button_ripple"
                  android:orientation="horizontal">

的区域现在更大，填充网格（不只是图像）的整个细胞，但是它不把它显示在前面。

The area is now larger and fills the entire cell of the grid (not just the image), however it doesn't bring it to the front.

更改custom_grid.xml到RelativeLayout的，并把两个ImageViews之上彼此

custom_grid.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:orientation="horizontal">

    <ImageView
        android:id="@+id/gridItem"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true" />

    <ImageView
        android:id="@+id/gridItemOverlay"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:background="@drawable/button_ripple" />

</RelativeLayout>

CustomGridAdapter.java

....
gridItemOverLay = (ImageView) findViewById(R.id.gridItemOverlay);
gridItemOverlay.bringToFront();

这工作。现在底部的ImageView包含我的形象，和顶动画，让上面的的我的形象涟漪动画的的错觉。老实说，虽然这是一种解决办法。我觉得这是不是它是如何打算。所以我问你人精，有没有更好的办法，甚至以不同的方式？

This works. Now the bottom ImageView contains my image, and the top animates, giving the illusion of a ripple animation on top of my image. Honestly though this is a work around. I feel like this is not how it was intended. So I ask you fine people, is there a better way or even a different way?

推荐答案

也许尝试以下解决方案之一（接到的 此处 ）：

Maybe try one of these solutions (got the tip from here) :

裹在绘制一个 RippleDrawable ²对的ImageView 设置前：

Drawable image = …
RippleDrawable rippledImage = new RippleDrawable(
    ColorStateList.valueOf(rippleColor), image, null);
imageView.setImageDrawable(rippledImage);

延长的ImageView 并添加前景属性，它（如的FrameLayout has³）。请参见将其添加到的LinearLayout 这个example⁴从+克里斯·巴内斯。如果你这样做，那么要确保通过触摸坐标通过使纹波开始从正确的点：

Extend ImageView and add a foreground attribute to it (like FrameLayout has³). See this example⁴ from +Chris Banes of adding it to a LinearLayout. If you do this then make sure you pass through the touch co-ordinates so that the ripple starts from the correct point:

@Override
public void drawableHotspotChanged(float x, float y) {
    super.drawableHotspotChanged(x, y);
    if (foreground != null) {
        foreground.setHotspot(x, y);
    }
}