Material Design——Touch feedback Ripple波紋動畫

Touch feedback（觸摸回報）

Ripple波紋效果

1. 使用系統波紋效果

要實作波紋效果首先要保證控件可以進行觸摸回報，一半要将foucesable和clickable 設定為true

android:background="?android:attr/selectableItemBackground" <!--波紋有邊界-->
android:background="?android:attr/selectableItemBackgroundBorderless"<!--波紋超出邊界-->
           

檢視這個xml發現：

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="?attr/colorControlHighlight">
    <item android:id="@id/mask">
        <color android:color="@color/white" />
    </item>
</ripple>
           

波紋的顔色是由主題的colorControlHighlight顔色決定的

<?xml version="1.0" encoding="utf-8"?>
<ripple
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="#333"
    android:radius="40dp">
    <item>
        <!-- 這個Item中是要顯示的drawable資源-->
    </item>
</ripple>
           

1. 自定義波紋動畫

   利用 ripple 元素将 RippleDrawable 定義為一個 XML 資源

color： 波紋的顔色

radius：波紋的半徑

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

<?xml version="1.0" encoding="utf-8"?>
<AbsoluteLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <FrameLayout
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:background="@drawable/my_ripple"
        android:clickable="true"
        android:focusable="true"
        android:elevation="10dp"
        android:outlineProvider="bounds">
    </FrameLayout>

</AbsoluteLayout>