Android Material Design : Ripple Effect水波波紋盪漾的視覺交互設計



Android Material Design : Ripple Effect水波波紋盪漾的視覺交互設計

Android Ripple Effect波紋盪漾效果，是Android Material Design視覺設計引入的一種交互設計效果簡言之：當點擊某個view時候，view會出現像水波波紋同樣的盪漾傳播效果。在最新版的Android如Android 5.0或以上版本中默認具備該效果，但在低版本Android中沒有，若是須要向下兼容低版本設備，則須要本身寫代碼實現，實現步驟：

第1步：須要先引入一個名叫design的Android擴展庫。在Android Studio中直接添加該庫。Eclipse項目則位於Android SDK的擴展開發包庫中：extras\android\support\design。

第2步：在res/目錄下新建一個 drawable-v21 文件目錄。

第3步：在drawable-v21目錄下新建一個Android xml資源文件，名稱隨意，好比叫ripple_effect.xml。

第4步：在ripple_effect.xml中寫入代碼：

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="#ff21272B" >

    <item>
        <shape android:shape="rectangle" >
            <solid android:color="@android:color/white" />

            <corners android:radius="10dp" />
        </shape>
    </item>

</ripple>

注意：若是此處把ripple裏面的item所有刪掉，ripple效果依然有效，可是此時的ripple effect將沒有邊界，ripple效果將變成一個圓形超出View邊界的ripple effect視覺效果，通常是一個從點擊位置開始往圓周擴散的圓形漸變水波波紋盪漾效果。有些像一個往圓周發散衰減信號的「雷達」，利用這一點，能夠改造ripple effect成更爲複雜和精彩的視覺交互效果。

第5步：接下來就是使用。好比把一個普通的Android TextView改形成具備Ripple Effect的TextView，那麼就設置該TextView的background之資源爲第4步建立的ripple_effect：

 <TextView
        android:layout_width="300dp"
        android:layout_height="wrap_content"
        android:background="@drawable/ripple_effect"
        android:clickable="true"
        android:gravity="center"
        android:padding="10dp"
        android:text="zhang phil @ csdn" />