Android5.0新特性之——按钮点击效果动画(涟漪效果)-阿里云开发者社区

开发者社区> 壮壮father> 正文

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

简介: Android5.0 Material Design设计的动画效果 RippleDrawable涟漪效果       涟漪效果是Android5.0以后的新特性。为了兼容性,建议新建drawable-v21文件夹来存放RippleDrawable,drawable文件夹下也要放相应的适配图片。
+关注继续查看

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>

 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
WPF界面设计技巧(3)—实现不规则动画按钮
原文:WPF界面设计技巧(3)—实现不规则动画按钮    发布了定义WPF按钮的教程后,有朋友问能否实现不规则形状的按钮,今天我们就来讲一下不规则按钮的制作。   不规则按钮的做法实际上和先前我们做不规则窗体的方法差不多,只是为按钮弄个不是那么方方正正的背景而已。
970 0
Flutter的AnimatedDefaultTextStyle实现文本样式的动画过渡切换效果
AnimatedDefaultTextStyle通过动画过渡的方式来切换文本的显示样式
592 0
Ionic2 下处理 Android 设备下返回按钮的事件
原文发表于我的技术博客 本文分享了 Ionic2 下处理 Android 设备下返回按钮的事件,供参考。原文发表于我的技术博客 代码中我分享了如何捕捉 Ionic2 项目在 Android 设备下返回按钮事件,并在捕捉到的事件中可以灵活根据需求编写相关业务逻辑,如退出、返回等。
964 0
android 按钮圆角
引用:http://blog.sina.com.cn/s/blog_73e890f40100vpm3.html 从网上找了好多的资料,最后自己研究加借鉴人家的经验得出的结果是最简单的,现在拿出来晒晒 1.
610 0
+关注
壮壮father
从14年开始从事安卓开发。喜欢接触新鲜事物,不断的挑战自己
43
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《Nacos架构&原理》
立即下载
《看见新力量:二》电子书
立即下载
云上自动化运维(CloudOps)白皮书
立即下载