android - 如何给Imageview 设置水波纹效果？

Question

btn_ripple_mask.xml

<?xml version="1.0" encoding="utf-8"?>
<ripple
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:color="@android:color/darker_gray"><!--点击之后的颜色 必须要-->
  <item
    android:id="@android:id/mask"
    android:drawable="@android:color/white"/>
</ripple>

设置 android:foreground="@drawable/btn_ripple_mask"和android:background="@drawable/btn_ripple_mask"，都不行

Answer 1

@erehmi 如果图片是jpg格式的，设置background 好像没用，设置了foreground可以

<ImageView
    android:layout_width="300dp"
    android:layout_height="200dp"
    android:layout_marginTop="10dp"
    android:clickable="true"
    android:foreground="?android:attr/selectableItemBackground"
    app:srcCompat="@mipmap/ic_launcher"/>

Answer 2

以下为官方Meterial样式下的列表Item和Button预设的Ripper Drawable:

<style name="Theme.Material">
    ...
    <item name="selectableItemBackground">@drawable/item_background_material</item>
    <item name="selectableItemBackgroundBorderless">@drawable/item_background_borderless_material</item>
    <item name="borderlessButtonStyle">@style/Widget.Material.Button.Borderless</item>

以下为item_background_material.xml:

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="?attr/colorControlHighlight">
    <item android:id="@id/mask">
        <color android:color="@color/white" />
    </item>
</ripple>

以下为item_background_borderless_material.xml:

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="?attr/colorControlHighlight" />

以下为Widget.Material.Button.Borderless对应的设置和xml:

<!-- Borderless ink button -->
<style name="Widget.Material.Button.Borderless">
    <item name="background">@drawable/btn_borderless_material</item>
    <item name="stateListAnimator">@null</item>
</style>

<!-- btn_borderless_material.xml -->
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
        android:color="?attr/colorControlHighlight">
    <item android:id="@id/mask"
          android:drawable="@drawable/btn_default_mtrl_shape" />
</ripple>

引用如下:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    ...
    android:background="?android:attr/selectableItemBackground">

ImageView设置如下:

<ImageView
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/imageView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:clickable="true"
    android:background="?android:attr/selectableItemBackground"
    app:srcCompat="@mipmap/ic_launcher" />

注意: 一定要设置 android:clickable="true" 或者 通过代码设置 setOnClickListener(...) .

你要用这些个酷炫的东西是有代价的, 就是你的设备必须是Android 5.0 (API level 21), 低于这个版本的机器是不支持的.

Answer 3

你可以自己写一个自定义View继承自ImageView。然后自己在onTouchEvent里面启动一个Animator画一个半径逐渐增大的圆就可以了。自己动手，丰衣足食。这样写还有一个好处就是，没有版本限制，低于5.0也是可以使用的。