广告
返回顶部
首页 > 资讯 > 移动开发 >android球形水波百分比控件代码
  • 611
分享到

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

百分比Android 2022-06-06 06:06:15 611人浏览 薄情痞子
摘要

本文主要介绍的是一个球形水波的百分比控件,市面上有各种形形色色的百分比控件,我一直觉得水波是最炫的,UI给了我这个机会,然而网上搜了一大堆,不是太复杂,代码太多(反正我是调不出

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

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

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

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

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

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


 for (int i = left; i < length; i++) {
        int x = i;
        int y = (int) (Math.sin(Math.toRadians(x + mTranX) / 2) * mRadius / 4);
        path2.lineTo(x, mH + y);
      }

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;

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;//水面上升速度
  
  public WaveView(Context context) {
    super(context);
    // TODO Auto-generated constructor stub
    mContext = context;
    init(mContext);
  }
  
  public WaveView(Context context, AttributeSet attrs) {
    super(context, attrs);
    // TODO Auto-generated constructor stub
    mContext = context;
    init(mContext);
  }
  
  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;
  }
  
  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 < length; i++) {
        int x = i;
        int y = (int) (Math.sin(Math.toRadians(x + mTranX) / 2) * mRadius / 4);
        path2.lineTo(x, mH + y);
      }
      path2.lineTo(length, mH);
      path2.lineTo(length, mCentrePoint.y + mRadius);
      path2.lineTo(0, mCentrePoint.y + mRadius);
      path2.lineTo(0, mH);
      canvas.save();
      //这里与圆形取交集,除去正弦曲线多画的部分
      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();
      //绘制文字
      canvas.drawText(flowNum + "%", mCentrePoint.x, mCentrePoint.y, mTextPaint);
    }
  }
  public void setFlowNum(int num) {
    flowNum = num;
    mStart = true;
  }
  public void setTextSise(float s) {
    mTextSise = s;
    mTextPaint.setTextSize(s);
  }
  //设置水波起伏速度
  public void setWaveSpeed(int speed) {
    mWaveSpeed = speed;
  }
  //设置水面上升速度
  public void setUpSpeed(int speed) {
    mUpSpeed = speed;
  }
  public void setColor(int waveColor, int circleColor, int outcircleColor) {
    mWaveColor = waveColor;
    mCircleColor = circleColor;
    mOutCircleColor = outcircleColor;
    mWavePaint.setColor(mWaveColor);
    mCirclePaint.setColor(mCircleColor);
    mOutCirclePaint.setColor(mOutCircleColor);
  }
//精确算法,每次正弦曲线从曲线与圆的交集处开始
//  private int getX(double h) {
//    int x = 0;
//    int R = mRadius;
//    if (h < R) {
//      double t = 2 * R * h - h * h;
//      x = (int) (R - Math.abs(Math.sqrt(t)));
//    } else {
//      double t = -2 * R * h + h * h;
//      x = (int) (R - Math.abs(Math.sqrt(t)));
//    }
//    return x;
//  }
}

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

您可能感兴趣的文章:Android实现水波纹控件的方法Android语音声波控件 Android条形波控件


--结束END--

本文标题: android球形水波百分比控件代码

本文链接: https://www.lsjlt.com/news/23290.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • android球形水波百分比控件代码
    本文主要介绍的是一个球形水波的百分比控件,市面上有各种形形色色的百分比控件,我一直觉得水波是最炫的,UI给了我这个机会,然而网上搜了一大堆,不是太复杂,代码太多(反正我是调不出...
    99+
    2022-06-06
    百分比 Android
  • Android自定义View圆形百分比控件(一)
    做一个自定义View的小练习,效果如下 只需要画一个圆、一个圆弧、一个百分比文本,添加一个点击事件,传入百分比重绘 1、在res/values文件夹下新建attrs.xml文...
    99+
    2022-06-06
    view 百分比 Android
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作