聊聊Android5.0中的水波纹效果
水波纹效果已经不是什么稀罕的东西了,用过5.0新控件的小伙伴都知道这个效果,可是如果使用一个TextView或者Button或者其它普通控件的话,你是否知道如何给它设置水波纹效果呢?OK,我们今天就来看看这个水波纹效果的实现。水波纹效果的实现有系统自带属性可以实现,我们也可以自定义实现效果。
1.系统自带水波纹实现方式
有界水波纹
水波纹效果大致上可以分为两种,一种是有界的,一种无界,我们先来看看有界水波纹效果:
效果:
代码:
<TextView
android:layout_width="match_parent"
android:layout_height="56dp"
android:layout_centerInParent="true"
android:layout_marginTop="36dp"
android:background="?android:attr/selectableItemBackground"
android:clickable="true"
android:gravity="center"
android:text="Hello World!"/>
只需要给TextView设置背景即可,背景内容就为系统自带的selecttableItemBackground。这种是有界水波纹,就是水波纹会在TextView所在区域进行绘制。
无界水波纹
代码:
<TextView
android:layout_width="match_parent"
android:layout_height="56dp"
android:layout_centerInParent="true"
android:layout_marginTop="36dp"
android:background="?android:attr/selectableItemBackgroundBorderless"
android:clickable="true"
android:gravity="center"
android:text="Hello World!"/>
所谓的无界并非完全无界,而是以控件宽高中最大的数值作为水波纹效果所在正方形的边界进行绘制。OK,这两种都是系统自带的水波纹效果,如果我们想要自定义又该怎么做呢?
2.自定义水波纹实现方式
无界水波纹
自定义这个效果其实也很简单,需要在drawable文件夹中定义ripple节点,再设置上颜色就可以了:
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android" android:color="@color/colorAccent"> </ripple>
在布局文件中将之引用为控件的背景:
<TextView
android:layout_width="match_parent"
android:layout_height="56dp"
android:layout_centerInParent="true"
android:layout_marginTop="36dp"
android:background="@drawable/nomaskripple"
android:clickable="true"
android:gravity="center"
android:text="Hello World!"/>
显示效果如下:
OK,大家看到这是无界水波纹。OK,如果想定义有界水波纹又该如何呢?
有界水波纹
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android" android:color="@color/colorPrimary">
<item
android:id="@android:id/mask"
android:drawable="@color/colorAccent"/>
</ripple>
有界水波纹需要我们在ripple节点中定义item,item的id要为系统id mask,然后还要定义drawable,drawable中的颜色并没有什么卵用,水波纹的颜色是由ripple节点中的颜色来控制的,看看显示效果:
带图片形状的水波纹
有的时候如果你希望水波纹不是长条形,又该如何呢?有两种解决方案,一种是使用图片,还有就是自定义shape,我们先来看看使用图片:
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android" android:color="@color/colorAccent">
<item
android:id="@android:id/mask"
android:drawable="@drawable/ic_launcher"/>
</ripple>
我这里使用了系统自带的小机器人,我们来看看显示效果:
大家看到,这个时候的水波纹效果就是这个小机器人这张图片中非透明像素点所在的区域了。
自绘形状的水波纹
自绘shape,来看一个圆角矩形:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<corners android:radius="10dp"/>
<solid android:color="@color/colorPrimary"/>
</shape>
在ripple中引用该矩形:
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android" android:color="@color/colorAccent">
<item
android:id="@android:id/mask"
android:drawable="@drawable/custom_shape"/>
</ripple>
显示效果:
这种方式我们在shape中定义的颜色只是用来划定水波纹显示区域,于视图显示上并没有什么用。如果你想让控件一开始就显示shape中定义的颜色,可以这样来定义ripple:
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android" android:color="@color/colorAccent">
<!--<item-->
<!--android:id="@android:id/mask"-->
<!--android:drawable="@drawable/custom_shape"/>-->
<item>
<shape android:shape="rectangle">
<corners android:radius="10dp"/>
<solid android:color="@color/colorPrimary"/>
</shape>
</item>
</ripple>
显示效果如下:
大家看到,我可以在item中定义shape,那么可能有小伙伴会想到我是否可以在item中定义selector呢?当然可以。
带selector效果的水波纹
代码:
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="@color/colorAccent">
<item>
<selector>
<item
android:state_pressed="true"
android:drawable="@drawable/ic_launcher"/>
<item
android:state_pressed="false"
android:drawable="@drawable/bg"/>
</selector>
</item>
</ripple>
显示效果:
Ok,这就是5.0中水波纹效果的使用。
源码下载:http://download.csdn.net/download/u012702547/9613571
参考资料:
http://www.cnblogs.com/carlo/p/4795424.html
以上。
聊聊Android5.0中的水波纹效果的更多相关文章
- Android点击Button水波纹效果
先上图,看看接下来我要向大家介绍的是个什么东西,例如以下图: 接下来要介绍的就是怎样实现上述图中的波纹效果.这样的效果假设大家没有体验过的话,能够看看百度手机卫士或者360手机卫士,里面的按钮点击效果 ...
- 兼容Android的水波纹效果
Android的水波纹效果只有高版本才有,我们希望自己的应用在低版本用低版本的阴影,高版本用水波纹,这怎么做呢?其实,只要分drawable和drawablev21两个文件夹就好了. 普通情况下的se ...
- android自定义控件(4)-自定义水波纹效果
一.实现单击出现水波纹单圈效果: 照例来说,还是一个自定义控件,观察这个效果,发现应该需要重写onTouchEvent和onDraw方法,通过在onTouchEvent中获取触摸的坐标,然后以这个坐标 ...
- 自定义view实现水波纹效果
水波纹效果: 1.标准正余弦水波纹: 2.非标准圆形液柱水波纹: 虽说都是水波纹,但两者在实现上差异是比较大的,一个通过正余弦函数模拟水波纹效果,另外一个会运用到图像的混合模式(PorterDuffX ...
- Android 自定义view实现水波纹效果
http://blog.csdn.net/tianjian4592/article/details/44222565 在实际的开发中,很多时候还会遇到相对比较复杂的需求,比如产品妹纸或UI妹纸在哪看了 ...
- Android自己定义控件系列五:自己定义绚丽水波纹效果
尊重原创!转载请注明出处:http://blog.csdn.net/cyp331203/article/details/41114551 今天我们来利用Android自己定义控件实现一个比較有趣的效果 ...
- canvas水波纹效果
先看效果 演示效果 自然界中水波纹效果十分麻烦,我这里只是根据水波纹的几个特性,在理想环境下模拟水波纹的扩散效果. 这里应用到的属性有:扩散.波动.折射. 扩散:很好理解,水波纹会从触发原点开始向周围 ...
- canvas实现水波纹效果
本文将会从水波的基本原理开始,详细讲解在canvas中模拟水波扩散,分析并计算水波的能量分布,并通过振幅模拟水波对图像的折射效果,最后实现水波特效. 水波基本原理 首先复习一波高中物理知识. 波是指振 ...
- 关于自定义view--实现自定义水波纹效果
开发中的东西太多,怕自己忘记了,简单记录一下. 声明:此控件借鉴了大佬的想法,在此感谢大佬提供的支持,我只是把大佬的想法拿出来而已. ok,废话到此结束,看效果: 分析一下,我们可以看到,图中有两个圆 ...
随机推荐
- Form.KeyPreview 属性2
在使用.Net Framework编写窗体应用程序的时候,有时有需要响应窗体的按键消息. 当窗体上没有任何其他控件的时候,窗体是可以直接响应这些消息的. 但是当窗体上有其他控件时,会发现窗体再也不会响 ...
- simplified build configuration
http://blogs.msdn.com/b/saraford/archive/2005/08/16/452411.aspx Did you know… That you can hide the ...
- VJP1071新年趣事之打牌(背包+输出路径)
简单的01背包 保存下方案总数 其实就是dp[v]值 输出路径dfs一下 #include <iostream> #include<cstdio> #include<cs ...
- MyEclipse常用操作技巧
1.源码和帮助文档的的关连 下面以关联struts2-core-2.3.14.2.jar源代码为例: 如下为示意图 2.拷贝项目的时候,要注意 将项目的web-root fold改成更新后的名字项目名 ...
- 两种应该掌握的排序方法--------2.quick Sort
介绍 http://zh.wikipedia.org/wiki/%E5%BF%AB%E9%80%9F%E6%8E%92%E5%BA%8F 用些里面的c++ 实现,感觉这个空间复杂度比较小.还挺好 in ...
- Shell获取文件后缀名
file = "thisfile.txt" echo "filename: ${file%.*}" echo "extension: ${file## ...
- AndroidStudio旧模板使用方法
***AndroidStudio旧模板使用方法*** 解压后用BlankActivity文件夹替换AndroidStudio安装目录下plugins\android\lib\templates\act ...
- CentOS6.4下Git服务器Gitosis安装配置
1.安装GIt: #yum install git 2.增加一个git用户 #useradd git #passwd git 3.创建git仓库存储目录,设置权限 #mkdir /home/git/r ...
- Ruby require 路径问题
require 负责引用一个外部文件,可以省略".rb"字样. 如: require 'foo.bar' 等价于 require 'foo' 在Ruby中,同一目录下的文件, 如 ...
- [CODEVS3299]有序数组合并求第K大问题
题目描述 Description 给出两个有序数组A和B(从小到大有序),合并两个有序数组后新数组c也有序,询问c数组中第k大的数 假设不计入输入输出复杂度,你能否给出一个O(logN)的方法? 输入 ...