Android Material Design : Ripple Effect水波波纹荡漾的视觉交互设计

Posted 2020-08-07 zhangphil

??

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" />