android 自定义圆弧,Android 自定义渐变圆弧

项目最近需要添加一个体质监测模块，需要用到渐变的圆弧，先上效果图

体质监测.png

体质监测.png

下面，讲讲我个人的绘制心得。

其实这个功能并不是很难，首先我们新建一个ProgressViewNew,在onMeasure()方法中设置控件的大小,代码里的注解应该很详细

@Override

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

setMeasuredDimension(measure(widthMeasureSpec, true), measure(heightMeasureSpec, false));

}

/**

*

* @param origin

* @param isWidth

* @return

*/

private int measure(int origin, boolean isWidth){

int result = DEFAULT_MIN_WIDTH;

int specMode = MeasureSpec.getMode(origin);//得到模式

int specSize = MeasureSpec.getSize(origin);//得到尺寸

switch (specMode) {

//EXACTLY是精确尺寸，当我们将控件的layout_width或layout_height指定为具体数值时如andorid:layout_width="50dip"，或者为FILL_PARENT是，都是控件大小已经确定的情况，都是精确尺寸。

case MeasureSpec.EXACTLY:

//AT_MOST是最大尺寸，当控件的layout_width或layout_height指定为WRAP_CONTENT时，控件大小一般随着控件的子空间或内容进行变化，此时控件尺寸只要不超过父控件允许的最大尺寸即可

case MeasureSpec.AT_MOST:

result = specSize;

if (isWidth) {

// widthForUnspecified = result;

} else {

// heightForUnspecified = result;

}

break;

//UNSPECIFIED是未指定尺寸，这种情况不多，一般都是父控件是AdapterView，通过measure方法传入的模式。

case MeasureSpec.UNSPECIFIED:

default:

result = Math.min(result, specSize);

if (isWidth) {//宽或高未指定的情况下，可以由另一端推算出来 - -如果两边都没指定就用默认值

// result = (int) (heightForUnspecified * BODY_WIDTH_HEIGHT_SCALE);

} else {

// result = (int) (widthForUnspecified / BODY_WIDTH_HEIGHT_SCALE);

}

if (result == 0) {

result = DEFAULT_MIN_WIDTH;

}

break;

}

return result;

}

下面就是主要的核心代码了，onDraw()方法中进行绘制

1. 绘制默认灰色的圆弧

//1------绘制默认灰色的圆弧

float r = Math.min(getHeight() / 2, getWidth() / 2);//半径

Paint paintDefalt = new Paint();

paintDefalt.setColor(getResources().getColor(R.color.colordefault));

//设置笔刷的样式 Paint.Cap.Round ,Cap.SQUARE等分别为圆形、方形

paintDefalt.setStrokeCap(Paint.Cap.SQUARE);

float borderWidth = DEFAULT_BORDER_WIDTH;//圆弧宽度

float centerX=(getHeight()-2*marging) / 2;

// RectF oval1=new RectF(marging,marging,getWidth()-marging,getHeight()-marging);

RectF oval1=new RectF(marging,marging,2*centerX+marging,2*centerX+marging);

/**

* Paint.Style.FILL :填充内部

Paint.Style.FILL_AND_STROKE ：填充内部和描边

Paint.Style.STROKE ：仅描边

*/

paintDefalt.setStyle(Paint.Style.STROKE);//设置填充样式

paintDefalt.setAntiAlias(true);//抗锯齿功能

paintDefalt.setStrokeWidth(borderWidth);//设置画笔宽度

// 该类是第二个参数是角度的开始，第三个参数是多少度

// canvas.drawCircle(getWidth() / 2, getHeight() / 2, r, paintCircle);//画圆,圆心在中心位置,半径为长宽小者的一半

/**

* drawArc(RectF oval, float startAngle, float sweepAngle, boolean useCenter, Paint paint)//画弧，

参数一是RectF对象，一个矩形区域椭圆形的界限用于定义在形状、大小、电弧，

参数二是起始角(度)在电弧的开始，

参数三扫描角(度)开始顺时针测量的，参数四是如果这是真的话,包括椭圆中心的电弧,并关闭它,如果它是假这将是一个弧线,参数五是Paint对象；

*/

//绘制默认灰色的圆弧

canvas.drawArc(oval1, 180, 180, false, paintDefalt);//小弧形

// 参数一为渐变起初点坐标x位置，参数二为y轴位置，参数三和四分辨对应渐变终点，最后参数为平铺方式，这里设置为镜像.

2. 绘制当前进度的圆弧

//2-----绘制当前进度的圆弧

Paint paintCurrent = new Paint();

paintCurrent.setStyle(Paint.Style.STROKE);//设置填充样式

paintCurrent.setAntiAlias(true);//抗锯齿功能

paintCurrent.setStrokeWidth(borderWidth);//设置画笔宽度

//设置笔刷的样式 Paint.Cap.Round ,Cap.SQUARE等分别为圆形、方形

paintCurrent.setStrokeCap(Paint.Cap.SQUARE);

/**

* static final Shader.TileMode CLAMP: 边缘拉伸.

static final Shader.TileMode MIRROR：在水平方向和垂直方向交替景象, 两个相邻图像间没有缝隙.

Static final Shader.TillMode REPETA：在水平方向和垂直方向重复摆放,两个相邻图像间有缝隙缝隙.

*/

LinearGradient lg=new LinearGradient(0,0,100,100,colors,positions, Shader.TileMode.MIRROR); //渐变颜色

// 创建SweepGradient对象

// 第一个,第二个参数中心坐标

// 后面的参数与线性渲染相同

//18.5/24.0/28.0/35.0

positions[0]=Float.parseFloat(df.format(position_line[0]/maxCount));

positions[1]=Float.parseFloat(df.format(position_line[1]/maxCount));

positions[2]=Float.parseFloat(df.format(position_line[2]/maxCount));

positions[3]=Float.parseFloat(df.format(position_line[3]/maxCount));

positions[4]=Float.parseFloat(df.format(position_line[4]/maxCount));

SweepGradient sweepGradient = new SweepGradient(centerX+padding, centerX+padding, colors, positions);

Matrix matrix = new Matrix();

matrix.setRotate(130, centerX, centerX);//加上旋转还是很有必要的，每次最右边总是有一部分多余了,不太美观,也可以不加

sweepGradient.setLocalMatrix(matrix);

paintCurrent.setShader(sweepGradient);

// canvas.drawArc(oval1, 180, currentAngle, false, paintCurrent);//小弧形

//当前进度

canvas.drawArc(oval1, startAngle, currentAngle, false, paintCurrent);

注意:应为圆弧是根据不同的数值而变化的，所以里面加入了，每个color显示对应的区域点

//18.5/24.0/28.0/35.0

positions[0]=Float.parseFloat(df.format(position_line[0]/maxCount));

positions[1]=Float.parseFloat(df.format(position_line[1]/maxCount));

positions[2]=Float.parseFloat(df.format(position_line[2]/maxCount));

positions[3]=Float.parseFloat(df.format(position_line[3]/maxCount));

positions[4]=Float.parseFloat(df.format(position_line[4]/maxCount));

4.绘制相关文字

//3----文字

//内容显示文字

Paint vTextPaint = new Paint();

vTextPaint.setTextSize(textSize);

vTextPaint.setColor(Color.BLACK);

vTextPaint.setAntiAlias(true);//抗锯齿功能

// vTextPaint.setStrokeWidth((float) 3.0);

vTextPaint.setTextAlign(Paint.Align.CENTER);

//TODO 等待修改

canvas.drawText("瘦", marging, centerX+marging+textSize+padding, vTextPaint);

canvas.drawText("胖", getWidth()-marging, centerX+marging+textSize+padding, vTextPaint);

//圆环中心的文字

vTextPaint.setTextSize(BIM_textSize);

canvas.drawText("BMI指数", getWidth()/2, (int)((centerX+marging)/3*1.5+textSize), vTextPaint);

//设置肥胖指数

/**

* 常用的字体风格名称还有：

* Typeface.BOLD //粗体

* Typeface.BOLD_ITALIC //粗斜体

* Typeface.ITALIC //斜体

* Typeface.NORMAL //常规

*/

vTextPaint.setTextSize(Number_textSize);

Typeface font = Typeface.create(Typeface.SANS_SERIF, Typeface.BOLD);

vTextPaint.setTypeface( font );

canvas.drawText(PANG_NUMBER, getWidth()/2, (int)((centerX+marging)/3*2.5+textSize), vTextPaint);

5.最后在绘制圆上的小点，就完成了啊

这里绘制园上的点有两种方法：

也就是本文中用到的，把画布旋转相应的角度，绘制点，然后，在旋转到原来的位置，就可以了，

为什么要这么做呢，因为我们绘制的是一个圆，之前也想通过计算来绘制的，但是一直不太准确，最后，使用了这种方法

第二种就是通过计算啦，已知一个圆的圆心，半径，以及旋转的角度，求圆上的一点，哈哈，应该还是挺好算的呀

//4---绘制圆弧上的小圆球--根据currentAngle

/**

* Paint.Style.FILL :填充内部

Paint.Style.FILL_AND_STROKE ：填充内部和描边

Paint.Style.STROKE ：仅描边

*/

canvas.translate(getWidth()/2, getHeight()/2);//这时候的画布已经移动到了中心位置

Paint paintCircle = new Paint();

paintCircle.setStyle(Paint.Style.FILL);//设置填充样式

paintCircle.setAntiAlias(true);//抗锯齿功能

paintCircle.setColor(Color.WHITE);

// paintCircle.setStrokeWidth(borderLitalWidth);//设置画笔宽度

// canvas.drawCircle((float)(centerX+padding-centerX*Math.cos(currentAngle)), (float)(centerX+padding-centerX*Math.sin(currentAngle)), DEFAULT_LITLE_WIDTH, paintCircle);//画圆,圆心在中心位置,半径为长宽小者的一半

// canvas.drawCircle(0, 0, DEFAULT_LITLE_WIDTH, paintCircle);//这时候的画布已经移动到了中心位置

/**

* 第一个参数为正则顺时针，否则逆时针

* 后面两个参数是圆心

* 画布的旋转一定要在，画图形之前进行旋转

*/

// canvas.rotate(-currentAngle, centerX+padding, centerX+padding);//以圆心旋转的

// canvas.drawCircle(padding,centerX+padding,DEFAULT_LITLE_WIDTH,paintCircle);

// canvas.rotate(currentAngle, centerX+padding, centerX+padding);//以圆心旋转的

canvas.rotate(currentAngle);

canvas.drawCircle(-centerX,0,DEFAULT_LITLE_WIDTH,paintCircle);

canvas.rotate(-currentAngle);

最后在加上动画就ok啦

/**

* 为进度设置动画

* @param last

* @param current

*/

private void setAnimation(float last, float current, int length) {

progressAnimator = ValueAnimator.ofFloat(last, current);

Log.e("last=====",last+"");

Log.e("current=====",current+"");

progressAnimator.setDuration(length);

// progressAnimator.setTarget(currentAngle);

progressAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

@Override

public void onAnimationUpdate(ValueAnimator animation) {

currentAngle= (float) animation.getAnimatedValue();

invalidate();

}

});

progressAnimator.start();

}

注意:

第一个参数是需要动画的起始位置角度，

第二个参数是最终的位置角度,

第三个参数是，运动的速度

项目已经上传到github上了,欢迎大家start和fork