首页 > 系统 > Android > 正文

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

2019-12-12 04:43:46
字体:
来源:转载
供稿:网友

本文主要介绍的是一个球形水波的百分比控件,市面上有各种形形色色的百分比控件,我一直觉得水波是最炫的,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;/** * 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 < 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;//  }}

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

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

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表