Android:RippleDrawable 水波紋/漣漪效果

一宴偿、效果圖

二、RippleDrawable基本概念介紹

(1)、RippleDrawable

RippleDrawable可以實現(xiàn)上面效果圖中的水波紋效果迫肖,它是在API 21 中添加的拷呆,所以闲坎,低于21的版本中不可使用。它的繼承關(guān)系如下:

根據(jù)上面的繼承關(guān)系茬斧,我們可知腰懂,我們可以用它來做背景;RippleDrawable是有層級的——LayerDrawable的特性项秉。

(2)绣溜、xml屬性

RippleDrawable在xml中對應(yīng)的是 <ripple></ripple>,它只有兩個屬性——color、radius娄蔼。具體可參考下圖:

(3)怖喻、ripple的特性

A touch feedback drawable may contain multiple child layers, including a special mask layer that is not drawn to the screen. A single layer may be set as the mask from XML by specifying its android:id value as [R.id.mask](https://developer.android.com/reference/android/R.id.html#mask). At run time, a single layer may be set as the mask using setId(..., android.R.id.mask) or an existing mask layer may be replaced using setDrawableByLayerId(android.R.id.mask, ...).

  • ripple可以對觸摸事件作出相應(yīng)的反饋底哗,它可以包含多個item。
  • 其中id 為 mask 的item 在初始化界面時不會直接繪制出來锚沸,而是在發(fā)生觸摸之后才會繪制跋选。
  • mask 直譯過來有遮罩的意思,它會限定水波紋的范圍哗蜈。
  • 如果我們需要將 ripple 中的某個item設(shè)置為 mask , 在xml 中前标,直接為該item設(shè)置id屬性即可——android:id="@android:id/mask" ; 在Java代碼中如果想替換現(xiàn)有的mask,可以通過 RippleDrawable中的 setDrawableByLayerId(android.R.id.mask, newDrawable)來實現(xiàn)距潘。
  • 沒有指定mask 炼列,并且也沒有指定radius 時,會以控件寬高中的較大值為直徑繪制水波紋音比,這樣就必然會超出控件的范圍俭尖,所以,這種效果也叫做 無界水波紋效果硅确。
  • 指定mask 后 目溉,id 為 mask 的item 中指定的drawable 可以限定水波紋的范圍。

三菱农、代碼示例:

(1)缭付、xml 中定義 ripple

下列代碼依次對應(yīng)效果圖中的前6個。

  • ripple_1.xml
<?xml version="1.0" encoding="utf-8"?>

<!--只有一個 ripple 節(jié)點-->
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:color="@color/colorAccent"
    tools:targetApi="lollipop">

</ripple>
  • ripple_2.xml
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:color="@color/colorAccent"
    tools:targetApi="lollipop">

    <!--為drawable 賦一個color 值循未,是不生效的-->
    <item
        android:id="@android:id/mask"
        android:drawable="@color/blue" />
</ripple>
  • ripple_3.xml
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:color="@color/colorAccent"
    tools:targetApi="lollipop">

    <!--這里使用drawable時陷猫,并不是所有drawable都生效。需要帶有透明邊框.否則的妖,圖片不生效绣檬。而且,繪制出來之后會更改掉原圖的色彩信息嫂粟,
    圖片的顏色值會變?yōu)?ripple 節(jié)點中的 color 值娇未;ripple 只會在該圖片區(qū)域內(nèi)有效;圖片會被拉伸-->
    <item
        android:id="@android:id/mask"
        android:drawable="@drawable/act_attentioned" />
    <!--android:drawable="@drawable/square_team_selected"/>-->
</ripple>
  • ripple_4.xml
<?xml version="1.0" encoding="utf-8"?>

<!--以此作為 backGround時星虹,控件初始時使用 item 作為bg ; 按壓時會有一個色值漸變效果零抬,按住不松時會顯示 ripple 和 item 中顏色的混合值;
松手的瞬間會顯示 ripple 中色值宽涌,然后再漸變?yōu)閕tem中的色值-->
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:color="@color/colorAccent"
    tools:targetApi="lollipop">

    <item>
        <shape android:shape="rectangle">
            <solid android:color="@color/blue" />
            <corners android:radius="@dimen/dp10" />
        </shape>
    </item>

</ripple>
  • ripple_5.xml
<?xml version="1.0" encoding="utf-8"?>

<!--以此作為 backGround時平夜,控件沒有默認(rèn)背景色;生效的只有ripple中的色值卸亮;此時忽妒,item 只要控制ripple 的范圍-->
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:color="@color/colorAccent"
    tools:targetApi="lollipop">

    <item android:id="@android:id/mask">
        <shape android:shape="rectangle">
            <solid android:color="@color/blue" />
            <corners android:radius="@dimen/dp10" />
        </shape>
    </item>

</ripple>
  • ripple_6.xml
<?xml version="1.0" encoding="utf-8"?>

<!--相當(dāng)于 ripple 和 selector 的疊加-->
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:color="@color/colorAccent"
    tools:targetApi="lollipop">

    <item>
        <selector>
            <item
                android:drawable="@drawable/daomeixiong"
                android:state_pressed="true" />

            <item android:drawable="@drawable/gongfuxiongmao" />
        </selector>
    </item>
</ripple>

(2)、java代碼中定義ripple

下列代碼依次對應(yīng)效果圖中的后五個

/**
 * 作者:CnPeng
 * 時間:2018/8/8
 * 功用:Ripple使用示例
 * 其他:
 */
public class RippleDrawableActivity extends AppCompatActivity {
    ActivityRippleBinding mBinding;

    @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mBinding = DataBindingUtil.setContentView(this, R.layout.activity_ripple);

        initTv1RippleBG(R.color.f9cf87);
        initTv2RippleBG();
        initTv3RippleBG();
        initTv4RippleBG();
        initTv5RippleBG();
    }

    /**
     * 作者:CnPeng
     * 時間:2018/8/8 下午3:37
     * 功用:xml中已經(jīng)設(shè)置背景為 ripple_1.xml 為背景,此處是更改ripple_1中的顏色
     * 說明:
     */
    @SuppressLint("ClickableViewAccessibility")
    @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
    public void initTv1RippleBG(final int colorResId) {
        final RippleDrawable rippleDrawable = (RippleDrawable) mBinding.tvRippleBg1.getBackground();
        mBinding.tvRippleBg1.setOnTouchListener(new View.OnTouchListener() {
            @RequiresApi(api = Build.VERSION_CODES.M)
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                rippleDrawable.setHotspot(event.getX(), event.getY());
                //如果radius小于控件的寬高中的大值段直,則吃溅,觸摸超出radius的部分時,也只會在控件中心位置為起點以radius為半徑繪制ripple
                rippleDrawable.setRadius(200);
                rippleDrawable.setColor(ColorStateList.valueOf(getResources().getColor(colorResId)));
                return false;
            }
        });
    }

    /**
     * 作者:CnPeng
     * 時間:2018/8/8 下午12:02
     * 功用:以代碼的方式構(gòu)建rippleDrawable為背景——沒有設(shè)置mask
     * 說明:http://www.tothenew.com/blog/ripple-effect-in-android/
     * https://www.programcreek.com/java-api-examples/index.php?api=android.graphics.drawable.RippleDrawable
     */
    @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
    private void initTv2RippleBG() {

        int[][] stateList = new int[][]{
                new int[]{android.R.attr.state_pressed},
                new int[]{android.R.attr.state_focused},
                new int[]{android.R.attr.state_activated},
                new int[]{}
        };

        //深藍(lán)
        int normalColor = Color.parseColor("#303F9F");
        //玫瑰紅
        int pressedColor = Color.parseColor("#FF4081");
        int[] stateColorList = new int[]{
                pressedColor,
                pressedColor,
                pressedColor,
                normalColor
        };
        ColorStateList colorStateList = new ColorStateList(stateList, stateColorList);

        RippleDrawable rippleDrawable = new RippleDrawable(colorStateList, null, null);
        mBinding.tvRippleBg2.setBackground(rippleDrawable);
    }

    /**
     * 作者:CnPeng
     * 時間:2018/8/8 下午12:02
     * 功用:以代碼的方式構(gòu)建rippleDrawable為背景——有drawable,但不設(shè)置mask
     * 說明:http://www.tothenew.com/blog/ripple-effect-in-android/
     * https://www.programcreek.com/java-api-examples/index.php?api=android.graphics.drawable.RippleDrawable
     */
    @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
    private void initTv3RippleBG() {

        int[][] stateList = new int[][]{
                new int[]{android.R.attr.state_pressed},
                new int[]{android.R.attr.state_focused},
                new int[]{android.R.attr.state_activated},
                new int[]{}
        };

        //深藍(lán)
        int normalColor = Color.parseColor("#303F9F");
        //玫瑰紅
        int pressedColor = Color.parseColor("#FF4081");
        int[] stateColorList = new int[]{
                pressedColor,
                pressedColor,
                pressedColor,
                normalColor
        };
        ColorStateList colorStateList = new ColorStateList(stateList, stateColorList);

        Drawable drawable = getResources().getDrawable(R.drawable.act_attentioned);
        RippleDrawable rippleDrawable = new RippleDrawable(colorStateList, drawable, null);
        mBinding.tvRippleBg3.setBackground(rippleDrawable);
    }

    /**
     * 作者:CnPeng
     * 時間:2018/8/8 下午12:02
     * 功用:以代碼的方式構(gòu)建rippleDrawable為背景——無drawable,設(shè)置mask
     * 說明:http://www.tothenew.com/blog/ripple-effect-in-android/
     * https://www.programcreek.com/java-api-examples/index.php?api=android.graphics.drawable.RippleDrawable
     */
    @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
    private void initTv4RippleBG() {

        int[][] stateList = new int[][]{
                new int[]{android.R.attr.state_pressed},
                new int[]{android.R.attr.state_focused},
                new int[]{android.R.attr.state_activated},
                new int[]{}
        };

        //深藍(lán)
        int normalColor = Color.parseColor("#303F9F");
        //玫瑰紅
        int pressedColor = Color.parseColor("#FF4081");
        int[] stateColorList = new int[]{
                pressedColor,
                pressedColor,
                pressedColor,
                normalColor
        };
        ColorStateList colorStateList = new ColorStateList(stateList, stateColorList);

        Drawable drawable = getResources().getDrawable(R.drawable.act_attentioned);
        RippleDrawable rippleDrawable = new RippleDrawable(colorStateList, null, drawable);
        mBinding.tvRippleBg4.setBackground(rippleDrawable);
    }

    /**
     * 作者:CnPeng
     * 時間:2018/8/8 下午12:02
     * 功用:以代碼的方式構(gòu)建rippleDrawable為背景——有drawable,設(shè)置mask
     * 說明:http://www.tothenew.com/blog/ripple-effect-in-android/
     * https://www.programcreek.com/java-api-examples/index.php?api=android.graphics.drawable.RippleDrawable
     */
    @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
    private void initTv5RippleBG() {

        int[][] stateList = new int[][]{
                new int[]{android.R.attr.state_pressed},
                new int[]{android.R.attr.state_focused},
                new int[]{android.R.attr.state_activated},
                new int[]{}
        };

        //深藍(lán)
        int normalColor = Color.parseColor("#303F9F");
        //玫瑰紅
        int pressedColor = Color.parseColor("#FF4081");
        int[] stateColorList = new int[]{
                pressedColor,
                pressedColor,
                pressedColor,
                normalColor
        };
        ColorStateList colorStateList = new ColorStateList(stateList, stateColorList);

        float[] outRadius = new float[]{10, 10, 15, 15, 20, 20, 25, 25};
        RoundRectShape roundRectShape = new RoundRectShape(outRadius, null, null);
        ShapeDrawable maskDrawable = new ShapeDrawable();
        maskDrawable.setShape(roundRectShape);
        maskDrawable.getPaint().setColor(Color.parseColor("#000000"));
        maskDrawable.getPaint().setStyle(Paint.Style.FILL);

        ShapeDrawable contentDrawable = new ShapeDrawable();
        contentDrawable.setShape(roundRectShape);
        contentDrawable.getPaint().setColor(Color.parseColor("#f7c653"));
        contentDrawable.getPaint().setStyle(Paint.Style.FILL);

        //contentDrawable實際是默認(rèn)初始化時展示的坷牛;maskDrawable 控制了rippleDrawable的范圍
        RippleDrawable rippleDrawable = new RippleDrawable(colorStateList, contentDrawable, maskDrawable);
        mBinding.tvRippleBg5.setBackground(rippleDrawable);
    }
}

(3)罕偎、activity_ripple.xml

<?xml version="1.0" encoding="utf-8"?>
<layout>

    <ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fillViewport="true"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center_horizontal"
            android:orientation="vertical"
            android:padding="@dimen/dp10">

            <!--無界水波紋效果,所謂無界京闰,實際是以空間寬度或高度中的大值作為直徑繪制一個園-->
            <TextView
                android:layout_width="150dp"
                android:layout_height="50dp"
                android:background="@drawable/ripple_1"
                android:clickable="true"
                android:gravity="center"
                android:text="不設(shè)置mask/wrapContent" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:background="@drawable/ripple_1"
                android:clickable="true"
                android:gravity="center"
                android:text="不設(shè)置mask/match_parent" />

            <!--有界水波紋效果。水波紋效果只在控件內(nèi)繪制-->
            <TextView
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:background="@drawable/ripple_2"
                android:clickable="true"
                android:gravity="center"
                android:text="mask/match_parent/drawable_color" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:background="@drawable/ripple_3"
                android:clickable="true"
                android:gravity="center"
                android:text="mask/match_parent/drawable_drawable" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:background="@drawable/ripple_4"
                android:clickable="true"
                android:gravity="center"
                android:text="match_parent/drawable_shape" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:layout_marginTop="@dimen/dp10"
                android:background="@drawable/ripple_5"
                android:clickable="true"
                android:gravity="center"
                android:text="match_parent/drawable_shape" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:layout_marginTop="@dimen/dp10"
                android:background="@drawable/ripple_6"
                android:clickable="true"
                android:gravity="center"
                android:text="match_parent/drawable_shape" />


            <!--測試代碼控制ripple顏色-->
            <TextView
                android:id="@+id/tv_rippleBg1"
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:layout_marginTop="@dimen/dp10"
                android:background="@drawable/ripple_1"
                android:clickable="true"
                android:gravity="center"
                android:text="代碼控制更改ripple.xml中的顏色" />

            <!--測試代碼控制ripple顏色-->
            <TextView
                android:id="@+id/tv_rippleBg2"
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:layout_marginTop="@dimen/dp10"
                android:clickable="true"
                android:gravity="center"
                android:text="代碼編寫ripple作為Tv背景_無derawable_無mask" />

            <!--測試代碼控制ripple顏色-->
            <TextView
                android:id="@+id/tv_rippleBg3"
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:layout_marginTop="@dimen/dp10"
                android:clickable="true"
                android:gravity="center"
                android:text="代碼控制ripple3_有drawable_無mask" />

            <!--測試代碼控制ripple顏色-->
            <TextView
                android:id="@+id/tv_rippleBg4"
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:layout_marginTop="@dimen/dp10"
                android:clickable="true"
                android:gravity="center"
                android:text="代碼控制ripple4_無drawable_有mask" />

            <!--測試代碼控制ripple顏色-->
            <TextView
                android:id="@+id/tv_rippleBg5"
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:layout_marginTop="@dimen/dp10"
                android:clickable="true"
                android:gravity="center"
                android:text="代碼控制ripple5_有drawable_有mask" />
        </LinearLayout>
    </ScrollView>
</layout>

四甩苛、總結(jié)

(1)蹂楣、漣漪效果的應(yīng)用現(xiàn)狀

應(yīng)用名稱 是否應(yīng)用漣漪效果 應(yīng)用的位置
知乎 在底部導(dǎo)航和首頁列表中有應(yīng)用
QQ
微信
簡書
支付寶
口碑
微博
美團(tuán)
淘寶 消息列表和Dialog中的按鈕

在查看了我自己常用的幾款軟件之后,發(fā)現(xiàn)讯蒲,只有知乎和淘寶在局部使用了這個漣漪效果痊土,這。墨林。赁酝。似乎有點尷尬啊

(2)、參考文章:

http://www.tothenew.com/blog/ripple-effect-in-android/

https://developer.android.com/reference/android/graphics/drawable/RippleDrawable

https://www.programcreek.com/java-api-examples/index.php?api=android.graphics.drawable.RippleDrawable

(3)旭等、代碼地址

文中代碼地址為:https://github.com/CnPeng/CnPengAndroid.git
文中內(nèi)容對應(yīng)其中的:b_35_rippleDrawable 文件夾


本文到此結(jié)束酌呆,謝謝觀看!
如有不足搔耕,敬請指正隙袁!

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市弃榨,隨后出現(xiàn)的幾起案子菩收,更是在濱河造成了極大的恐慌,老刑警劉巖鲸睛,帶你破解...
    沈念sama閱讀 216,544評論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件娜饵,死亡現(xiàn)場離奇詭異,居然都是意外死亡官辈,警方通過查閱死者的電腦和手機(jī)箱舞,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,430評論 3 392
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來钧萍,“玉大人褐缠,你說我怎么就攤上這事》缡荩” “怎么了队魏?”我有些...
    開封第一講書人閱讀 162,764評論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經(jīng)常有香客問我胡桨,道長官帘,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,193評論 1 292
  • 正文 為了忘掉前任昧谊,我火速辦了婚禮刽虹,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘呢诬。我一直安慰自己涌哲,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 67,216評論 6 388
  • 文/花漫 我一把揭開白布尚镰。 她就那樣靜靜地躺著阀圾,像睡著了一般。 火紅的嫁衣襯著肌膚如雪狗唉。 梳的紋絲不亂的頭發(fā)上初烘,一...
    開封第一講書人閱讀 51,182評論 1 299
  • 那天,我揣著相機(jī)與錄音分俯,去河邊找鬼肾筐。 笑死,一個胖子當(dāng)著我的面吹牛缸剪,可吹牛的內(nèi)容都是我干的吗铐。 我是一名探鬼主播,決...
    沈念sama閱讀 40,063評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼橄登,長吁一口氣:“原來是場噩夢啊……” “哼抓歼!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起拢锹,我...
    開封第一講書人閱讀 38,917評論 0 274
  • 序言:老撾萬榮一對情侶失蹤谣妻,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后卒稳,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體蹋半,經(jīng)...
    沈念sama閱讀 45,329評論 1 310
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,543評論 2 332
  • 正文 我和宋清朗相戀三年充坑,在試婚紗的時候發(fā)現(xiàn)自己被綠了减江。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,722評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡捻爷,死狀恐怖辈灼,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情也榄,我是刑警寧澤巡莹,帶...
    沈念sama閱讀 35,425評論 5 343
  • 正文 年R本政府宣布司志,位于F島的核電站,受9級特大地震影響降宅,放射性物質(zhì)發(fā)生泄漏骂远。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,019評論 3 326
  • 文/蒙蒙 一腰根、第九天 我趴在偏房一處隱蔽的房頂上張望激才。 院中可真熱鬧,春花似錦额嘿、人聲如沸瘸恼。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,671評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽钞脂。三九已至,卻和暖如春捕儒,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背邓夕。 一陣腳步聲響...
    開封第一講書人閱讀 32,825評論 1 269
  • 我被黑心中介騙來泰國打工刘莹, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人焚刚。 一個月前我還...
    沈念sama閱讀 47,729評論 2 368
  • 正文 我出身青樓点弯,卻偏偏與公主長得像,于是被迫代替她去往敵國和親矿咕。 傳聞我的和親對象是個殘疾皇子抢肛,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,614評論 2 353

推薦閱讀更多精彩內(nèi)容