Android RippleDrawable 水波紋/漣漪效果的實(shí)現(xiàn)
更新時(shí)間：2018年08月09日 09:25:09 作者：CnPeng
這篇文章主要介紹了Android RippleDrawable 水波紋/漣漪效果的實(shí)現(xiàn)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
一、效果圖
二、RippleDrawable基本概念介紹
（1）、RippleDrawable
RippleDrawable可以實(shí)現(xiàn)上面效果圖中的水波紋效果，它是在API 21 中添加的，所以，低于21的版本中不可使用。它的繼承關(guān)系如下：
根據(jù)上面的繼承關(guān)系，我們可知，我們可以用它來做背景；RippleDrawable是有層級(jí)的——LayerDrawable的特性。
（2）、xml屬性
RippleDrawable在xml中對(duì)應(yīng)的是 <ripple></ripple>,它只有兩個(gè)屬性——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可以對(duì)觸摸事件作出相應(yīng)的反饋，它可以包含多個(gè)item。
其中id 為 mask 的item 在初始化界面時(shí)不會(huì)直接繪制出來，而是在發(fā)生觸摸之后才會(huì)繪制。
mask 直譯過來有遮罩的意思，它會(huì)限定水波紋的范圍。
如果我們需要將 ripple 中的某個(gè)item設(shè)置為 mask , 在xml 中，直接為該item設(shè)置id屬性即可—— android:id="@android:id/mask" ; 在Java代碼中如果想替換現(xiàn)有的mask，可以通過 RippleDrawable中的 setDrawableByLayerId(android.R.id.mask, newDrawable) 來實(shí)現(xiàn)。
沒有指定mask ，并且也沒有指定radius 時(shí)，會(huì)以控件寬高中的較大值為直徑繪制水波紋，這樣就必然會(huì)超出控件的范圍，所以，這種效果也叫做 無界水波紋效果。
指定mask 后 ，id 為 mask 的item 中指定的drawable 可以限定水波紋的范圍。
三、代碼示例：
(1)、xml 中定義 ripple
下列代碼依次對(duì)應(yīng)效果圖中的前6個(gè)。
ripple_1.xml
<?xml version="1.0" encoding="utf-8"?> <!--只有一個(gè) ripple 節(jié)點(diǎn)--> <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 賦一個(gè)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時(shí)，并不是所有drawable都生效。需要帶有透明邊框.否則，圖片不生效。而且，繪制出來之后會(huì)更改掉原圖的色彩信息，
圖片的顏色值會(huì)變?yōu)?ripple 節(jié)點(diǎn)中的 color 值；ripple 只會(huì)在該圖片區(qū)域內(nèi)有效；圖片會(huì)被拉伸-->
<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時(shí)，控件初始時(shí)使用 item 作為bg ; 按壓時(shí)會(huì)有一個(gè)色值漸變效果，按住不松時(shí)會(huì)顯示 ripple 和 item 中顏色的混合值；
松手的瞬間會(huì)顯示 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時(shí)，控件沒有默認(rèn)背景色；生效的只有ripple中的色值；此時(shí)，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
下列代碼依次對(duì)應(yīng)效果圖中的后五個(gè)
/**
* 作者：CnPeng
* 時(shí)間：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
* 時(shí)間：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的部分時(shí)，也只會(huì)在控件中心位置為起點(diǎn)以radius為半徑繪制ripple
rippleDrawable.setRadius(200);
rippleDrawable.setColor(ColorStateList.valueOf(getResources().getColor(colorResId)));
return false;
}
});
}
/**
* 作者：CnPeng
* 時(shí)間：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
* 時(shí)間：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
* 時(shí)間：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
* 時(shí)間：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實(shí)際是默認(rèn)初始化時(shí)展示的；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">
<!--無界水波紋效果，所謂無界，實(shí)際是以空間寬度或高度中的大值作為直徑繪制一個(gè)園-->
<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" />
<!--測(cè)試代碼控制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中的顏色" />
<!--測(cè)試代碼控制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" />
<!--測(cè)試代碼控制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" />
<!--測(cè)試代碼控制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" />
<!--測(cè)試代碼控制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è)列表中有應(yīng)用 |
| 無 | 無 | |
| 微信 | 無 | 無 |
| 簡(jiǎn)書 | 無 | 無 |
| 支付寶 | 無 | 無 |
| 口碑 | 無 | 無 |
| 微博 | 無 | 無 |
| 美團(tuán) | 無 | 無 |
| 淘寶 | 有 | 消息列表和Dialog中的按鈕 |
在查看了我自己常用的幾款軟件之后，發(fā)現(xiàn)，只有知乎和淘寶在局部使用了這個(gè)漣漪效果，這。。。似乎有點(diǎn)尷尬啊
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- Android中一種巧妙的drawable.xml替代方案分享
- Android自定義Drawable之在Drawable中部指定透明區(qū)域方法示例
- 淺談Android中Drawable使用知識(shí)總結(jié)
- Android開發(fā)基于Drawable實(shí)現(xiàn)圓角矩形的方法
- Android自定義Drawable實(shí)現(xiàn)圓角效果
- Android Bitmap和Drawable的對(duì)比
- Android Drawable和Bitmap的轉(zhuǎn)換實(shí)例詳解
- Android DrawableTextView圖片文字居中顯示實(shí)例
- Android Drawable必備知識(shí)小結(jié)
- Android drawable微技巧,你不知道的drawable細(xì)節(jié)
相關(guān)文章
這篇文章主要介紹了Android Glide 4.0+使用詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-03-03
Android 實(shí)現(xiàn)把bitmap圖片的某一部分的顏色改成其他顏色
這篇文章主要介紹了Android 實(shí)現(xiàn)把bitmap圖片的某一部分的顏色改成其他顏色，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-04-04
Fedora14下android開發(fā): eclipse與ibus確有沖突的問題分析
本篇文章是對(duì)Fedora14下android開發(fā)，eclipse與ibus確有沖突的問題進(jìn)行了分析介紹，需要的朋友參考下2013-05-05
Android中實(shí)現(xiàn)毛玻璃效果的3種方法
這篇文章主要介紹了Android中實(shí)現(xiàn)毛玻璃效果的3種方法,本文講解了使用系統(tǒng)提供的方法、自定義的方法、C語言實(shí)現(xiàn)方法等3種方法,需要的朋友可以參考下2015-04-04
本文詳細(xì)講解了Android中CountDownTimer類，文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-12-12
Android在fragment中編寫toobar的步驟詳解
這篇文章主要介紹了Android在fragment中編寫toobar,本文分步驟通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-01-01
Android實(shí)現(xiàn)通過手勢(shì)控制圖片大小縮放的方法
這篇文章主要介紹了Android實(shí)現(xiàn)通過手勢(shì)控制圖片大小縮放的方法,結(jié)合實(shí)例形式分析了Android控制圖片縮放的原理、實(shí)現(xiàn)步驟與相關(guān)操作技巧,需要的朋友可以參考下2016-10-10
這篇文章主要為大家詳細(xì)介紹了Android自定義控件之日期選擇控件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
本篇文章主要介紹了android多種滑動(dòng)沖突的解決方案，解決方案主要有2種，外部攔截法 和內(nèi)部攔截法，有興趣的可以了解一下。2017-02-02
Android基于widget組件實(shí)現(xiàn)物體移動(dòng)/控件拖動(dòng)功能示例
這篇文章主要介紹了Android基于widget組件實(shí)現(xiàn)物體移動(dòng)/控件拖動(dòng)功能,結(jié)合實(shí)例形式分析了widget組件在桌面應(yīng)用中的事件響應(yīng)與屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2016-10-10