天天看点

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>
           
Material Design——Touch feedback Ripple波纹动画