本文实例为大家分享了Android实现水波纹扩散效果的具体代码,供大家参考,具体内容如下
先上图
囧!没有图片所以就拿了小安代替了。
先看一下如何使用这个View。
1
2
3
4
5
6
|
< jianpan.com.mybutton.view.RippleDiffuse android:layout_width = "200dp" android:layout_height = "200dp" app:btn_img_res = "@drawable/rd" app:ripple_img_res = "@drawable/rd" > </ jianpan.com.mybutton.view.RippleDiffuse > |
是的,没有别的代码了,就这么简单
实现思路
自定义ViewGroup,创建一个用显示图片的view,在创建几个,大小相同的ImageView。当按下时,对这几个ImageView进行放大和渐变。
代码
首先它肯定是一个正方形。
1
2
3
4
5
6
7
|
@Override protected void onMeasure( int widthMeasureSpec, int heightMeasureSpec) { super .onMeasure(widthMeasureSpec, widthMeasureSpec); if (!mInitDataSucceed){ initData(); } } |
显示图片的View的大小,该怎么给?这是个比较蛋疼的问题。给大了就看不到扩散效果了,给小,给多少的值合适呢?有没有正好的值,有的用父 view 的 size / 子 view 放大的倍数,这样肯定会达到理想的效果。
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
|
private static final int ANIMATION_EACH_OFFSET = 800 ; // 每个动画的播放时间间隔 private static final int RIPPLE_VIEW_COUNT = 3 ; //波纹view的个数 private static final float DEFAULT_SCALE = 1 .6f; //波纹放大后的大小 //点击有扩散效果的view private CircleImageView mBtnImg; private int mBtnViewHeight; private int mBtnViewWidth; private float mScale = DEFAULT_SCALE; //图片资源 private int mBtnImgRes; private int mRippleRes; //是否初始化完成 private boolean mInitDataSucceed = false ; private void initData(){ if (getMeasuredHeight() > 0 && getMeasuredWidth() > 0 ){ mInitDataSucceed = true ; int height = getMeasuredHeight() - getPaddingTop() - getPaddingBottom(); int width = getMeasuredWidth() - getPaddingLeft() - getPaddingRight(); mBtnViewHeight = ( int ) (height / mScale); mBtnViewWidth = ( int ) (width / mScale); mBtnImg = new CircleImageView(getContext()); mBtnImg.setImageResource(mBtnImgRes); mBtnImg.setOnTouchListener( this ); addView(mBtnImg, getWaveLayoutParams()); for ( int i = 0 ; i < RIPPLE_VIEW_COUNT; i++){ //创建view CircleImageView wave = createWave(); mWaves.add(wave); //创建动画 mAnimas.add(getNewAnimationSet()); addView(wave, 0 , getWaveLayoutParams()); } } } private CircleImageView createWave(){ CircleImageView CircleImageView = new CircleImageView(getContext()); CircleImageView.setScaleType(ImageView.ScaleType.CENTER_CROP); CircleImageView.setImageResource(mRippleRes); return CircleImageView; } private LayoutParams getWaveLayoutParams(){ LayoutParams lp = new LayoutParams(mBtnViewWidth, mBtnViewHeight); return lp; } private AnimationSet getNewAnimationSet() { AnimationSet as = new AnimationSet( true ); ScaleAnimation sa = new ScaleAnimation(1f, mScale, 1f, mScale, ScaleAnimation.RELATIVE_TO_SELF, 0 .5f, ScaleAnimation.RELATIVE_TO_SELF, 0 .5f); sa.setDuration(ANIMATION_EACH_OFFSET * 3 ); sa.setRepeatCount(- 1 ); // 设置循环 AlphaAnimation aniAlp = new AlphaAnimation( 1 , 0 .1f); aniAlp.setRepeatCount(- 1 ); // 设置循环 as.setDuration(ANIMATION_EACH_OFFSET * 3 ); as.addAnimation(sa); as.addAnimation(aniAlp); return as; } |
View 都初始化完成了,好像还差一步,onLayout,只要把子 View 都显示到中先就可以了。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
@Override protected void onLayout( boolean changed, int left, int top, int right, int bottom) { if (mInitDataSucceed) { int childLeft = (getMeasuredWidth() - mBtnViewWidth) / 2 ; int childTop = (getMeasuredHeight() - mBtnViewHeight) / 2 ; for ( int i = 0 ; i < RIPPLE_VIEW_COUNT; i++) { CircleImageView wave = mWaves.get(i); wave.layout(childLeft, childTop, mBtnViewWidth + childLeft, mBtnViewHeight + childTop); } mBtnImg.layout(childLeft, childTop, mBtnViewWidth + childLeft, mBtnViewHeight + childTop); } else { initData(); } } |
最后处理一下图片的onTouch事件。
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
|
@Override public boolean onTouch(View v, MotionEvent event) { switch (event.getAction()) { case MotionEvent.ACTION_DOWN: showWaveAnimation(); break ; case MotionEvent.ACTION_MOVE: break ; case MotionEvent.ACTION_UP: case MotionEvent.ACTION_CANCEL: cancelWaveAnimation(); break ; default : cancelWaveAnimation(); break ; } return true ; } private void showWaveAnimation() { for ( int i = 0 ; i < RIPPLE_VIEW_COUNT; i++){ Message message = new Message(); message.obj = i; handler.sendMessageDelayed(message, ANIMATION_EACH_OFFSET * i); } } private void cancelWaveAnimation() { for ( int i = 0 ; i < RIPPLE_VIEW_COUNT; i++){ CircleImageView wave = mWaves.get(i); wave.clearAnimation(); } } private Handler handler = new Handler() { @Override public void handleMessage(Message msg) { int position = ( int ) msg.obj; CircleImageView wave = mWaves.get(position); wave.startAnimation(mAnimas.get(position)); super .handleMessage(msg); } }; |
参考地址:Android实现水波纹外扩效果
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持服务器之家。
原文链接:https://blog.csdn.net/wu_liao_de_ren_sheng/article/details/51475886