Material Design风格的水波涟漪效果(Ripple Effect)的实现
其中,Ripple Effect是Google非常推崇的Material Design风格的交互方式,甚至已经将它组件化。在越来越多的应用上可以看到这种水波效果,不仅仅是Google自家的应用比如Google Play, 我们在市面上见到的很多应用也都纷纷跟随Google的步伐,加入了Ripple Effect的元素,比如我最早在360手机卫士上看到了Ripple Effect的大量运用。
那Ripple Effect应该如何实现呢?我们平时在开发的时候又如何轻松的将它引入呢。正如之前所说的,Ripple Effect是谷歌现在非常推崇的一种风格,已经将它组件化,实现起来可谓是so easy…
这是一个Ripple Effect的demo录像:
怎么样?是不是看上去很炫,很Material。下面就来看下他的实现到底有多简单。
第一步,在drawable目录下面添加xml文件touchable_background_white.xml:
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="@color/grey">
<item android:drawable="@color/white"/>
</ripple>
- android:color设置的颜色表示控件正常状态下的颜色,android:drawable设置的颜色表示控件按下时的颜色。
第二步,在colors.xml文件中添加如下:
<color name="grey">#AAAAAA</color>
<color name="white">#FFFFFF</color>
- white就是button正常情况下的颜色,grey则是button按下时的颜色。
这个时候你有可能遇到报错,出现 <ripple> requires API level 21
如果你使用的开发环境是Android Studio的话,就需要在build.gradle文件中把minSdkVersion修改为21:
minSdkVersion 21
如果使用的是eclipse的话,就需要在AndroidManifest.xml中将minSdkVersion修改为21:
android:minSdkVersion=”21”
第三步,再来看下他的xml布局文件,我们看到的Button控件对应的xml代码如下:
<Button
android:layout_width="match_parent"
android:layout_height="200dip"
android:background="@drawable/touchable_background_white"
android:text="RIPPLE EFFECT!"/>
Material Design风格的水波涟漪效果(Ripple Effect)的实现的更多相关文章
- 基于jQuery和CSS3超酷Material Design风格滑动菜单导航特效
分享一款效果非常炫酷的谷歌 Material Design 风格jQuery和CSS3滑动选项卡特效.该选项卡特效集合了扁平风格设计和按钮点击波特效.是一款设计的非常不错的Material Desig ...
- 自定义 Material Design风格的提示框
关闭 自定义 Material Design风格的提示框 2016-04-24 10:55 152人阅读 评论(0) 收藏 举报 版权声明:本文为博主原创文章,未经博主允许不得转载. 其实在14年谷歌 ...
- [原创]自定义view之:快速开发一款Material Design风格的dialog的开源项目MDDialog
随着google开始主导Material Design风格的设计,越来越多的app开始使用Material Design风格来设计自己的UI.虽然在Android Studio中集成了多种快速开发框架 ...
- 基于React Native的Material Design风格的组件库 MRN
基于React Native的Material Design风格的组件库.(为了平台统一体验,目前只打算支持安卓) 官方网站 http://mrn.js.org/ Github https://git ...
- Android开发实战之拥有Material Design风格的侧滑布局
在实现开发要求中,有需要会使用抽屉式布局,类似于QQ5.0的侧滑菜单,实现的方式有很多种,可以自定义控件,也可以使用第三方开源库. 同样的谷歌也推出了自己的侧滑组件——DrawLayout,使用方式也 ...
- 创建Material Design风格的Android应用--应用主题
本人全部文章首先公布于个人博客,欢迎关注,地址:http://blog.isming.me 昨天正式公布了android 5,同一时候android developer站点也更新了,添加了创建Mate ...
- Material Design风格登录注册
本文实现了以下功能 完整的代码和样例托管在Github 当接口锁定时,防止后退按钮显示在登录Activity 上. 自定义 ProgressDialog来显示加载的状态. 符合材料设计规范. 悬浮标签 ...
- Android实现Material Design风格的设置页面(滑动开关控件)
前言 本文链接 http://blog.csdn.net/never_cxb/article/details/50763271 转载请注明出处 參考了这篇文章 Material Design 风格的设 ...
- 开发Google Material Design风格的WPF程序
今天在网上看到了一个Material Design风格的WPF皮肤,看上去还是挺不错的 这个项目是开源的,感兴趣的朋友可以下载试下: https://github.com/ButchersBoy/Ma ...
随机推荐
- [转]SQLSERVER如何获取一个数据库中的所有表的名称、一个表中所有字段的名称
1.查询数据库中的所有数据库名: SELECT Name FROM Master..SysDatabases ORDER BY Name 2.查询某个数据库中所有的表名: SELECT Name FR ...
- css 待处理
三角css http://www.jb51.net/article/42513.htm http://blog.aizhet.com/web/4382.html 实现图片灰度效果 http://www ...
- iOS 数组内中英文混合排序
NSInteger sortObjects(id obj1, id obj2,void *context) { NSMutableString * str1 = [[NSMutableString a ...
- ssm框架中的struts我的配置问题
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE struts PUBLIC &qu ...
- CentOS编译安装PHP 7.0
问题1: Cannot find ldap.h 解决办法: yum install openldapyum install openldap-devel 问题2: Cannot find ldap l ...
- HttpClient_001_初步实现项目01的servlet,与项目02的servlet,之间数据访问
HttpClient_001_初步实现项目01的servlet,与项目02的servlet,之间数据访问 代码下载地址: http://download.csdn.net/detail/poiuy19 ...
- 关于为busybox设置setuid
安卓root了,重启之后就没root权限了,于是想到了为 busybox 设置 setuid 来实现使用root的身份执行命令. 可是,不管用啊,还是提示没有权限.搜了一下 busybox setui ...
- [ruby]Windows Ruby安装步骤
Windows Ruby 安装步骤 准备工作: 1.http://rubyinstaller.org/downloads/ 下载选择Ruby 1.9.3 2.http://rubyinstaller. ...
- 在win 7 vs2013下 web 调试 出现“ iis Express Worker Process 已停止工作”错误
在win 7 vs2013下 web 调试 出现“ iis Express Worker Process 已停止工作”错误: 如下图: 最终解决方案如下: 用管理员身份运行CMD,输入netsh ...
- Unity随机随学
1.什么是渲染管道? 是指在显示器上为了显示出图像而经过的一系列必要操作.渲染管道中的步骤很多,都要将几何物体从一个坐标系中变换到另一个坐标系中去. 主要步骤有: 本地坐标->视图坐标-> ...