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 ...
随机推荐
- Java中Double类型计算问题
public class Test{ public static void main(String args[]){ System.out.println(0.05+0.01); ...
- The best career advice I’ve received
I recently had an interesting discussion with a colleague. We were recounting our job histories and ...
- vi/vim
config file location 1. MinGW: C:\MinGW\msys\1.0\share\vim\vimrc 2. Linux: home config file content ...
- mongoose index
1. 当应用程序启动时,Mongoose会自动为模式中的每个定义的索引调用ensureIndex. 虽然很好用于开发,但建议在生产中禁用此行为,因为索引创建可能会导致显着的性能影响. 通过将模式的au ...
- 最近面试的题目(WEB、Service、SQL、JavaScript)
整理一下最近面试被问到的主要题目.由于本人主要是做WEB及WEB SERVICE这块,使用的语言主要是C#,数据库主要用到的也是MSSQL.所以就分成这些块来整理(有些是在面试之后才意识到回答不对), ...
- 前端开发利器-Brackets IDE
是什么? http://brackets.io/ A modern, open source text editor that understands web design. 现代, 开源的文本编辑器 ...
- Spring+Mybatis+SpringMVC+Maven+MySql搭建实例
林炳文Evankaka原创作品.转载请注明出处http://blog.csdn.net/evankaka 摘要:本文主要讲了如何使用Maven来搭建Spring+Mybatis+SpringMVC+M ...
- 从Spring容器中获取Bean。ApplicationContextAware
引言:我们从几个方面有逻辑的讲述如何从Spring容器中获取Bean.(新手勿喷) 1.我们的目的是什么? 2.方法是什么(可变的细节)? 3.方法的原理是什么(不变的本质)? 1.我们的目的是什么? ...
- 【转】PowerShell入门(六):远程操作
转至:http://www.cnblogs.com/ceachy/archive/2013/02/20/PowerShell_Remoting.html PowerShell远程操作是远程管理的基础, ...
- IE7 float:left失效的解决方法
<div id="a" style="width:500px"> <div id="b" style="widt ...