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!"/>
posted @ 2016-12-05 16:42  新感觉  阅读(4124)  评论(0编辑  收藏  举报