本文講述了Android實現水波紋擴散效果的實例代碼。分享給大家供大家參考，具體如下：
項目地址下載
1.效果圖：
2.使用方法：
在xml里使用RippleImageView自定義控件：
|
1
2
3
4
5
6
7
8
9
10
11
|
xmlns:app="http://schemas.android.com/apk/res-auto"<com.army.rippleimage.RippleImageView android:id="@+id/rippleImageView" android:layout_width="match_parent" android:layout_height="180dp" android:background="#37B158" app:show_spacing_time="800"//動畫播放間隔時間 app:imageViewWidth="35dp"//圖片的大小 app:imageViewHeigth="35dp" android:layout_centerHorizontal="true"></com.army.rippleimage.RippleImageView> |
在Activity中的使用：
|
1
2
3
4
5
|
rippleImageView=(RippleImageView)findViewById(R.id.rippleImageView);//開始動畫rippleImageView.startWaveAnimation();//停止動畫rippleImageView.stopWaveAnimation(); |
3.如何將自定義控件引入到項目：
拷貝自定義控件RippleImageView
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
|
/** * Description : * Author : liujun * Email : [email protected] */public class RippleImageView extends RelativeLayout { private static final int SHOW_SPACING_TIME=700; private static final int MSG_WAVE2_ANIMATION = 1; private static final int MSG_WAVE3_ANIMATION = 2; private static final int IMAMGEVIEW_SIZE = 80; /**三張波紋圖片*/ private static final int SIZE =3 ; /**動畫默認循環播放時間*/ private int show_spacing_time=SHOW_SPACING_TIME; /**初始化動畫集*/ private AnimationSet [] mAnimationSet=new AnimationSet[SIZE]; /**水波紋圖片*/ private ImageView [] imgs=new ImageView[SIZE]; /**背景圖片*/ private ImageView img_bg; /**水波紋和背景圖片的大小*/ private float imageViewWidth=IMAMGEVIEW_SIZE; private float imageViewHeigth=IMAMGEVIEW_SIZE; private Handler mHandler = new Handler() { @Override public void handleMessage(Message msg) { switch (msg.what) { case MSG_WAVE2_ANIMATION: imgs[MSG_WAVE2_ANIMATION].startAnimation(mAnimationSet[MSG_WAVE2_ANIMATION]); break; case MSG_WAVE3_ANIMATION: imgs[MSG_WAVE2_ANIMATION].startAnimation(mAnimationSet[MSG_WAVE3_ANIMATION]); break; } } }; public RippleImageView(Context context) { super(context); initView(context); } public RippleImageView(Context context, AttributeSet attrs) { super(context, attrs); getAttributeSet(context,attrs); initView(context); } /** * 獲取xml屬性 * @param context * @param attrs */ private void getAttributeSet(Context context, AttributeSet attrs) { TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.custume_ripple_imageview); show_spacing_time = typedArray.getInt(R.styleable.custume_ripple_imageview_show_spacing_time, SHOW_SPACING_TIME); imageViewWidth = typedArray.getDimension(R.styleable.custume_ripple_imageview_imageViewWidth, IMAMGEVIEW_SIZE); imageViewHeigth = typedArray.getDimension(R.styleable.custume_ripple_imageview_imageViewHeigth, IMAMGEVIEW_SIZE); Log.d("TAG","show_spacing_time="+show_spacing_time+"mm imageViewWidth="+imageViewWidth+"px imageViewHeigth="+imageViewHeigth+"px"); typedArray.recycle(); } private void initView(Context context) { setLayout(context); for (int i = 0; i <imgs.length ; i++) { mAnimationSet[i]=initAnimationSet(); } } /** * 開始動態布局 */ private void setLayout(Context context) { LayoutParams params=new LayoutParams(dip2px(context,imageViewWidth),dip2px(context,imageViewHeigth)); //添加一個規則 params.addRule(RelativeLayout.CENTER_IN_PARENT,RelativeLayout.TRUE); /**添加水波紋圖片*/ for (int i = 0; i <SIZE ; i++) { imgs[i] = new ImageView(context); imgs[i].setImageResource(R.mipmap.point_empty); addView(imgs[i],params); } LayoutParams params_bg=new LayoutParams(dip2px(context,imageViewWidth)+10,dip2px(context,imageViewHeigth)+10); //添加一個規則 params_bg.addRule(RelativeLayout.CENTER_IN_PARENT,RelativeLayout.TRUE); /**添加背景圖片*/ img_bg=new ImageView(context); img_bg.setImageResource(R.mipmap.point_org); addView(img_bg,params_bg); } /** * 初始化動畫集 * @return */ private AnimationSet initAnimationSet() { AnimationSet as = new AnimationSet(true); //縮放度：變大兩倍 ScaleAnimation sa = new ScaleAnimation(1f, 2f, 1f, 2f, ScaleAnimation.RELATIVE_TO_SELF, 0.5f, ScaleAnimation.RELATIVE_TO_SELF, 0.5f); sa.setDuration(show_spacing_time * 3); sa.setRepeatCount(Animation.INFINITE);// 設置循環 //透明度 AlphaAnimation aa = new AlphaAnimation(1, 0.1f); aa.setDuration(show_spacing_time * 3); aa.setRepeatCount(Animation.INFINITE);//設置循環 as.addAnimation(sa); as.addAnimation(aa); return as; } private static int dip2px(Context context, float dipValue) { final float scale = context.getResources().getDisplayMetrics().density; return (int) (dipValue * scale + 0.5f); } //============================對外暴露的public方法========================================= /** * 開始水波紋動畫 */ public void startWaveAnimation() { imgs[0].startAnimation(mAnimationSet[0]); mHandler.sendEmptyMessageDelayed(MSG_WAVE2_ANIMATION, show_spacing_time); mHandler.sendEmptyMessageDelayed(MSG_WAVE3_ANIMATION, show_spacing_time * 2); } /** * 停止水波紋動畫 */ public void stopWaveAnimation() { for (int i = 0; i <imgs.length ; i++) { imgs[i].clearAnimation(); } } /**獲取播放的速度*/ public int getShow_spacing_time() { return show_spacing_time; } /**設計播放的速度，默認是800毫秒*/ public void setShow_spacing_time(int show_spacing_time) { this.show_spacing_time = show_spacing_time; }} |
拷貝自定義屬性到arrts下
|
1
2
3
4
5
|
<declare-styleable name="custume_ripple_imageview"> <attr name="show_spacing_time" format="integer"></attr> <attr name="imageViewWidth" format="dimension"></attr> <attr name="imageViewHeigth" format="dimension"></attr></declare-styleable> |
拷貝默認圖片
原文鏈接：https://blog.csdn.net/u012987546/article/details/52106086
