Android animation 30天上手 — Day19 Ripple Effect

Evan Chen
Evan Android Note
Published in
6 min readNov 14, 2018

Ripple effect 漣漪效果

Ripple effect 是在Material design,點擊button的預設效果。

也可以自訂Button的漣漪效果

步驟1:新增一個Ripple效果
res/drawable/ripple_effect.xml

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:color="#af0c0e"
tools:targetApi="lollipop">
<item android:id="@android:id/mask">
<shape android:shape="rectangle">
<solid android:color="#af0c0e" />
</shape>
</item>
</ripple>

步驟2:新增ShapeDrawable,並指定drawable為剛剛新增的ripple_effect
res/drawable/button.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/ripple_effect" />
<shape android:shape="rectangle">
<solid android:color="#af0c0e" />
<corners android:radius="30dp" />
</shape>
</selector>

步驟3:將button的background設定為drawable/button

<Button
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="@drawable/button"
android:text="Button" />

在其他的View上加上漣漪效果。

例如有一個Textview是可以被點擊的,我們希望在Textview被點擊時,也產生漣漪效果來讓使用者知道被點擊了

在TextView 設定背景為剛剛新增的漣漪背景 @drawable/ripple_effect

<TextView
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="@drawable/ripple_effect"
android:clickable="true"
android:focusable="true"
android:padding="10dp"
android:gravity="center"
android:text="Ripple animation"
/>

使用Shape形狀作為Mask的Ripple,客制漣漪形狀

步驟1:新增 一個圓角的shape drawable/mask_shape.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#af0c0e" />
<corners android:radius="30dp" />
</shape>

步驟2:將ripple_effect 加上shape為mask的圖片

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:color="#af0c0e"
tools:targetApi="lollipop">
<item android:id="@android:id/mask"
android:drawable="@drawable/mask_shape" />
</ripple>

使用圖片為Ripple

在ripple的item加上drawable

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:color="#0f9c1f"
tools:targetApi="lollipop">
<item
android:id="@android:id/mask"
android:width="100dp"
android:drawable="@drawable/ic_launcher_foreground"
android:gravity="center" />
</ripple>

用RippleDrawable來實作點擊的效果非常實用,尤其在非Button的UI想要有點擊效果時。試想如果你用了一個可點擊的View,卻沒有做被點擊的效果。使用者其實不容易知道點擊成功。

完整程式:
https://github.com/evanchen76/RippleAnimation

下一篇:Day20 VectorDrawable 向量圖

--

--