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 ...
随机推荐
- ie下如果已经有缓存,load方法的效果就无法执行.的解决方法
<script type="text/javascript"> $(document).ready(function(){ $('img') ...
- React学习一
一.运行起来react 1.引入react库 引入对应的js即可,第三方cdn引入 <script src="https://cdnjs.cloudflare.com/ajax/lib ...
- Android动画设计源码地址
Android动画设计源码地址 http://blog.csdn.net/shanghaibao123/article/details/45223825
- n皇后2种解题思路与代码-Java与C++实现
林炳文Evankaka原创作品.转载请注明出处http://blog.csdn.net/evankaka 摘要:本文主要讲了n皇后问题的解题思路,并分别用java和c++实现了过程,最后,对于算法改进 ...
- qunit学习(一)
QUnit是一个强大的JavaScript单元测试框架,用于调试代码.该框架是由jQuery团队的成员所开发,并且是jQuery的官方测试套件.任意正规JavaScript代码QUnit都能测试. 其 ...
- C++之路进阶——codevs2451(互不侵犯)
2451 互不侵犯 2005年省队选拔赛四川 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 大师 Master 题目描述 Description 在N×N的棋盘里 ...
- .NET学习记录1
.NET 可以干什么呢? 1.桌面应用程序 (WinForm ) 2.internet 应用程序(asp.net) 3.手机应用开发(wp7)好像现在C#也能开发android应用了 现在主要有两个方 ...
- 【002: NetBeans 的 代码补全】
在 代码完成中,输入如下内容 q;w;e;r;t;y;u;i;o;p;a;s;d;f;g;h;j;k;z;x;c;v;b;n;m;Q;W;E;R;T;Y;U;I;O;P;A;S;D;F;G;H;J;K ...
- MyEclipse启动慢的办法
禁用myeclipse updating indexes MyEclipse 总是不停的在 Update index,研究发现Update index...是Maven在下载更新,但很是影响myecl ...
- Ext学习
一.Ext对原有JavaScript对象的扩展 1.Ext.Array数组 2.Ext.Date日期 3.Ext.Function函数 4.Ext.Number数字 5.Ext.String字符串 二 ...