Android 水波纹效果的探究

长按水波纹扩展效果

前言

水波纹效果从Android5.0就已经出来了,基本的使用相信大家都知道了,这里多谈一些相对深层次的使用:

  • 1、基本使用
  • 2、水波纹效果与布局绘制之间的问题
  • 3、长按水波纹扩散效果
  • 4、Button点击的水波纹效果

基本使用

系统自带水波纹实现方式

有界水波纹

android:background="?android:attr/selectableItemBackground"

无界水波纹

以控件宽高中最大的数值作为水波纹效果所在正方形的边界进行绘制

android:background="?android:attr/selectableItemBackgroundBorderless"

自定义水波纹实现方式

无界水波纹

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

有界水波纹

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

水波纹效果与布局绘制之间的问题

在使用了以上的自定义有界水波纹点击效果后,使用[开发者选项 - 调试GPU过渡绘制]得到下面的视图

自定义有界水波纹

对比后,发现绿色的文字部分经过了二重绘制,因为布局的白色背景和文字自身颜色的原因。如果布局背景能去掉还能实现水波纹的效果就好了,这样就只有文字一层的颜色。

有两种方案可以达到想要的这种效果:

1、使用系统自带有界水波纹实现方式,因为系统本身的默认背景是透明色的。

android:background="?android:attr/selectableItemBackground"

系统的默认水波纹颜色是灰色,如果需要使用对应的高亮色来作为ripple的背景色,我们可以在styles-v21系统主题里加入这个:<item name = "android:colorControlHighlight">@color/colorAccent</item>

2、使用自定义有界水波纹效果,使其默认背景色为透明色。 写法:

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

添item时,如果指定id为@android:id/mask,那么不点击时不会显示出该item指定的color。 可以设置指定子层item的android:id="@android:id/mask"来设定当前Ripple的Mask。 Mask的内容并不会被绘制到屏幕上,它的作用是限定Ripple效果的绘制区域。

最后可以得到我们想要的效果:

image.png

长按水波纹扩散效果

长按水波纹扩展效果

在使用小红书时,我们可以看到关于“笔记”的item长按会展示扩散的效果,其实原理也很简单。无边界的水波纹可以达到长按扩散的效果,只是它会超出边界,那我们就在对应的父布局加一层有边界的水波纹背景即可。就像这样:

<RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/selectableItemBackground">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="?attr/selectableItemBackgroundBorderless"
            android:onClick="@{()->adapter.openDetail(bean)}"
            android:padding="8dp">
        </RelativeLayout>
</RelativeLayout>

Button点击的水波纹效果

button阴影与点击效果

<Button
    style="@style/Widget.AppCompat.Button.Colored"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginLeft="20dp"
    android:layout_weight="1"
    android:onClick="login"
    android:text="登陆"
    android:textColor="@android:color/white"
    android:textStyle="bold" />

The Widget.AppCompat.Button.Colored 继承了 Widget.AppCompat.Button style并且根据你选择的主题应用最接近的颜色。

参考资料

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏编程心路

Bootstrap学习文档(二)

Bootstrap 中把一些标签的样式重置了,也即是为一些标签设置了带有 Bootstrap 风格的样式,如 h 标签,p 标签等等,这其中包含了 HTML5 ...

18450
来自专栏javascript趣味编程

2.2 HTML5基础入门

网页就是HTML?这么理解大致准确。通常网页中包含了文字,图片、视频、小游戏,动画效果等等内容。我们以本章开头的html为例说明:

14800
来自专栏liulun

学习WPF——WPF布局——初识布局容器

StackPanel堆叠布局 StackPanel是简单布局方式之一,可以很方便的进行纵向布局和横向布局 StackPanel默认是纵向布局的 <Window ...

23970
来自专栏阮一峰的网络日志

自适应网页设计(Responsive Web Design)

随着3G的普及,越来越多的人使用手机上网。 移动设备正超过桌面设备,成为访问互联网的最常见终端。于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈...

1K70
来自专栏葡萄城控件技术团队

Web页面中5种超酷的Hover效果

想在自己的网站中应用超酷的hover效果吗?也许你可以从如下的这些实例中获得一些灵感,如果你喜欢这些效果,也可以直接拷贝代码并应用到你的站点。 给平淡的站点带来...

28990
来自专栏KK的小酒馆

android.support.v7.widget.SwitchCompat

SwitchCompat是符合谷歌Material design的Selection control组件,与传统的Switch以及ToggleButton不同,...

47530
来自专栏老马寒门IT

Html5 学习系列(五)Canvas绘图API快速入门(1)

引言:Canvas绘图API快速入门 在接触HTML5的初学者包括我都在很多地方见到非常炫的一些页面,甚至好多学习HTML5的开发者都是冲着Web端的页游去的,...

235100
来自专栏企鹅号快讯

漂亮loading加载动画,这些方法可知道?

这些好看的loading效果,你还只会用第三方库吗?CSS3教你实现前言 loading效果在实际开发中是很常见的,尤其是在Ajax请求的时候,可以给用户一个很...

36260
来自专栏地方网络工作室的专栏

css3 做一个会动的菜单 menu 按钮动画效果

css3 做一个会动的菜单 menu 按钮动画效果 需要做一个会的动画按钮效果,小前端部知道如何实现,我看了一眼需要的效果,给他写了一个简单的 demo。 设计...

394100
来自专栏刘望舒

React Native组件(二)View组件解析

前言 了解了RN的组件的生命周期后,我们接着来学习RN的具体的组件。View组件是最基本的组件,也是首先要掌握的组件,这一篇我们来学习View组件。 1.概述...

30360

扫码关注云+社区

领取腾讯云代金券