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

android球形水波百分比控件代码

本文主要介绍的是一个球形水波的百分比控件,市面上有各种形形色色的百分比控件,我一直觉得水波是最炫的,UI给了我这个机会,然而网上搜了一大堆,

本文主要介绍的是一个球形水波的百分比控件,市面上有各种形形色色的百分比控件,我一直觉得水波是最炫的,UI给了我这个机会,然而网上搜了一大堆,不是太复杂,代码太多(反正我是调不出效果来),就是有瑕疵的,所以只好自己写了,这里开源出来,方便大家。有什么问题或者建议大家留言指出。

先看效果,这里动态图不好截取,就贴张静态的

对于水波百分比控件实现方法有如下几种

  • - 画好水波形状的bitmap,利用属性动画进行平移
  • - 利用曲线精确绘制目标水波
  • - 利用大范围曲线与容器做交集

第一种比较烦,网上有这种思路实现的,代码量比较庞大。bitmap移动时要注意的问题很多,一不小心就bug一堆了。第二种代码量小,但需要几何功底。很丢脸的说我算了好久。才算出公式(年代久远,都忘了),不过这种方法计算量大,绘制时遍历的点少。第三种方法,代码量极少,计算量几乎没有,遍历的点是第二种方法的两倍以上。考虑到遍历的消耗和计算的复杂度,选择第三种。

这里我们选择正弦曲线和圆做交集。

 for (int i = left; i 

sin函数,x横坐标,y纵坐标,mTranX每次偏移量, 波形起伏mRadius / 4,

核心代码

利用圆的path与我们之前绘制的曲线做交集

Path pc = new Path();
      pc.addCircle(mCentrePoint.x, mCentrePoint.y, mRadius, Path.Direction.CCW);
      canvas.clipPath(pc, Region.Op.INTERSECT);
      canvas.drawPath(path2, mWavePaint);
      canvas.restore();

水位上升和水波起伏

while (isDraw) {
        if (mWaterLevel > mNowHeight) {
          mNowHeight = mNowHeight + mUpSpeed;
        }
        if (mStart) {
          if (mTranX > mRadius) {
            mTranX = 0;
          }
          mTranX = mTranX - mWaveSpeed;
        }
        drawUI();
      }

这里由于动画效果比较细腻,更新UI界面比较平凡,所以我们采用surfaceView来实现(用view实现发现有卡顿,影响体验)

完整代码

就一个waveview类直接布局中引用

注释写的应该算比较清楚了。有什么疑问的可以留言

package com.aibaide.test;


import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.PixelFormat;
import android.graphics.Point;
import android.graphics.Region;
import android.util.AttributeSet;
import android.view.SurfaceHolder;
import android.view.SurfaceView;

/**
 * gengqiquan
 * 2016年6月2日16:16:48
 * 水波显示百分比控件
 */
public class WaveView extends SurfaceView implements SurfaceHolder.Callback {

  Point mCentrePoint;
  int mNowHeight = 0;//当前水位
  int mRadius = 0;
  boolean mStart = false;//是否开始
  float mTextSise = 60;//文字大小
  Context mContext;
  int mTranX = 0;//水波平移量
  private Paint mCirclePaint;
  private Paint mOutCirclePaint;
  private Paint mWavePaint;
  private Paint mTextPaint;
  private SurfaceHolder holder;
  private RenderThread renderThread;
  private boolean isDraw = false;// 控制绘制的开关
  private int mCircleColor = Color.parseColor("#ff6600");//背景内圆颜色
  private int mOutCircleColor = Color.parseColor("#f5e6dc");//背景外圆颜色
  private int mWaveColor = Color.parseColor("#ff944d");//水波颜色
  private int mWaterLevel;// 水目标高度
  private int flowNum = 60;//水目标占百分比这里是整数。
  private int mWaveSpeed = 5;//水波起伏速度
  private int mUpSpeed = 2;//水面上升速度

  /**
   * @param context
   */
  public WaveView(Context context) {
    super(context);
    // TODO Auto-generated constructor stub
    mCOntext= context;
    init(mContext);
  }

  /**
   * @param context
   * @param attrs
   */
  public WaveView(Context context, AttributeSet attrs) {
    super(context, attrs);
    // TODO Auto-generated constructor stub
    mCOntext= context;
    init(mContext);
  }

  /**
   * @param context
   * @param attrs
   * @param defStyleAttr
   */
  public WaveView(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    // TODO Auto-generated constructor stub
    mCOntext= context;
    init(mContext);
  }

  private void init(Context context) {
    mCOntext= context;
    setZOrderOnTop(true);
    holder = this.getHolder();
    holder.addCallback(this);
    holder.setFormat(PixelFormat.TRANSLUCENT);
    renderThread = new RenderThread();

    mCirclePaint = new Paint();
    mCirclePaint.setColor(mCircleColor);
    mCirclePaint.setStyle(Paint.Style.FILL);
    mCirclePaint.setAntiAlias(true);

    mOutCirclePaint = new Paint();
    mOutCirclePaint.setColor(mOutCircleColor);
    mOutCirclePaint.setStyle(Paint.Style.FILL);
    mOutCirclePaint.setAntiAlias(true);

    mWavePaint = new Paint();
    mWavePaint.setStrokeWidth(1.0F);
    mWavePaint.setColor(mWaveColor);
    mWavePaint.setStyle(Paint.Style.FILL);
    mWavePaint.setAntiAlias(true);

    mTextPaint = new Paint();
    mTextPaint.setStrokeWidth(1.0F);
    mTextPaint.setColor(Color.WHITE);
    mTextPaint.setTextSize(mTextSise);
    mTextPaint.setTextAlign(Paint.Align.CENTER);
    mTextPaint.setStyle(Paint.Style.FILL);
    mTextPaint.setAntiAlias(true);


  }


  @Override
  public void surfaceChanged(SurfaceHolder holder, int format, int width, int height) {
    mRadius = (int) (0.5 * width * 0.92);
    mCentrePoint = new Point(width / 2, height / 2);
    mWaterLevel = (int) (2 * mRadius * flowNum / 100f);//算出目标水位高度
  }

  @Override
  public void surfaceCreated(SurfaceHolder holder) {
    isDraw = true;
    if (renderThread != null && !renderThread.isAlive())
      renderThread.start();

  }

  @Override
  public void surfaceDestroyed(SurfaceHolder holder) {
    isDraw = false;

  }

  /**
   * 绘制界面的线程
   *
   * @author Administrator
   */
  private class RenderThread extends Thread {
    @Override
    public void run() {
      // 不停绘制界面,这里是异步绘制,不采用外部通知开启绘制的方式,水波根据数据更新才会开始增长
      while (isDraw) {
        if (mWaterLevel > mNowHeight) {
          mNowHeight = mNowHeight + mUpSpeed;
        }
        if (mStart) {
          if (mTranX > mRadius) {
            mTranX = 0;
          }
          mTranX = mTranX - mWaveSpeed;
        }
        drawUI();
      }
      super.run();
    }
  }

  /**
   * 界面绘制
   */
  public void drawUI() {
    Canvas canvas = holder.lockCanvas();
    try {
      drawCanvas(canvas);
    } catch (Exception e) {
      e.printStackTrace();
    } finally {
      if (canvas != null)
        holder.unlockCanvasAndPost(canvas);
    }
  }

  private void drawCanvas(Canvas canvas) {
    //画背景圆圈
    canvas.drawCircle(mCentrePoint.x, mCentrePoint.y, mRadius / 0.92f, mOutCirclePaint);
    canvas.drawCircle(mCentrePoint.x, mCentrePoint.y, mRadius, mCirclePaint);
    if (mStart) {
      //计算正弦曲线的路径
      int mH = mCentrePoint.y + mRadius - mNowHeight;
      int left = - mRadius / 2;
      int length = 4 * mRadius;
      Path path2 = new Path();
      path2.moveTo(left, mH);

      for (int i = left; i 

最后奉上本文的源码:源码下载

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


推荐阅读
  • 在Android开发中,使用Picasso库可以实现对网络图片的等比例缩放。本文介绍了使用Picasso库进行图片缩放的方法,并提供了具体的代码实现。通过获取图片的宽高,计算目标宽度和高度,并创建新图实现等比例缩放。 ... [详细]
  • 云原生边缘计算之KubeEdge简介及功能特点
    本文介绍了云原生边缘计算中的KubeEdge系统,该系统是一个开源系统,用于将容器化应用程序编排功能扩展到Edge的主机。它基于Kubernetes构建,并为网络应用程序提供基础架构支持。同时,KubeEdge具有离线模式、基于Kubernetes的节点、群集、应用程序和设备管理、资源优化等特点。此外,KubeEdge还支持跨平台工作,在私有、公共和混合云中都可以运行。同时,KubeEdge还提供数据管理和数据分析管道引擎的支持。最后,本文还介绍了KubeEdge系统生成证书的方法。 ... [详细]
  • Android中高级面试必知必会,积累总结
    本文介绍了Android中高级面试的必知必会内容,并总结了相关经验。文章指出,如今的Android市场对开发人员的要求更高,需要更专业的人才。同时,文章还给出了针对Android岗位的职责和要求,并提供了简历突出的建议。 ... [详细]
  • 生成式对抗网络模型综述摘要生成式对抗网络模型(GAN)是基于深度学习的一种强大的生成模型,可以应用于计算机视觉、自然语言处理、半监督学习等重要领域。生成式对抗网络 ... [详细]
  • 近年来,大数据成为互联网世界的新宠儿,被列入阿里巴巴、谷歌等公司的战略规划中,也在政府报告中频繁提及。据《大数据人才报告》显示,目前全国大数据人才仅46万,未来3-5年将出现高达150万的人才缺口。根据领英报告,数据剖析人才供应指数最低,且跳槽速度最快。中国商业结合会数据剖析专业委员会统计显示,未来中国基础性数据剖析人才缺口将高达1400万。目前BAT企业中,60%以上的招聘职位都是针对大数据人才的。 ... [详细]
  • CSS3选择器的使用方法详解,提高Web开发效率和精准度
    本文详细介绍了CSS3新增的选择器方法,包括属性选择器的使用。通过CSS3选择器,可以提高Web开发的效率和精准度,使得查找元素更加方便和快捷。同时,本文还对属性选择器的各种用法进行了详细解释,并给出了相应的代码示例。通过学习本文,读者可以更好地掌握CSS3选择器的使用方法,提升自己的Web开发能力。 ... [详细]
  • 本文介绍了Java工具类库Hutool,该工具包封装了对文件、流、加密解密、转码、正则、线程、XML等JDK方法的封装,并提供了各种Util工具类。同时,还介绍了Hutool的组件,包括动态代理、布隆过滤、缓存、定时任务等功能。该工具包可以简化Java代码,提高开发效率。 ... [详细]
  • 本文介绍了C#中生成随机数的三种方法,并分析了其中存在的问题。首先介绍了使用Random类生成随机数的默认方法,但在高并发情况下可能会出现重复的情况。接着通过循环生成了一系列随机数,进一步突显了这个问题。文章指出,随机数生成在任何编程语言中都是必备的功能,但Random类生成的随机数并不可靠。最后,提出了需要寻找其他可靠的随机数生成方法的建议。 ... [详细]
  • 【Windows】实现微信双开或多开的方法及步骤详解
    本文介绍了在Windows系统下实现微信双开或多开的方法,通过安装微信电脑版、复制微信程序启动路径、修改文本文件为bat文件等步骤,实现同时登录两个或多个微信的效果。相比于使用虚拟机的方法,本方法更简单易行,适用于任何电脑,并且不会消耗过多系统资源。详细步骤和原理解释请参考本文内容。 ... [详细]
  • Android Studio Bumblebee | 2021.1.1(大黄蜂版本使用介绍)
    本文介绍了Android Studio Bumblebee | 2021.1.1(大黄蜂版本)的使用方法和相关知识,包括Gradle的介绍、设备管理器的配置、无线调试、新版本问题等内容。同时还提供了更新版本的下载地址和启动页面截图。 ... [详细]
  • 本文介绍了在SpringBoot中集成thymeleaf前端模版的配置步骤,包括在application.properties配置文件中添加thymeleaf的配置信息,引入thymeleaf的jar包,以及创建PageController并添加index方法。 ... [详细]
  • 知识图谱——机器大脑中的知识库
    本文介绍了知识图谱在机器大脑中的应用,以及搜索引擎在知识图谱方面的发展。以谷歌知识图谱为例,说明了知识图谱的智能化特点。通过搜索引擎用户可以获取更加智能化的答案,如搜索关键词"Marie Curie",会得到居里夫人的详细信息以及与之相关的历史人物。知识图谱的出现引起了搜索引擎行业的变革,不仅美国的微软必应,中国的百度、搜狗等搜索引擎公司也纷纷推出了自己的知识图谱。 ... [详细]
  • 1,关于死锁的理解死锁,我们可以简单的理解为是两个线程同时使用同一资源,两个线程又得不到相应的资源而造成永无相互等待的情况。 2,模拟死锁背景介绍:我们创建一个朋友 ... [详细]
  • 后台获取视图对应的字符串
    1.帮助类后台获取视图对应的字符串publicclassViewHelper{将View输出为字符串(注:不会执行对应的ac ... [详细]
  • XML介绍与使用的概述及标签规则
    本文介绍了XML的基本概念和用途,包括XML的可扩展性和标签的自定义特性。同时还详细解释了XML标签的规则,包括标签的尖括号和合法标识符的组成,标签必须成对出现的原则以及特殊标签的使用方法。通过本文的阅读,读者可以对XML的基本知识有一个全面的了解。 ... [详细]
author-avatar
mobiledu2502889497
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有