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 ...
随机推荐
- JS中构造函数与函数
//构造函数中,如果返回的是一个对 象,那么就保留原意. 如果返回的是非对象,比如数字.布尔和字符串,那么就返回 this,如果没有 return 语句,那么也返回this. var myFun1 = ...
- 关于JavaScript的判断语句(1)
if语句: if( 判断条件 ){ 判断结果为true执行语句: } if...else语句: if(判断条件){ 判断结果为true时执行的语句: }else{ 判断结果为false时执行语句: } ...
- 【Android测试】【第十六节】Instrumentation——初识+实战
◆版权声明:本文出自胖喵~的博客,转载必须注明出处. 转载请注明出处:http://www.cnblogs.com/by-dream/p/5503645.html 前言 有朋友给我留言说,能否介绍一下 ...
- PHP 判断客户端是IOS还是Android
<?php if(strpos($_SERVER['HTTP_USER_AGENT'], 'iPhone')||strpos($_SERVER['HTTP_USER_AGENT'], 'iPad ...
- PHP 多维数组 Key Value的使用
<?php $user["60"] = array("id" => "60", "num" => &q ...
- centos 修改网卡名为eth0
centos7和centos6的命名规则不同,centos6网卡名由udev控制 网卡名以eth开头然后第一块网卡叫eth0第二块网卡叫eth1,然后centos7的网卡命名规则截然不同 centos ...
- 创建一个程序,从应用程序中随机添加N名参加歌唱比赛的同学,并随机对这N名同学的比赛按姓名的拼音先后顺序进行排序
public class Pint { /** * 姓名 */ public String name; /** * 年龄 */ public String age; public Pint(){ } ...
- 小谈pointer和relation
在apicloud的数据库中,pointer和relation是在很难让人理解. 通过不断的实践,终于有点明白了. pointer和relation作用:在nosql数据库中实现表之间的关联 首先来说 ...
- UCOS 解读代码
1.OSInit()函数:建立两个任务,一个是空闲任务,在任何任务没有就绪时运行,一个是统计任务,计算cpu的利用率.初始化 UCOSII 的所有变量和数据结构,2.OSTaskCreate 该函数返 ...
- 多列布局——Columns
为了能在Web页面中方便实现类似报纸.杂志那种多列排版的布局,W3C特意给CSS3增加了一个多列布局模块(CSS Multi Column Layout Module).它主要应用在文本的多列布局方面 ...