Android5.0新特性之——按钮点击效果动画(涟漪效果)

Android5.0 Material Design设计的动画效果

RippleDrawable涟漪效果

      涟漪效果是Android5.0以后的新特性。为了兼容性,建议新建drawable-v21文件夹来存放RippleDrawable,drawable文件夹下也要放相应的适配图片。(这里可以安装一个AndroidSelector插件,具体的可以参考https://blog.csdn.net/oqihaogongyuan/article/details/53102615的第三部分)

     涟漪动画主要是对于ripple标签的使用。,其中ripple节点的,必须要设置color属性。这里根节点的设置的color就是涟漪效果的波纹颜色。子节点的item设置的drawable是涟漪效果的背景(也可以认为是涟漪效果的展示范围)。

我这里根据场景分了4种不同的效果。话不多说先上图。

1、只有ripple节点,无item子节点。通过效果图可以看出,涟漪效果的扩散范围没有限制。已经扩散到了父控件。

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

2、含有一个item节点。通过效果图,可以看到,控件显示了设置的背景色。涟漪效果的范围得到了控制。

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android" android:color="@color/colorBtn">
    <!--显示默认的 drawable-->
    <item android:drawable="@color/colorWhite" />
</ripple>

3、第二种情况已经符合大多数的场景了。但是随着现在的一些视觉效果的变更,可能存在只要涟漪效果,背景可能是透明色的。设置id为mask的item节点,只起到一个涟漪效果限制作用,并不显示设置的drawable

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

4、第四种其实和第二种效果上是一样的。个人感觉没有什么区别。希望了解的大牛进行指点

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android" android:color="@color/colorBtn">
    <!--显示默认的 drawable-->
    <item android:drawable="@color/colorWhite" />
    <item
        android:id="@android:id/mask"
        android:drawable="@color/colorAccent"/>
</ripple>

我的布局文件:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.gaosiedu.android50.MainActivity">

    <Button
        android:id="@+id/btn_touch_no"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="48dp"
        android:background="@drawable/ripple_item_no"
        android:text="无item效果"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/btn_touch_single"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="44dp"
        android:background="@drawable/ripple_item_single"
        android:text="有item效果"
        app:layout_constraintEnd_toEndOf="@+id/btn_touch_no"
        app:layout_constraintStart_toStartOf="@+id/btn_touch_no"
        app:layout_constraintTop_toBottomOf="@+id/btn_touch_no" />

    <Button
        android:id="@+id/btn_touch_mask"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="40dp"
        android:background="@drawable/ripple_item_mask"
        android:text="item含mask效果"
        app:layout_constraintEnd_toEndOf="@+id/btn_touch_single"
        app:layout_constraintStart_toStartOf="@+id/btn_touch_single"
        app:layout_constraintTop_toBottomOf="@+id/btn_touch_single" />

    <Button
        android:id="@+id/btn_touch_double"
        android:layout_width="360dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginTop="40dp"
        android:background="@drawable/ripple_item_double"
        android:text="2个item含mask效果"
        app:layout_constraintEnd_toEndOf="@+id/btn_touch_mask"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="@+id/btn_touch_mask"
        app:layout_constraintTop_toBottomOf="@+id/btn_touch_mask" />

</android.support.constraint.ConstraintLayout>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏HTML5学堂

如何让旧浏览器支持HTML5新标签

HTML5学堂:开发永远和理论不相同,一旦考虑IE低端浏览器,所有的HTML5新增功能都成了浮云~~~从HTML5新增标签的语义角度来说,是有利于网站SEO的,...

3187
来自专栏夏时

两款 Js 插件为你的网站添彩

在网页中合理的利用一些特效能带给人眼前一亮的感觉。今天给大家分享两款很有意思的 Js 特效插件。

4659
来自专栏前端儿

layer弹出层中H5播放器全屏出错解决 & 属性poster底图占满video的方法

所以,目前的解决办法是在layer层创建之后,移除这个class即可(注意在success回调中置于下一轮事件循环)

5341
来自专栏令仔很忙

新手学JavaScript(四)----CheckBox全选与全不选

在这给大家推荐一款比较不错的纯CSS实现的CheckBox–CSSCheckBox,用bootstrap里面自带的checkbox和radio样式不太美观,所...

8071
来自专栏Flutter入门到实战

Android适配全面总结(一)----屏幕适配

版权声明:本文为博主原创文章(部分引用他人博文,已加上引用说明),未经博主允许不得转载。https://www.jianshu.com/p/7aa34434ad...

2074
来自专栏达摩兵的技术空间

移动web端常见bug汇总001

本文是摘录整理了移动端常见的一些bug以及解决方案,第一篇,后面还会有持续的文章更新整理。

1304
来自专栏ml

学习HTML5之新特性标签一览(详细)

        HTML5又2008年诞生,HTML5大致可以等同于=html+css3+javascriptapi....     so --->支持css3...

3308
来自专栏mwangblog

开始使用HTML

1134
来自专栏CaiRui

Html再学

1.  Html是网页的载体。内容就是网页制作者放在页面上想要用户浏览的信息,可以包括文字、图片、视频等。 2.  CSS样式是展现。就像网页的外衣。比如,标题...

2896
来自专栏积累沉淀

js监控输入密码检测大写键盘是否锁定

? <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="...

2195

扫码关注云+社区

领取腾讯云代金券