图像顶部的涟漪效应 - Android

Question

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

我使用以下代码来实现带有图像的自定义网格视图.我会给出完整的代码点击这里,以便您可以选择.

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

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 背后动画.我希望动画显示在图像的顶部.所以我尝试了一些不同的东西

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