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