1. 程式人生 > >Android之水波紋點選效果(RippleView)

Android之水波紋點選效果(RippleView)

Android5.0後各種炫的效果紛紛出來,寫這篇部落格主要是講的是按鈕點選效果帶有的水波紋(波浪式)。

當然我寫的這個是自定義來實現的,在低版本(5.0一下)也可以實現點選效果。看看效果圖:

         

上圖可看出 點選有抖動效果和不抖動效果。

佈局程式碼:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:ripple="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.zq.waveeffects.MainActivity">

    <!--其他屬性自行測試-->

    <com.zq.waveeffects.RippleView
        android:id="@+id/more"
        android:layout_width="?android:actionBarSize"
        android:layout_height="?android:actionBarSize"
        android:layout_margin="5dp"
        ripple:rv_centered="true">

        <ImageView
            android:layout_width="88dp"
            android:layout_height="88dp"
            android:layout_gravity="center"
            android:background="@android:color/holo_blue_dark"
            android:padding="10dp"
            android:src="@android:drawable/ic_menu_edit" />
    </com.zq.waveeffects.RippleView>

    <com.zq.waveeffects.RippleView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="25dp"
        android:layout_marginRight="25dp"
        android:layout_marginTop="65dp"
        ripple:rv_type="rectangle"
        ripple:rv_zoom="true">
        <!-- ripple:rv_type="doubleRipple"  控制型別
             ripple:rv_zoom="true"  是否抖動
        -->
        <TextView
            android:id="@+id/my_comment_submit"
            android:layout_width="match_parent"
            android:layout_height="55dp"
            android:background="@drawable/border_red_roval_sign"
            android:gravity="center"
            android:text="效果1"
            android:textColor="@android:color/white" />
    </com.zq.waveeffects.RippleView>

    <com.zq.waveeffects.RippleView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="25dp"
        android:layout_marginRight="25dp"
        android:layout_marginTop="15dp"
        ripple:rv_type="simpleRipple"
        ripple:rv_zoom="false">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="55dp"
            android:background="@drawable/border_red_roval_sign"
            android:gravity="center"
            android:text="效果2"
            android:textColor="@android:color/white" />
    </com.zq.waveeffects.RippleView>

    <com.zq.waveeffects.RippleView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="25dp"
        android:layout_marginRight="25dp"
        android:layout_marginTop="15dp"
        ripple:rv_type="doubleRipple"
        ripple:rv_zoom="false">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="55dp"
            android:background="@drawable/border_red_roval_sign"
            android:gravity="center"
            android:text="效果3"
            android:textColor="@android:color/white" />
    </com.zq.waveeffects.RippleView>
</LinearLayout>

自定義的RippleView程式碼比較多,直接下載原始碼即可;