Material Design风格的水波涟漪效果(Ripple Effect)的实现


Material Design是Google在2014年Google I/O大会上推出的一套全新的设计语言,经过接近两年的发展,可谓是以燎原之势影响着整个设计交互生态,和Material Design相关的开源项目也犹如雨后春笋般的出现。

其中,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!"/>


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM