热门标签 | HotTags
当前位置:  开发笔记 > Android > 正文

Android自定义View之酷炫圆环(二)

这篇文章主要介绍了Android自定义View之酷炫圆环,本文是第二篇针对Android圆环实现方法进行的详细阐述,感兴趣的小伙伴们可以参考一下

先看下最终的效果
静态:


动态:


一、开始实现
新建一个DoughnutProgress继承View

  public class DoughnutProgress extends View {

  }

先给出一些常量、变量以及公共方法的代码,方便理解后面的代码
   

private static final int DEFAULT_MIN_WIDTH = 400; //View默认最小宽度
  private static final int RED = 230, GREEN = 85, BLUE = 35; //基础颜色,这里是橙红色
  private static final int MIN_ALPHA = 30; //最小不透明度
  private static final int MAX_ALPHA = 255; //最大不透明度
  private static final float doughnutRaduisPercent = 0.65f; //圆环外圆半径占View最大半径的百分比
  private static final float doughnutWidthPercent = 0.12f; //圆环宽度占View最大半径的百分比
  private static final float MIDDLE_WAVE_RADUIS_PERCENT = 0.9f; //第二个圆出现时,第一个圆的半径百分比
  private static final float WAVE_WIDTH = 5f; //波纹圆环宽度

  //圆环颜色
  private static int[] doughnutColors = new int[]{
      Color.argb(MAX_ALPHA, RED, GREEN, BLUE),
      Color.argb(MIN_ALPHA, RED, GREEN, BLUE),
      Color.argb(MIN_ALPHA, RED, GREEN, BLUE)};

  private Paint paint = new Paint(); //画笔
  private float width; //自定义view的宽度
  private float height; //自定义view的高度
  private float currentAngle = 0f; //当前旋转角度
  private float raduis; //自定义view的最大半径
  private float firstWaveRaduis;
  private float secondWaveRaduis;

  //
  private void resetParams() {
    width = getWidth();
    height = getHeight();
    raduis = Math.min(width, height)/2;
  }

  private void initPaint() {
    paint.reset();
    paint.setAntiAlias(true);
  }

重写onMeasure方法,为什么要重写onMeasure方法可以看我的上一篇文章,点这里

  /**
   * 当布局为wrap_content时设置默认长宽
   *
   * @param widthMeasureSpec
   * @param heightMeasureSpec
   */
  @Override
  protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    setMeasuredDimension(measure(widthMeasureSpec), measure(heightMeasureSpec));
  }

  private int measure(int origin) {
    int result = DEFAULT_MIN_WIDTH;
    int specMode = MeasureSpec.getMode(origin);
    int specSize = MeasureSpec.getSize(origin);
    if (specMode == MeasureSpec.EXACTLY) {
      result = specSize;
    } else {
      if (specMode == MeasureSpec.AT_MOST) {
        result = Math.min(result, specSize);
      }
    }
    return result;
  }

下面就是最重要的重写onDraw方法,大致流程如下
在开始绘制之前,先初始化width、height、raduis, 以及将View的中心作为原点

  resetParams();

  //将画布中心设为原点(0,0), 方便后面计算坐标
  canvas.translate(width / 2, height / 2);

实现静态的渐变圆环
1、画渐变圆环

  float doughnutWidth = raduis * doughnutWidthPercent;//圆环宽度
   //圆环外接矩形
   RectF rectF = new RectF(
   -raduis * doughnutRaduisPercent, 
   -raduis * doughnutRaduisPercent, 
   raduis * doughnutRaduisPercent, 
   raduis * doughnutRaduisPercent);
   initPaint();
   paint.setStrokeWidth(doughnutWidth);
   paint.setStyle(Paint.Style.STROKE);
   paint.setShader(new SweepGradient(0, 0, doughnutColors, null));
   canvas.drawArc(rectF, 0, 360, false, paint);

通过修改doughnutColors可以实现不同的渐变效果
2、画圆环旋转头部的圆

  //画旋转头部圆
   initPaint();
   paint.setStyle(Paint.Style.FILL);
   paint.setColor(Color.argb(MAX_ALPHA, RED, GREEN, BLUE));
   canvas.drawCircle(raduis * doughnutRaduisPercent, 0, doughnutWidth / 2, paint);

此时运行代码得到效果如下图:


我们还可以在绘制圆环之前通过旋转画布得到不同初始状态
    canvas.rotate(-45, 0, 0);

    canvas.rotate(-180, 0, 0);

此时聪明的你应该已经想到怎么让这个圆环旋转起来了吧^_^

对!正如你所想的,就是通过canvas.rotate方法不停地旋转画布(这个“地”是这么用的吧o(╯□╰)o)

让圆环旋转起来
在绘制圆环之前加上下面的代码:

  //转起来
  canvas.rotate(-currentAngle, 0, 0);
  if (currentAngle >= 360f){
    currentAngle = currentAngle - 360f;
  } else{
    currentAngle = currentAngle + 2f;
  }

然后再让一个线程循环刷新就好了

private Thread thread = new Thread(){
  @Override
  public void run() {
    while(true){
      try {
        Thread.sleep(10);
      } catch (InterruptedException e) {
        e.printStackTrace();
      }
      postInvalidate();
    }
  }
};

试试!转起来了吗O(∩_∩)O~

下面是比较有意思的部分,实现类似水波涟漪的效果
分析水波涟漪效果的实现原理(画了张草图方便理解):


假设淡黄色背景区域为整个View的大小

黑色圆圈为View内的最大圆(半径为R3)

橙色圆环代表渐变圆环

红色圆圈代表圆环的外圆(半径为R1)

紫色圆圈是干啥子的,待会儿再介绍~(半径为R2)

通过观察实现的最终效果,可以发现有个圆的半径从R1逐渐增大R3,不透明度逐渐减小到0。

那是不是这样周而复始就可以实现最终的效果了呢?

没那么简单。。。

仔细观察发现,第二个圆不是等到第一个圆的半径增大到R3才开始出现的,而是在将要消失的时候就出现了,有一段时间是两个圆同时存在的。

那么我们就假设当第一个圆的半径增大到R2,第二个圆开始出现。

开始想象两个圆的循环运行模型~~~

我的方案是:

绘制两个圆,每个圆的半径都从R1增大到R1+2x(R2-R1),不透明度还是从R1到R3的过程中逐渐变为0,也就是当圆的半径大于R3时,不透明度就为0了(不可见了),将第一个圆半径初始值设为R1,第二个圆半径初始值设为R2。这样两个圆半径同时逐渐增大,当半径大于 R1+2x(R2-R1)时又重新回到R1大小继续增大,就实现了类似水波涟漪的效果了。

  //实现类似水波涟漪效果
  initPaint();
  paint.setStyle(Paint.Style.STROKE);
  paint.setStrokeWidth(5);
  secOndWaveRaduis= calculateWaveRaduis(secondWaveRaduis);
  firstWaveRaduis = calculateWaveRaduis(secondWaveRaduis + raduis*(MIDDLE_WAVE_RADUIS_PERCENT - doughnutRaduisPercent) - raduis*doughnutWidthPercent/2);
  paint.setColor(Color.argb(calculateWaveAlpha(secondWaveRaduis), RED, GREEN, BLUE));
  canvas.drawCircle(0, 0, secondWaveRaduis, paint); //画第二个圆(初始半径较小的)

  initPaint();
  paint.setStyle(Paint.Style.STROKE);
  paint.setStrokeWidth(5);
  paint.setColor(Color.argb(calculateWaveAlpha(firstWaveRaduis), RED, GREEN, BLUE));
  canvas.drawCircle(0, 0, firstWaveRaduis, paint); //画第一个圆(初始半径较大的)


  /**
   * 计算波纹圆的半径
   * @param waveRaduis
   * @return
   */
  private float calculateWaveRaduis(float waveRaduis){
    if(waveRaduis  raduis*MIDDLE_WAVE_RADUIS_PERCENT + raduis*(MIDDLE_WAVE_RADUIS_PERCENT - doughnutRaduisPercent) - raduis*doughnutWidthPercent/2){
      waveRaduis = waveRaduis - (raduis*MIDDLE_WAVE_RADUIS_PERCENT + raduis*(MIDDLE_WAVE_RADUIS_PERCENT - doughnutRaduisPercent) - raduis*doughnutWidthPercent/2) + raduis*doughnutWidthPercent/2 + raduis*doughnutRaduisPercent;
    }
      waveRaduis += 0.6f;
    return waveRaduis;
  }

  /**
   * 根据波纹圆的半径计算不透明度
   * @param waveRaduis
   * @return
   */
  private int calculateWaveAlpha(float waveRaduis){
    float percent = (waveRaduis-raduis*doughnutRaduisPercent-raduis*doughnutWidthPercent/2)/(raduis-raduis*doughnutRaduisPercent-raduis*doughnutWidthPercent/2);
    if(percent >= 1f){
      return 0;
    }else{
      return (int) (MIN_ALPHA*(1f-percent));
    }
  }

以上就是本文的全部内容,希望对大家的学习Android软件编程有所帮助。


推荐阅读
  • 本问题涉及对一个非负整数数组执行加一操作。数组以最高位数字在前的方式存储,每个数组元素仅包含一位数字。假设该整数没有前导零,除非该整数为0。 ... [详细]
  • 本文详细介绍了 Freemarker 模板引擎中的 include 指令,以及如何利用该指令从其他文件中引入内容,以增强页面的模块化和可维护性。 ... [详细]
  • 在Ubuntu 16.04中使用Anaconda安装TensorFlow
    本文详细介绍了如何在Ubuntu 16.04系统上通过Anaconda环境管理工具安装TensorFlow。首先,需要下载并安装Anaconda,然后配置环境变量以确保系统能够识别Anaconda命令。接着,创建一个特定的Python环境用于安装TensorFlow,并通过指定的镜像源加速安装过程。最后,通过一个简单的线性回归示例验证TensorFlow的安装是否成功。 ... [详细]
  • 本文介绍了ThinkPHP框架的基本概念及其主要特性。作为一款遵循Apache许可证的开源框架,ThinkPHP不仅支持多种平台和Web服务器,还提供了丰富的功能以适应不同的开发需求。 ... [详细]
  • 列表是 Python 编程语言中最常用的数据结构之一,它类似于其他编程语言中的数组。本文将详细介绍 Python 3 中列表的基本操作和特性。 ... [详细]
  • 本文介绍了如何使用 useradd 命令来创建用户及其相关组,以及如何通过指定参数来定制用户的属性,如UID、GID、家目录等。同时,也探讨了使用 userdel 命令安全地删除用户及其所有相关文件的方法。 ... [详细]
  • 请看|差别_Android 6.0 运行时权限处理解析
    请看|差别_Android 6.0 运行时权限处理解析 ... [详细]
  • 本文探讨了如何在Java后端配置CORS以支持或禁止携带凭证(如Cookie),并提供了前后端的具体实现方法。 ... [详细]
  • 将基于Web的互动多媒体体验引入手机和平板电脑历来面临诸多挑战,如性能瓶颈、API兼容性和HTML5音频及视频播放限制等问题。本文探讨了如何克服这些障碍,为《霍比特人:史矛革之战》打造了一个移动优先的沉浸式网络体验。 ... [详细]
  • 如何在Android手机上设置自定义闹钟铃声
    本文介绍了在Android设备上设置个性化闹钟铃声的具体步骤,包括创建必要的文件夹和调整系统设置。 ... [详细]
  • 本文详细介绍了如何在Android Studio中生成正式签名的APK文件,确保应用能够在Google Play等平台上顺利发布。文章还提供了相关的注意事项和常见问题解决方法。 ... [详细]
  • Mac系统下解决sh: ./configure: Permission denied错误的方法
    在Mac操作系统中,当尝试运行配置脚本时,可能会遇到权限被拒绝的错误提示。本文将详细解释这一问题的原因,并提供两种有效的解决方法。 ... [详细]
  • 第七次团队冲刺进展
    本次站立会议更新了项目进展,包括学生登录注册界面的初步实现和教师网页的设计优化。同时,我们对当前的任务进行了详细的讨论,并调整了后续的工作计划。 ... [详细]
  • 一个基于Android的库,提供了一个简洁且可定制的数字选择器,外观设计为计量表样式。 ... [详细]
  • Jenkins 安装指南:Windows 平台详解
    本文详细介绍了如何在Windows平台上安装和配置Jenkins,包括安装步骤、启动方法及基本的系统配置,旨在帮助初次使用者顺利搭建持续集成环境。 ... [详细]
author-avatar
猪猪情系qq
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有