Android Ripple

安卓5.0的MD设计风格引入了一个水波纹效果Ripple

使用:

1
2
3
4
5
<!-- A red ripple masked against an opaque rectangle. --/>
<ripple android:color="#ffff0000">
<item android:id="@android:id/mask"
android:drawable="@android:color/white" />
</ripple>

  1. 无mask无边界

    1
    2
    3
    4
    <?xml version="1.0" encoding="utf-8"?>
    <ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/red" >
    </ripple>
  2. 有mask有边界

    1
    2
    3
    4
    5
    6
    <?xml version="1.0" encoding="utf-8"?>
    <ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/green" >
    <item android:id="@android:id/mask"
    android:drawable="@color/other" />
    </ripple>
  3. 图片作为mask

    1
    2
    3
    4
    5
    6
    7
    <?xml version="1.0" encoding="utf-8"?>
    <ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/blue">
    <item
    android:id="@android:id/mask"
    android:drawable="@drawable/ic_launcher_foreground"/>
    </ripple>
  4. shape作为mask

    1
    2
    3
    4
    5
    6
    7
    <?xml version="1.0" encoding="utf-8"?>
    <ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/yellow" >
    <item
    android:id="@android:id/mask"
    android:drawable="@drawable/shape"/>
    </ripple>
  5. selector作为mask

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <?xml version="1.0" encoding="utf-8"?>
    <ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="#FF0000" >
    <item>
    <selector>
    <item
    android:drawable="@drawable/ym"
    android:state_pressed="true">
    </item>
    <item
    android:drawable="@drawable/zly"
    android:state_pressed="false">
    </item>
    </selector>
    </item>
    </ripple>
  6. 不指定ripple内item的id为mask

    1
    2
    3
    4
    5
    <?xml version="1.0" encoding="utf-8"?>
    <ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/green" >
    <item android:drawable="@color/pink" />
    </ripple>

效果:

效果图

我们在实际开发中最常见的即为ListView的item设置点击反馈效果。
只需要在drawable和drawable-v21文件夹下创建同名的xml资源文件,drawable下的selector编写原始的selector切换pressed true|fase的颜色,drawable-v21下的xml文件使用ripple编写,就可以做到各版本兼容。

注:

  • ripple标签只支持API21以上。
  • ripple标签内不指定item则为无边界范围,指定item则为有边界范围。
  • item标签指定固定id=“@android:id/mask”则会默认隐藏所设置的drawable和color的值
  • 涟漪的效果是在我们给item的drawable的非透明区域发生的
如果帮到了你,想打赏支持,喏~