ripple的使用细则

当谷歌推出Material Design设计规范后,谷歌的产品都开始按照这一规范进行设计,包括了Android Mobile, Android Table, Web Chrome 在内的所有平台。按压产生水波纹(ripple)这一效果也登上舞台,在Android中的使用就是ripple xml资源文件和RippleDrawable。

RippleDrawable就是ripple资源文件解析后生成的对象,它继承自LayerDrawable。

看下几种水波纹的的样式:

1.无边界:可以超过控件本身的宽高,直到直径最大等于控件的宽高的最大值或者扩散到父布局(有背景)的边界,代码如下,只有color,其他为空。

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="#ffff0000" />

2.有边界:使用设置item并且id为android:id/mask,控制其显示的边界,item内容可以是颜色,drawable,shape或其他背景资源文件。如果是颜色:如果是透明则无效果;如果是drawable:限制在其非透明区域内;shape同理;

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="#ffff0000">
    <item android:id="@android:id/mask">
        <color android:color="@android:color/black" />
    </item>
</ripple>

3.有背景:item的id不是mask,则默认显示背景,按压显示水波纹,这是常用的情况,区域同样限制在非透明区域内。

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="#ffff0000">
    <item>
        <color android:color="@android:color/black" />
    </item>
</ripple>

4.有样式的透明背景:​如果想显示透明背景且显示样式(例如圆角,边框),需要结合mask的item和背景,使用mask限制边界,并添加背景的item

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="#41A8A2A2">
    <item android:id="@android:id/mask">
        <shape>
            <solid android:color="@android:color/white" />
            <corners android:radius="999dp" />
        </shape>
    </item>
    <item>
        <shape>
            <solid android:color="@android:color/transparent" />
            <corners android:radius="999dp" />
        </shape>
    </item>
</ripple>

各种效果图如下

发布了53 篇原创文章 · 获赞 17 · 访问量 3万+

猜你喜欢

转载自blog.csdn.net/jklwan/article/details/101568811