查看: 2102|回复: 0

[Android教程] Android自定义View实现水波纹效果

发表于 2018-1-6 09:58:14

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

看下实现的效果:

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

  1. public class WaveView extends View {
  2. private static final String TAG = "WaveView";
  3. private int waveColor;
  4. private int waveCount;
  5. private Bitmap waveCenterIcon;
  6. private Paint paint;
  7. private int mWidth;
  8. private int mHeight;
  9. private int centerX;
  10. private int centerY;
  11. private float radius; // 最外圆半径,即最大半径
  12. private float innerRadius; // 最内圆的半径,即最小半径
  13. private int centerIconWidth;
  14. private int centerIconHeight;
  15. private float[] waveDegreeArr;
  16. private boolean isRunning = true;
  17. public WaveView(Context context) {
  18. this(context, null);
  19. }
  20. public WaveView(Context context, AttributeSet attrs) {
  21. super(context, attrs);
  22. readAttrs(context, attrs);
  23. init();
  24. }
  25. private void init() {
  26. paint = new Paint(Paint.ANTI_ALIAS_FLAG);
  27. paint.setColor(waveColor);
  28. paint.setStyle(Paint.Style.FILL);
  29. waveDegreeArr = new float[waveCount];
  30. // 设置中间 drawable 点击事件
  31. }
  32. private void readAttrs(Context context, AttributeSet attrs) {
  33. TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.WaveView);
  34. try {
  35. waveColor = typedArray.getColor(R.styleable.WaveView_waveColor, 0xffff0000);
  36. waveCount = typedArray.getInt(R.styleable.WaveView_waveCount, 4);
  37. Drawable centerDrawable = typedArray.getDrawable(R.styleable.WaveView_waveCenterIcon);
  38. waveCenterIcon = ((BitmapDrawable) centerDrawable).getBitmap();
  39. } catch (Exception e) {
  40. } finally {
  41. typedArray.recycle();
  42. }
  43. }
  44. @Override
  45. protected void onSizeChanged(int w, int h, int oldw, int oldh) {
  46. super.onSizeChanged(w, h, oldw, oldh);
  47. mWidth = w;
  48. mHeight = h;
  49. centerX = mWidth / 2;
  50. centerY = mHeight / 2;
  51. radius = Math.min(mWidth, mHeight) / 2f;
  52. centerIconWidth = waveCenterIcon.getWidth();
  53. centerIconHeight = waveCenterIcon.getHeight();
  54. innerRadius = Math.max(centerIconWidth, centerIconHeight) * 1.2f;
  55. for (int i = 0; i < waveCount; i++) {
  56. waveDegreeArr[i] = innerRadius + (radius - innerRadius) / waveCount * i;
  57. }
  58. }
  59. @Override
  60. protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
  61. int widthMode = MeasureSpec.getMode(widthMeasureSpec);
  62. int heightMode = MeasureSpec.getMode(heightMeasureSpec);
  63. if (widthMode == MeasureSpec.UNSPECIFIED || widthMode == MeasureSpec.AT_MOST) {
  64. widthMeasureSpec = MeasureSpec.makeMeasureSpec(dp2Px(120), MeasureSpec.EXACTLY);
  65. }
  66. if (heightMode == MeasureSpec.UNSPECIFIED || heightMode == MeasureSpec.AT_MOST) {
  67. heightMeasureSpec = MeasureSpec.makeMeasureSpec(dp2Px(120), MeasureSpec.EXACTLY);
  68. }
  69. super.onMeasure(widthMeasureSpec, heightMeasureSpec);
  70. }
  71. @Override
  72. protected void onDraw(Canvas canvas) {
  73. drawWave(canvas);
  74. drawCenterCircle(canvas);
  75. drawCenterIcon(canvas);
  76. }
  77. private void drawCenterCircle(Canvas canvas) {
  78. canvas.drawCircle(centerX, centerY, innerRadius, paint);
  79. }
  80. private void drawWave(Canvas canvas) {
  81. for (int i = 0; i < waveCount; i++) {
  82. paint.setAlpha((int) (255 - 255 * waveDegreeArr[i] / radius));
  83. canvas.drawCircle(centerX, centerY, waveDegreeArr[i], paint);
  84. }
  85. for (int i = 0; i < waveDegreeArr.length; i++) {
  86. if ((waveDegreeArr[i] += 4) > radius) {
  87. waveDegreeArr[i] = innerRadius;
  88. }
  89. }
  90. if (isRunning) {
  91. postInvalidateDelayed(50);
  92. }
  93. }
  94. private void drawCenterIcon(Canvas canvas) {
  95. paint.setAlpha(255);
  96. int left = centerX - centerIconWidth / 2;
  97. int top = centerY - centerIconHeight / 2;
  98. canvas.drawBitmap(waveCenterIcon, left, top, paint);
  99. }
  100. @Override
  101. public boolean onTouchEvent(MotionEvent event) {
  102. switch (event.getAction()) {
  103. case MotionEvent.ACTION_UP:
  104. // 处理事件逻辑
  105. handleEvent(event);
  106. return true;
  107. }
  108. return true;
  109. }
  110. private void handleEvent(MotionEvent event) {
  111. float touchX = event.getX();
  112. float touchY = event.getY();
  113. Log.i(TAG, "handleEvent: " + "(" + touchX + "," + touchY + ")");
  114. float distanceX = Math.abs(touchX - centerX);
  115. float distanceY = Math.abs(touchY - centerY);
  116. // 计算触摸点距离中心点的距离
  117. float distance = (float) Math.sqrt(distanceX * distanceX + distanceY * distanceY);
  118. // 当点击的点距离中心点距离小于最内圆半径时,认为是点击有效,否则无效
  119. if (distance < innerRadius) {
  120. if (listener != null) {
  121. listener.onCenterWaveClick();
  122. }
  123. }
  124. }
  125. OnCenterWaveClickListener listener;
  126. public interface OnCenterWaveClickListener {
  127. void onCenterWaveClick();
  128. }
  129. public void setOnCenterWaveClickListener(OnCenterWaveClickListener listener) {
  130. this.listener = listener;
  131. }
  132. public void toggle() {
  133. isRunning = !isRunning;
  134. invalidate();
  135. }
  136. public boolean isWaveRunning() {
  137. return isRunning;
  138. }
  139. private int dp2Px(int dpValue) {
  140. return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dpValue, getResources().getDisplayMetrics());
  141. }
  142. }
复制代码

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持程序员之家。



回复

使用道具 举报