Android - 在GridView上自定義ImageView的漣漪效應

Question

在我的Android應用程序中，我有一個GridView，它顯示一組圖像，每個圖像都在ImageView（TickedImageView）的自定義子類中，當圖像被選中時顯示勾號。 我想要實現的是在圖像被觸摸時顯示波紋。我已經嘗試設置背景到

?android:attr/selectableItemBackground 

沒有運氣，也添加了包裝佈局與此背景，但似乎沒有任何工作。

我的代碼如下：

<GridView 
    android:id="@+id/photos_grid" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:horizontalSpacing="2dp" 
    android:numColumns="@integer/photos_grid_num_columns" 
    android:stretchMode="columnWidth" 
    android:verticalSpacing="2dp" 
    android:layout_below="@id/spinner_toolbar" /> 

每個GridView的項目的佈局是以下內容：

<utils.TickedImageView xmlns:android="http://schemas.android.com/apk/res/android" 
    android:id="@+id/thumb" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:background="?android:attr/selectableItemBackground" 
    android:focusable="true" 
    android:clickable="true" /> 

而ImageView的子類（TickedImageView）如下：

package utils; 

import android.content.Context; 
import android.graphics.Bitmap; 
import android.graphics.BitmapFactory; 
import android.graphics.Canvas; 
import android.graphics.Paint; 
import android.graphics.Rect; 
import android.support.annotation.NonNull; 
import android.util.AttributeSet; 
import android.util.Log; 
import android.view.View; 
import android.widget.ImageView; 
import app.R; 

public class TickedImageView extends ImageView { 

    private boolean selected; 
    private Bitmap mTickBmp; 
    private Paint mDarkerPaint; 
    private View.OnClickListener onImageClickListener; 
    private int x, y; 

    public TickedImageView(Context context) { 
     super(context); 
     init(); 
    } 

    public TickedImageView(Context context, AttributeSet attrs) { 
     super(context, attrs); 
     init(); 
    } 

    private void init() { 
     super.setOnClickListener(new View.OnClickListener() { 
      @Override 
      public void onClick(View v) { 
       setSelected(!isSelected()); 

       if (onImageClickListener != null) 
        onImageClickListener.onClick(TickedImageView.this); 
      } 
     }); 

     mDarkerPaint = new Paint(Paint.ANTI_ALIAS_FLAG); 
     mDarkerPaint.setStyle(Paint.Style.FILL); 
     mDarkerPaint.setColor(0x80142030); 

     mTickBmp = BitmapFactory.decodeResource(getResources(), R.drawable.ic_done_white_48px); 
    } 

    public void setSelected(boolean selected) { 
     this.selected = selected; 
     invalidate(); 
    } 

    public boolean isSelected() { 
     return selected; 
    } 

    @Override 
    protected void onDraw(@NonNull Canvas canvas) { 
     super.onDraw(canvas); 

     if (selected) { 
      canvas.drawRect(0, 0, canvas.getWidth(), getMeasuredWidth(), mDarkerPaint); 
      canvas.drawBitmap(mTickBmp, x, y, null); 
     } 
    } 

    @Override 
    public void setOnClickListener(OnClickListener listener) { 
     onImageClickListener = listener; 
    } 

    @Override 
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { 
     super.onMeasure(widthMeasureSpec, widthMeasureSpec); 

     x = (getMeasuredWidth()/2) - (mTickBmp.getWidth()/2); 
     y = (getMeasuredWidth()/2) - (mTickBmp.getHeight()/2); 
    } 
} 

謝謝。

Answer 1

要添加您的連鎖反應，增加以下內容：

第1步：創建一個形狀（繪製/ defaultBackground.xml）

<shape xmlns:android="http://schemas.android.com/apk/res/android"> 
<solid android:color="@color/colorAccent" /> 
<stroke 
    android:width="3dp" 
    android:color="@color/colorAccent" /> 
<corners android:radius="8dp" /> 

很明顯，你可以定製你的需求。這將是我們的默認背景。

第2步：創建紋波背景（繪製/ rippleBackground.xml）

<ripple xmlns:android="http://schemas.android.com/apk/res/android" 
android:color="@color/selectedRed"> 
<item android:drawable="@drawable/defaultBackground"/> 

再次，你可以改變任何你需要的顏色。

步驟3：紋波添加到您的視圖：

<utils.TickedImageView xmlns:android="http://schemas.android.com/apk/res/android" 
android:id="@+id/thumb" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
android:background="@drawable/rippleBackground" 
android:focusable="true" 
android:clickable="true" />