Material Designer的低版本兼容實現（六）—— Ripple Layout

新版的Android5.0添加了漣漪效果，雖然開源的庫提供了各種控件便於大家使用漣漪效果。但是仍舊不可能滿足所有需求，因此我今天改出來一個類叫做，LayoutRipple，其實感覺跟應該叫RippleLayout。在這個layout被選中的時候會觸發漣漪效果，比較適合list中的item。下面說下怎么用這個類。

一、下載開源項目並添加支持

https://github.com/shark0017/MaterialDesignLibrary

在新建的工程中添加這個項目為library。

 

二、將layout放入布局文件

因為這個控件提供了各種屬性，所以要用這些屬性就必須要自定義命名空間。

xmlns:materialdesign="http://schemas.android.com/apk/res-auto"

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" xmlns:materialdesign="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.hhh.MainActivity" >

    <com.gc.materialdesign.views.LayoutRipple
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true" >

    </com.gc.materialdesign.views.LayoutRipple>

</RelativeLayout>

 

剛放進去僅僅是個很小的控件，需要說明的是這個控件繼承自RelativeLayout。

為了便於操作我在里面放一個textView，這樣看起來就挺好的了。

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:materialdesign="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.hhh.MainActivity" >

    <com.gc.materialdesign.views.LayoutRipple
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:layout_centerVertical="true" >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_centerVertical="true"
            android:text="默認樣式" />
    </com.gc.materialdesign.views.LayoutRipple>

</RelativeLayout>

 

現在當我們點擊上去，就會出現了漣漪效果。

 

三、在布局文件中設置各種屬性

當然，我們的需求可不僅僅是有漣漪效果，那么我們來看看目前這個項目提供了什么屬性給我們吧（可能后續我還會添加新的屬性）。

rippleBorderRadius：邊界的弧度數。默認是0，可以設定數字

這個layout是矩形的，但是可以給ripple添加顯示的范圍，如果我們添加了弧度，那么ripple的顯示范圍會變為一個圓角矩形。

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:materialdesign="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.hhh.MainActivity" >

    <com.gc.materialdesign.views.LayoutRipple
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_centerVertical="true" 
        materialdesign:rippleBorderRadius="50"
        materialdesign:rippleSpeed="10" >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_centerVertical="true"
            android:text="設定邊界弧度數" />
    </com.gc.materialdesign.views.LayoutRipple>

</RelativeLayout>

 

clickAfterRipple：在漣漪顯示結束后產生click事件。默認是true，可以設定true/false

如果是true，那么當漣漪顯示結束后才會觸發這個控件的click時間，否則當你一點擊就會立刻觸發click事件

  

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.hhh.MainActivity" >

    <com.gc.materialdesign.views.LayoutRipple
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:layout_centerVertical="true" 
        android:onClick="buttonListener"
        app:clickAfterRipple="false">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_centerVertical="true"
            android:text="設定點擊相應點擊事件的時間" />
    </com.gc.materialdesign.views.LayoutRipple>

</RelativeLayout>

 

rippleColor：漣漪的顏色。默認是暗色，可以設定@clor/xx或是#xxxx

設定的是點擊后出發的水波紋的顏色

通過：app:rippleColor="#22ff00ff" 進行設置

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.hhh.MainActivity" >

    <com.gc.materialdesign.views.LayoutRipple
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:layout_centerVertical="true" 
        app:rippleColor="#22ff00ff">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_centerVertical="true"
            android:text="設定漣漪的顏色" />
    </com.gc.materialdesign.views.LayoutRipple>

</RelativeLayout>

 

 通過：app:rippleColor="@color/blue" 進行設置

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.hhh.MainActivity" >

    <com.gc.materialdesign.views.LayoutRipple
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:layout_centerVertical="true" 
        app:rippleColor="@color/blue">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_centerVertical="true"
            android:text="設定漣漪的顏色" />
    </com.gc.materialdesign.views.LayoutRipple>

</RelativeLayout>

 

rippleSpeed：漣漪擴散的速度。默認是20，可以設定的是數字

通過這個屬性我們可以改變漣漪的擴散速度，數字越大速度越快，也就是漣漪顯示的時間越短

  

上面左邊圖片速度為：10，右邊圖片速度為：60

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.hhh.MainActivity" >

    <com.gc.materialdesign.views.LayoutRipple
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:layout_centerVertical="true" 
        app:rippleSpeed="10">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_centerVertical="true"
            android:text="設定漣漪的擴散速度" />
    </com.gc.materialdesign.views.LayoutRipple>

</RelativeLayout>

 

英因為它繼承自RelativeLayout，所以自然有RelativeLayout的各種屬性啦。比如設定background

 

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.hhh.MainActivity" >

    <com.gc.materialdesign.views.LayoutRipple
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:layout_centerVertical="true" 
        android:background="@color/orange">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_centerVertical="true"
            android:text="設定layout背景色" />
    </com.gc.materialdesign.views.LayoutRipple>

</RelativeLayout>

 

 

四、通過代碼來設置各種屬性

package com.example.hhh;

import com.gc.materialdesign.views.LayoutRipple;

import android.os.Bundle;
import android.support.v7.app.ActionBarActivity;
import android.view.View;
import android.widget.Toast;

public class MainActivity extends ActionBarActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        LayoutRipple layoutRipple = (LayoutRipple)findViewById(R.id.layout);
        layoutRipple.setRippleBorderRadius(30);//設定邊界弧度
        layoutRipple.setClickAfterRipple(false);//設定在點擊后立刻響應
        layoutRipple.setRippleColor(0xffff0000);//設定漣漪的背景色
        layoutRipple.setRippleColor(getResources().getColor(R.color.blue));//通過資源設定漣漪背景色
        layoutRipple.setRippleSpeed(3);//設定漣漪的擴散速度
        layoutRipple.setBackgroundColor(0xffff0000);//設定layout的背景
        layoutRipple.setBackgroundColor(getResources().getColor(R.color.blue));//通過資源設定layout的背景
    }

    public void buttonListener(View v) {
        Toast.makeText(getApplicationContext(), "click", 0).show();
    }
}

 

 布局文件：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.hhh.MainActivity" >

    <com.gc.materialdesign.views.LayoutRipple
        android:id="@+id/layout"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:layout_centerVertical="true" 
        android:onClick="buttonListener">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_centerVertical="true"
            android:text="設定layout背景色" />
    </com.gc.materialdesign.views.LayoutRipple>

</RelativeLayout>

 

源碼下載：