Android开发 Ripple涟漪效果

版权声明

本文来自博客园，作者：观心静 ，转载请注明原文链接：https://www.cnblogs.com/guanxinjing/p/16874739.html

本文版权归作者和博客园共有，欢迎转载，但必须给出原文链接，并保留此段声明，否则保留追究法律责任的权利。

前言

　　此博客讲解Android5.0版本之后的涟漪效果的使用

简单的使用例子

ripple_ic_bg.xml

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

</ripple>

添加到view上

    <ImageView
        android:id="@+id/image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_learning_center_1"
        android:background="@drawable/ripple_ic_bg"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"/>

效果图：

 

设置半径

设置半径可以改变涟漪的显示范围

ripple_ic_bg.xml

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

</ripple>

效果图：

mask裁剪形状涟漪

首先 android:id="@android:id/mask" 实现了涟漪对shape形状的裁剪，这里的shape一定要带solid里的color，虽然颜色并没有显示，但是影响了裁剪形状。

其次注意android:radius 与  shape的size  还有 View的padding 这三者的关系。他们影响了涟漪的效果。

android:radius决定了涟漪的大小而shape的size限制了涟漪的形状。 另外如果View的宽高设置成wrap_content，ImageView会跟随shape的size改变，如果不设置padding会让图片填满ImageView，导致不容易看清涟漪效果。

xml

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

    <item android:id="@android:id/mask">
        <shape android:shape="rectangle">
            <solid android:color="#EC0909"/>
            <size android:width="150dp" android:height="150dp"/>
            <corners android:radius="50dp"/>
        </shape>
    </item>

</ripple>

xml

    <ImageView
        android:id="@+id/image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/ripple_ic_bg"
        android:src="@mipmap/ic_learning_center_1"
        android:padding="100dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

效果图：

 

不设置mask裁剪形状涟漪

不设置android:id="@android:id/mask"会让shape颜色显示出来

xml

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

    <item>
        <shape android:shape="rectangle">
            <solid android:color="#EC0909"/>
            <size android:width="150dp" android:height="150dp"/>
            <corners android:radius="50dp"/>
        </shape>
    </item>

</ripple>

效果图：

mask裁剪图片形状涟漪

下面使用了一个View是为了让涟漪显示到ImageView上面，并且实际点击的布局是rootLayout

 xml

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

    <item android:id="@android:id/mask" android:drawable="@mipmap/ic_learning_center_1"/>

</ripple>

xml

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/rootLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <ImageView
            android:id="@+id/image"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/ic_learning_center_1"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <View
            android:id="@+id/bg"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@drawable/ripple_ic_bg"
            app:layout_constraintBottom_toBottomOf="@id/image"
            app:layout_constraintEnd_toEndOf="@id/image"
            app:layout_constraintStart_toStartOf="@id/image"
            app:layout_constraintTop_toTopOf="@id/image" />

    </androidx.constraintlayout.widget.ConstraintLayout>

效果图：

 

与selector的组合使用

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:color="@color/colorAccent">
    <item>
        <selector>
            <item
                android:drawable="@drawable/daomeixiong"
                android:state_pressed="true" />
            <item android:drawable="@drawable/gongfuxiongmao" />
        </selector>
    </item>
</ripple>

或者

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <ripple android:color="@color/white" android:radius="1000dp">
            <item android:drawable="@mipmap/launcher_ic_news" />
        </ripple>
    </item>
    <item android:state_focused="true" android:drawable="@mipmap/launcher_ic_news"/>
    <item android:drawable="@mipmap/launcher_ic_news" android:state_selected="true" />
    <item android:drawable="@mipmap/launcher_ic_news"/>

</selector>

 

 

 

End