Android水波纹载入控件CircleWaterWaveView使用详解

 更新时间:2019年01月29日 17:12:22   作者:一语成空  
这篇文章主要为大家详细介绍了Android水波纹载入控件CircleWaterWaveView使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

一、效果图

本控件已上传Github,欢迎Star和Fork,项目地址:CircleWaterWaveView

二、设计思路

观察效果图,可以看出,该自定义控件由三个部分构成:外圆、内圆、正弦曲线。他们的关系如下图:

因为控件是动态的,所以我们需要一个线程去不停地绘制,所以我选择了SurfaceView来作为该控件地父类。该控件地核心是如何去绘制波浪,我采用如下的思路来进行内圆下部地绘制。利用内圆与正弦曲线地交集,来绘制。 

核心代码如下:

/**
 * 绘制图像
 *
 * @author luxun
*/
  private void drawCanvas(Canvas canvas) {
    if (canvas == null)
      return;
    //画背景圆圈
    canvas.setDrawFilter(new PaintFlagsDrawFilter(0, Paint.ANTI_ALIAS_FLAG | Paint.FILTER_BITMAP_FLAG));
    canvas.drawCircle(mCenterPoint.x, mCenterPoint.y, mOutRadius, mOutCirclePaint);
    canvas.drawCircle(mCenterPoint.x, mCenterPoint.y, mRadius, mCirclePaint);
    if (mStart) {
      //计算正弦曲线的路径
      int mH = mCenterPoint.y + mRadius - mCurrentHight;
      int length = 2 * mOutRadius;
      Path path = new Path();
      path.moveTo(0, mH);
      for (int i = 0; i < length; i++) {
        int x = i;
        int y = (int) (Math.sin(Math.toRadians(x + mTranX) / amplitude) * mRadius / increase);
        path.lineTo(x, mH + y);
      }
      path.lineTo(length, mH);
      path.lineTo(length, mCenterPoint.y + mRadius);
      path.lineTo(0, mCenterPoint.y + mRadius);
      path.lineTo(0, mH);
      canvas.save();//保存画布状态
      //这里与圆形取交集,除去正弦曲线多画的部分
      Path pc = new Path();
      pc.addCircle(mCenterPoint.x, mCenterPoint.y, mRadius, Path.Direction.CCW);
      canvas.clipPath(pc, Region.Op.INTERSECT);//切割画布
      canvas.drawPath(path, mWaterPaint);
      //绘制文字
      canvas.drawText(flowNum + "%", mCenterPoint.x, mCenterPoint.y + mTextSise / 2, mTextPaint);
      canvas.restore();//恢复画布状态
    }
  }

三、性能优化

绘制线程如下:

 /**
   * 绘制界面的线程
   *
   * @author luxun
 */
  private class RenderThread implements Runnable {
    @Override
    public void run() {
      // 不停绘制界面,这里是异步绘制,不采用外部通知开启绘制的方式,水波根据数据更新才会开始增长
      while (isDrawing) {
        if (mWaterTaget > mCurrentHight) {
          mCurrentHight = mCurrentHight + mUpSpeed;
          if (mWaterTaget <= mCurrentHight) {
            mCurrentHight = mWaterTaget;
          }
        }
        if (mStart) {
          if (mTranX > mRadius) {
            mTranX = 0;
          }
          mTranX -= mWaterSpeed;
        }
        drawUI();
        SystemClock.sleep(25);//控制刷新速率,减少cpu占用
      }
    }
  }

通过为SurfaceHolder添加监听,来控制绘制线程。当控件被隐藏不在前台显示时,自动结束绘制线程,当控件显示在前台时,再次开启绘制。

@Override
  public void surfaceCreated(SurfaceHolder surfaceHolder) {
    isDrawing = true;
    new Thread(renderThread).start();
  }

  @Override
  public void surfaceChanged(SurfaceHolder surfaceHolder, int format, int width, int height) {
    int minLength = Math.min(width, height);
    mOutRadius = minLength / 2;
    mRadius = (int) (0.5 * (minLength - mOutStrokeWidth));
    mCenterPoint = new Point(minLength / 2, minLength / 2);
    if (progress != 0) {
      setProgress(progress);
    }
  }

  @Override
  public void surfaceDestroyed(SurfaceHolder surfaceHolder) {
    isDrawing = false;
  }

四、属性化

部分设置属性,除了通过代码设置外,同时也加入了在XML文件中,直接以属性赋值的操作。

app:textColor="#00ff00"
app:waterColor="#00ff00"
app:strokeColor="#00ff00"
app:backgroudColor="#00ff00"
app:amplitude="1.0"[水波振幅]
app:max="1000"
app:progress="500"
app:increase="6.0"[水波涨幅]
app:upSpeed="3"[上涨速度]
app:waterSpeed="8"[移动速度]
app:strokeSize="4dp"
app:textSize="20dp"

五、后记

代码已经上传Github,欢迎有兴趣的朋友去看看。

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

相关文章

  • Android计步功能的实现代码

    Android计步功能的实现代码

    本篇文章主要介绍了Android计步功能的实现代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-03-03
  • Android使用个推实现三方应用的推送功能

    Android使用个推实现三方应用的推送功能

    这篇文章主要为大家详细介绍了Android使用个推实现三方应用的推送功能,感兴趣的小伙伴们可以参考一下
    2016-08-08
  • 深入探讨Android卡顿的原因以及解决方法

    深入探讨Android卡顿的原因以及解决方法

    在移动应用开发中,Android卡顿是一个常见但令人讨厌的问题,它可能导致用户体验下降,甚至失去用户,本文将深入探讨Android卡顿的原因,以及如何通过代码优化和性能监测来提高应用的性能
    2023-10-10
  • Flutter实现切换应用时隐藏应用预览

    Flutter实现切换应用时隐藏应用预览

    如果您要显示敏感数据,例如钱包金额,或者只是当登录表单显示插入的密码清晰时,当您不在应用程序中时,您必须隐藏敏感数据。本文将利用Flutter实现切换应用时隐藏应用预览,需要的可以参考一下
    2022-06-06
  • Android开发实现布局帧布局霓虹灯效果示例

    Android开发实现布局帧布局霓虹灯效果示例

    这篇文章主要介绍了Android开发实现布局帧布局霓虹灯效果,涉及Android界面布局、资源文件操作及属性设置等相关技巧,需要的朋友可以参考下
    2019-04-04
  • Android自定义对话框Dialog的简单实现

    Android自定义对话框Dialog的简单实现

    这篇文章主要为大家详细介绍了Android自定义对话框Dialog的简单实现,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-08-08
  • Android提高之SQLite分页表格实现方法

    Android提高之SQLite分页表格实现方法

    这篇文章主要介绍了Android提高之SQLite分页表格实现方法,在项目开发中有很高的实用价值,需要的朋友可以参考下
    2014-08-08
  • Android开发判断一个app应用是否在运行的方法详解

    Android开发判断一个app应用是否在运行的方法详解

    这篇文章主要介绍了Android开发判断一个app应用是否在运行的方法,结合实例形式较为详细的分析了Android判断应用运行状态的相关操作技巧与注意事项,需要的朋友可以参考下
    2017-11-11
  • Android AIDL实现两个APP间的跨进程通信实例

    Android AIDL实现两个APP间的跨进程通信实例

    这篇文章主要为大家详细介绍了Android AIDL实现两个APP间的跨进程通信实例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-04-04
  • OpenGL Shader实例分析(7)雪花飘落效果

    OpenGL Shader实例分析(7)雪花飘落效果

    这篇文章主要为大家详细介绍了OpenGL Shader实例分析第7篇,实现雪花飘落效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-02-02

最新评论