Android自定义View实现水波纹效果

概述介绍：水波纹散开效果的控件在App里面还是比较常见的，例如网易云音乐歌曲识别，附近搜索场景。

介绍：水波纹散开效果的控件在 App 里面还是比较常见的，例如 网易云音乐歌曲识别，附近搜索场景。

看下实现的效果：

实现思路： 先将最大圆半径与最小圆半径间距分成几等份，从内到外，Paint 透明度依次递减，绘制出同心圆，然后不断的改变这些同心圆的半径大小，延迟一定时间重绘，便达到了想外散开的动画效果了。

public class WaveVIEw extends VIEw { private static final String TAG = "WaveVIEw"; private int wavecolor; private int waveCount; private Bitmap waveCenterIcon; private Paint paint; private int mWIDth; private int mHeight; private int centerX; private int centerY; private float radius; // 最外圆半径，即最大半径 private float innerRadius; // 最内圆的半径，即最小半径 private int centerIconWIDth; private int centerIconHeight; private float[] waveDegreeArr; private boolean isRunning = true; public WaveVIEw(Context context) {  this(context,null); } public WaveVIEw(Context context,AttributeSet attrs) {  super(context,attrs);  readAttrs(context,attrs);  init(); } private voID init() {  paint = new Paint(Paint.ANTI_AliAS_FLAG);  paint.setcolor(wavecolor);  paint.setStyle(Paint.Style.FILL);  waveDegreeArr = new float[waveCount];  // 设置中间 drawable 点击事件 } private voID readAttrs(Context context,AttributeSet attrs) {  TypedArray typedArray = context.obtainStyledAttributes(attrs,R.styleable.WaveVIEw);  try {   wavecolor = typedArray.getcolor(R.styleable.WaveVIEw_wavecolor,0xffff0000);   waveCount = typedArray.getInt(R.styleable.WaveVIEw_waveCount,4);   Drawable centerDrawable = typedArray.getDrawable(R.styleable.WaveVIEw_waveCenterIcon);   waveCenterIcon = ((BitmapDrawable) centerDrawable).getBitmap();  } catch (Exception e) {  } finally {   typedArray.recycle();  } } @OverrIDe protected voID onSizeChanged(int w,int h,int olDW,int oldh) {  super.onSizeChanged(w,h,olDW,oldh);  mWIDth = w;  mHeight = h;  centerX = mWIDth / 2;  centerY = mHeight / 2;  radius = Math.min(mWIDth,mHeight) / 2f;  centerIconWIDth = waveCenterIcon.getWIDth();  centerIconHeight = waveCenterIcon.getHeight();  innerRadius = Math.max(centerIconWIDth,centerIconHeight) * 1.2f;  for (int i = 0; i < waveCount; i++) {   waveDegreeArr[i] = innerRadius + (radius - innerRadius) / waveCount * i;  } } @OverrIDe protected voID onMeasure(int wIDthMeasureSpec,int heightmeasureSpec) {  int wIDthMode = MeasureSpec.getMode(wIDthMeasureSpec);  int heightmode = MeasureSpec.getMode(heightmeasureSpec);  if (wIDthMode == MeasureSpec.UnspecIFIED || wIDthMode == MeasureSpec.AT_MOST) {   wIDthMeasureSpec = MeasureSpec.makeMeasureSpec(dp2Px(120),MeasureSpec.EXACTLY);  }  if (heightmode == MeasureSpec.UnspecIFIED || heightmode == MeasureSpec.AT_MOST) {   heightmeasureSpec = MeasureSpec.makeMeasureSpec(dp2Px(120),MeasureSpec.EXACTLY);  }  super.onMeasure(wIDthMeasureSpec,heightmeasureSpec); } @OverrIDe protected voID onDraw(Canvas canvas) {  drawWave(canvas);  drawCenterCircle(canvas);  drawCenterIcon(canvas); } private voID drawCenterCircle(Canvas canvas) {  canvas.drawCircle(centerX,centerY,innerRadius,paint); } private voID drawWave(Canvas canvas) {  for (int i = 0; i < waveCount; i++) {   paint.setAlpha((int) (255 - 255 * waveDegreeArr[i] / radius));   canvas.drawCircle(centerX,waveDegreeArr[i],paint);  }  for (int i = 0; i < waveDegreeArr.length; i++) {   if ((waveDegreeArr[i] += 4) > radius) {    waveDegreeArr[i] = innerRadius;   }  }  if (isRunning) {   postInvalIDateDelayed(50);  } } private voID drawCenterIcon(Canvas canvas) {  paint.setAlpha(255);  int left = centerX - centerIconWIDth / 2;  int top = centerY - centerIconHeight / 2;  canvas.drawBitmap(waveCenterIcon,left,top,paint); } @OverrIDe public boolean ontouchEvent(MotionEvent event) {  switch (event.getAction()) {   case MotionEvent.ACTION_UP:    // 处理事件逻辑    handleEvent(event);    return true;  }  return true; } private voID handleEvent(MotionEvent event) {  float touchX = event.getX();  float touchY = event.getY();  Log.i(TAG,"handleEvent: " + "(" + touchX + "," + touchY + ")");  float distanceX = Math.abs(touchX - centerX);  float distanceY = Math.abs(touchY - centerY);  // 计算触摸点距离中心点的距离  float distance = (float) Math.sqrt(distanceX * distanceX + distanceY * distanceY);  // 当点击的点距离中心点距离小于最内圆半径时，认为是点击有效，否则无效  if (distance < innerRadius) {   if (Listener != null) {    Listener.onCenterWaveClick();   }  } } OnCenterWaveClickListener Listener; public interface OnCenterWaveClickListener {  voID onCenterWaveClick(); } public voID setonCenterWaveClickListener(OnCenterWaveClickListener Listener) {  this.Listener = Listener; } public voID toggle() {  isRunning = !isRunning;  invalIDate(); } public boolean isWaveRunning() {  return isRunning; } private int dp2Px(int dpValue) {  return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,dpValue,getResources().getdisplayMetrics()); }}

github地址：https://github.com/xing16/WaveView

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程小技巧。

总结

以上是内存溢出为你收集整理的Android自定义View实现水波纹效果全部内容，希望文章能够帮你解决Android自定义View实现水波纹效果所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。