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

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

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

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

以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索android
， android
， 水波效果
360加速球
android 百分比控件、球形百分比、android 水波扩散动画、android圆圈扩散水波、android 水波，以便于您获取更多的相关知识。

时间： 2024-10-03 15:54:22

android球形水波百分比控件代码_Android的相关文章

Android实现显示电量的控件代码_Android

下面介绍了Android实现显示电量的控件代码,具体代码如下: 1.目录结构,本人是使用安卓死丢丢. 2.运行界面,输入框中输入数值,点击刷新,会再电池中显示出相应的电量 3.绘制自定义电池控件,首先,新建一个类BatteryState继承View private Context mContext; private float width; private float height; private Paint mPaint; private float powerQuantity=0.5f;/

Android HorizontalScrollView内子控件横向拖拽实例代码_Android

前言         网上ListView上下拖动的例子有,效果也很好,但是项目要横着拖的,只要硬着头皮自己写(主要是没找到合适的),参考文章1修改而来,分享一下. 正文 截图 实现代码: public class HoDragActivity extends Activity { private LinearLayout main; private GestureDetector mGestureDetector; @Override public void onCreate(Bundle s

Android开发中include控件用法分析_Android

本文实例讲述了Android开发中include控件用法.分享给大家供大家参考,具体如下: 我们知道,基于Android系统的应用程序的开发,界面设计是非常重要的,它关系着用户体验的好坏.一个好的界面设计,不是用一个xml布局就可以搞定的.当一个activity中的控件非常多的时候,所有的布局文件都放在一个xml文件中,很容易想象那是多么糟糕的事情!笔者通过自身的经历,用include控件来解决这个问题,下面是一个小例子,仅仅实现的是布局,没有响应代码的设计. user.xml文件内容如下: <

Android开发之TimePicker控件用法实例详解_Android

本文实例分析了Android开发之TimePicker控件用法.分享给大家供大家参考,具体如下: 新建项目: New Android Project-> Project name:HelloSpinner Build Target:Android 2.2 Application name:HelloSpinner Package name:com.b510 Create Activity:MainActivity Min SDK Version:9 Finish 运行效果: 如果: return

Android开发之基本控件和四种布局方式详解_Android

Android中的控件的使用方式和iOS中控件的使用方式基本相同,都是事件驱动.给控件添加事件也有接口回调和委托代理的方式.今天这篇博客就总结一下Android中常用的基本控件以及布局方式.说到布局方式Android和iOS还是区别挺大的,在iOS中有Frame绝对布局和AutoLayout相对布局.而在Android中的布局方式就比较丰富了,今天博客中会介绍四种常用的布局方式.先总结一下控件,然后再搞一搞基本方式,开发环境还是用的Mac下的Android Studio.开始今天的正题, 虽然A

Android线程中设置控件的值提示报错的解决方法_Android

本文实例讲述了Android线程中设置控件的值提示报错的解决方法.分享给大家供大家参考,具体如下: 在Android线程中设置控件的值一般会与Handler联合使用,如下: package com.yarin.android.Examples_04_15; import android.app.Activity; import android.os.Bundle; import android.os.Handler; import android.os.Message; import andro

Android UI开发 View自绘控件 分享_Android

很多时候想要设计漂亮的Android UI,使用Android自带的控件无法满足我们的需要就要考虑自绘控件,在Android界面显示类View,可以通过继承扩展重写相关方法来实现我们的图形绘制. 首先我们需要了解下View类的底层实现,在SDK中我们可以看到View直接继承于Java的基类Object,实现了图形绘制和按键事件 Drawable.Callback KeyEvent.Callback的相关方法,我们自绘时主要实现其内部的onDraw方法,相关的界面计算可以重写onMeasure方法

Android中shape定义控件的使用_Android

Android中常常使用shape来定义控件的一些显示属性,今天看了一些shape的使用,对shape有了大体的了解,稍作总结: 先看下面的代码: <shape> <!-- 实心 --> <solid android:color="#ff9d77"/> <!-- 渐变 --> <gradient android:startColor="#ff8c00" android:endColor="#FFFFFF

Android OnCreate()中获取控件高度与宽度两种方法详解_Android

Android OnCreate()中获取控件高度与宽度 试过在OnCreate()中获取控件高度与宽度的童鞋都知道,getWidth()与getHeight()方法返回是0,具体原因 看一下Activity的生命周期 就会明白. 上代码: 方法一: int w = View.MeasureSpec.makeMeasureSpec(0,View.MeasureSpec.UNSPECIFIED); int h = View.MeasureSpec.makeMeasureSpec(0,View.Me