Question

我在最近的一个项目中一直在尝试涟漪动画。我找不到一个优雅的＆＃34;在某些情况下用于触摸事件的解决方案。即图像，尤其是列表，网格和循环视图。动画几乎总是看起来在视图后面动画，而不是在它上面。这在Buttons和TextViews中没有问题，但如果您有图像的GridView，则纹波会出现在实际图像的后面或下面。显然这不是我想要的，虽然有些解决方案我认为是一种解决方案，但我希望有一些简单的东西，我只是不知道。

我使用以下代码来实现带有图像的自定义网格视图。我会提供完整的代码CLICK HERE，以便您可以选择。

现在只是重要的东西。为了让我的图像在触摸时动画，我需要这个

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上给了我一个涟漪动画，但它会在后面设置动画。我希望动画在图像的顶部上显示。所以我尝试了一些不同的东西，比如

将整个网格背景设置为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" />

它完全符合您的想法，现在整个网格都具有半透明背景，无论什么图像，我都会从网格中心按下整个网格的动画。虽然这很酷，但它不是我想要的。

将root / parent背景设置为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">

该区域现在更大，并填充网格的整个单元格（不仅仅是图像），但它并没有将它带到前面。

将custom_grid.xml更改为RelativeLayout并将两个ImageView放在彼此之上

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包含我的图像和顶部动画，在我的图像的顶部上给出了涟漪动画的错觉。老实说，虽然这是一个解决方案。我觉得这不是它的意图。所以我问你好人，有更好的方式甚至是不同的方式吗？

Answer 1

我喜欢Android开发人员的回答，所以我决定研究如何在代码中执行他的解决方案的第2步。

你需要从杰克沃顿获得这段代码：https://gist.github.com/JakeWharton/0a251d67649305d84e8a

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.widget.ImageView;


public class ForegroundImageView extends ImageView {
  private Drawable foreground;


  public ForegroundImageView(Context context) {
    this(context, null);
  } 


  public ForegroundImageView(Context context, AttributeSet attrs) {
    super(context, attrs);


    TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.ForegroundImageView);
    Drawable foreground = a.getDrawable(R.styleable.ForegroundImageView_android_foreground);
    if (foreground != null) {
      setForeground(foreground);
    } 
    a.recycle();
  } 


  /** 
   * Supply a drawable resource that is to be rendered on top of all of the child 
   * views in the frame layout. 
   * 
   * @param drawableResId The drawable resource to be drawn on top of the children. 
   */ 
  public void setForegroundResource(int drawableResId) {
    setForeground(getContext().getResources().getDrawable(drawableResId));
  } 


  /** 
   * Supply a Drawable that is to be rendered on top of all of the child 
   * views in the frame layout. 
   * 
   * @param drawable The Drawable to be drawn on top of the children. 
   */ 
  public void setForeground(Drawable drawable) {
    if (foreground == drawable) {
      return; 
    } 
    if (foreground != null) {
      foreground.setCallback(null);
      unscheduleDrawable(foreground);
    } 


    foreground = drawable;


    if (drawable != null) {
      drawable.setCallback(this);
      if (drawable.isStateful()) {
        drawable.setState(getDrawableState());
      } 
    } 
    requestLayout();
    invalidate();
  } 


  @Override protected boolean verifyDrawable(Drawable who) {
    return super.verifyDrawable(who) || who == foreground;
  } 


  @Override public void jumpDrawablesToCurrentState() { 
    super.jumpDrawablesToCurrentState(); 
    if (foreground != null) foreground.jumpToCurrentState();
  } 


  @Override protected void drawableStateChanged() { 
    super.drawableStateChanged(); 
    if (foreground != null && foreground.isStateful()) {
      foreground.setState(getDrawableState());
    } 
  } 


  @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    if (foreground != null) {
      foreground.setBounds(0, 0, getMeasuredWidth(), getMeasuredHeight());
      invalidate();
    } 
  } 


  @Override protected void onSizeChanged(int w, int h, int oldw, int oldh) {
    super.onSizeChanged(w, h, oldw, oldh);
    if (foreground != null) {
      foreground.setBounds(0, 0, w, h);
      invalidate();
    } 
  } 


  @Override public void draw(Canvas canvas) {
    super.draw(canvas);


    if (foreground != null) {
      foreground.draw(canvas);
    } 
  } 
}

这是attrs.xml：

<?xml version="1.0" encoding="utf-8"?>
<resources>
  <declare-styleable name="ForegroundImageView">
    <attr name="android:foreground"/>
  </declare-styleable>
</resources>

现在，在layout.xml中创建您的ForegroundImageView：

<com.example.ripples.ForegroundImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:scaleType="centerCrop"
    android:foreground="?android:selectableItemBackground"
    android:src="@drawable/apples"
    android:id="@+id/image" />

图像现在会波动。

Answer 2

不是试图将纹波添加到适配器中的每个单独视图，而是可以在GridView级别添加它，如下所示：

<GridView
    android:id="@+id/gridview"

    ...

    android:drawSelectorOnTop="true"
    android:listSelector="@drawable/your_ripple_drawable"/>

Answer 3

也许尝试其中一种解决方案（从here获得提示）：

在RippleDrawable之前将其绘制在ImageView²之前：

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

扩展ImageView并为其添加前景属性（如FrameLayouthas³）。请参阅+ Chris Banes的这个例子，将其添加到LinearLayout。如果你这样做，那么请确保你通过触摸坐标，以便从正确的点开始纹波：
```
@Override
public void drawableHotspotChanged(float x, float y) {
    super.drawableHotspotChanged(x, y);
    if (foreground != null) {
        foreground.setHotspot(x, y);
    }
}
```

Answer 4

我有一个图片库（使用RecyclerView和GridLayoutManager构建）。使用Picasso设置图像。要为图片添加纹波我已将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>

请注意 android:foreground 。它与android:background不同。我已经尝试了没有 android:clickable="true"和android:focusable="true"，而也可以，但它没有受到伤害。

然后将ripple.xml drawable添加到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>

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

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

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

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

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

图像顶部的涟漪效应 - Android

4 个答案: