热门标签 | 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 

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

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


推荐阅读
  • 2023年京东Android面试真题解析与经验分享
    本文由一位拥有6年Android开发经验的工程师撰写,详细解析了京东面试中常见的技术问题。涵盖引用传递、Handler机制、ListView优化、多线程控制及ANR处理等核心知识点。 ... [详细]
  • 深入解析Android自定义View面试题
    本文探讨了Android Launcher开发中自定义View的重要性,并通过一道经典的面试题,帮助开发者更好地理解自定义View的实现细节。文章不仅涵盖了基础知识,还提供了实际操作建议。 ... [详细]
  • 深入理解OAuth认证机制
    本文介绍了OAuth认证协议的核心概念及其工作原理。OAuth是一种开放标准,旨在为第三方应用提供安全的用户资源访问授权,同时确保用户的账户信息(如用户名和密码)不会暴露给第三方。 ... [详细]
  • Android 九宫格布局详解及实现:人人网应用示例
    本文深入探讨了人人网Android应用中独特的九宫格布局设计,解析其背后的GridView实现原理,并提供详细的代码示例。这种布局方式不仅美观大方,而且在现代Android应用中较为少见,值得开发者借鉴。 ... [详细]
  • 优化ListView性能
    本文深入探讨了如何通过多种技术手段优化ListView的性能,包括视图复用、ViewHolder模式、分批加载数据、图片优化及内存管理等。这些方法能够显著提升应用的响应速度和用户体验。 ... [详细]
  • 深入解析 Apache Shiro 安全框架架构
    本文详细介绍了 Apache Shiro,一个强大且灵活的开源安全框架。Shiro 专注于简化身份验证、授权、会话管理和加密等复杂的安全操作,使开发者能够更轻松地保护应用程序。其核心目标是提供易于使用和理解的API,同时确保高度的安全性和灵活性。 ... [详细]
  • 作为一名专业的Web前端工程师,掌握HTML和CSS的命名规范是至关重要的。良好的命名习惯不仅有助于提高代码的可读性和维护性,还能促进团队协作。本文将详细介绍Web前端开发中常用的HTML和CSS命名规范,并提供实用的建议。 ... [详细]
  • 本文介绍了Java并发库中的阻塞队列(BlockingQueue)及其典型应用场景。通过具体实例,展示了如何利用LinkedBlockingQueue实现线程间高效、安全的数据传递,并结合线程池和原子类优化性能。 ... [详细]
  • 题目描述:给定n个半开区间[a, b),要求使用两个互不重叠的记录器,求最多可以记录多少个区间。解决方案采用贪心算法,通过排序和遍历实现最优解。 ... [详细]
  • 本文介绍如何通过Windows批处理脚本定期检查并重启Java应用程序,确保其持续稳定运行。脚本每30分钟检查一次,并在需要时重启Java程序。同时,它会将任务结果发送到Redis。 ... [详细]
  • MySQL中枚举类型的所有可能值获取方法
    本文介绍了一种在MySQL数据库中查询枚举(ENUM)类型字段所有可能取值的方法,帮助开发者更好地理解和利用这一数据类型。 ... [详细]
  • Android LED 数字字体的应用与实现
    本文介绍了一种适用于 Android 应用的 LED 数字字体(digital font),并详细描述了其在 UI 设计中的应用场景及其实现方法。这种字体常用于视频、广告倒计时等场景,能够增强视觉效果。 ... [详细]
  • 本文详细探讨了在Android 8.0设备上使用ChinaCock的TCCBarcodeScanner进行扫码时出现的应用闪退问题,并提供了解决方案。通过调整配置文件,可以有效避免这一问题。 ... [详细]
  • 本章将深入探讨移动 UI 设计的核心原则,帮助开发者构建简洁、高效且用户友好的界面。通过学习设计规则和用户体验优化技巧,您将能够创建出既美观又实用的移动应用。 ... [详细]
  • 本文介绍如何在应用程序中使用文本输入框创建密码输入框,并通过设置掩码来隐藏用户输入的内容。我们将详细解释代码实现,并提供专业的补充说明。 ... [详细]
author-avatar
一起回到我们的那个夏天
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有