在自定义视图中显示曲线形状进度
Display curve shape progress in custom View
我正在使用圆形的自定义视图。我几乎已经通过创建自定义 class 并实现了它。但我的问题是在不同颜色的曲线形状中也显示出不同的进展，这取决于动态数据。这是我实现的图像
我想要这样http://imgur.com/cmNKWBF。
所以我的问题是如何用不同的颜色和动态数据绘制弧形（曲线形状）进度。
帮助将不胜感激!!
以下代码满足您的要求。
public class ProgressWidget extends View {
private int percent = 25;
private int radiusOuter = 110, radiusInner = 90;
private Paint mPaintOuter;
private Paint mPaintPercent;
private Paint mInnerCircle, mTextPaint;
private int mCenterX, mCenterY;
private int textSize;
private String mTimedText = percent+"%";
private int desiredWidth = 300;
private int desiredHeight = 300;
private boolean isRunning;
private boolean isMeasured;
public ProgressWidget(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
initialization();
}
public ProgressWidget(Context context, AttributeSet attrs) {
super(context, attrs);
initialization();
}
public ProgressWidget(Context context) {
super(context);
initialization();
}
private void initialization() {
mPaintOuter = new Paint(Paint.ANTI_ALIAS_FLAG);
mPaintOuter.setColor(Color.DKGRAY);
mPaintPercent = new Paint(Paint.ANTI_ALIAS_FLAG);
mPaintPercent.setColor(Color.CYAN);
mInnerCircle = new Paint(Paint.ANTI_ALIAS_FLAG);
mInnerCircle.setColor(Color.BLACK);
mTextPaint = new Paint();
mTextPaint.setColor(Color.CYAN);
mTextPaint.setTextSize(textSize);
}
public void getUpdateRadius() {
if (!isMeasured) {
isMeasured = true;
int size = getWidgetWidth() < getWidgetHeight() ? getWidgetWidth() : getWidgetHeight();
radiusOuter = (int) (size * 0.35f);
radiusInner = (int) (size * 0.3f);
textSize = (int) (size * 0.08f);
setTimedTextSize(textSize);
}
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
mCenterX = getWidth() / 2;
mCenterY = getHeight() / 2;
drawSecCircle(canvas);
drawInnerCircle(canvas);
drawPercentageText(canvas);
}
private void drawInnerCircle(Canvas canvas) {
canvas.drawCircle(mCenterX, mCenterY, radiusInner, mInnerCircle);
}
private void drawSecCircle(Canvas canvas) {
canvas.drawCircle(mCenterX, mCenterY, radiusOuter, mPaintOuter);
canvas.drawArc(new RectF(mCenterX - radiusOuter, mCenterY - radiusOuter, mCenterX + radiusOuter, mCenterY + radiusOuter), -90, percent*3.6f, true, mPaintPercent);
}
public void drawPercentageText(Canvas canvas) {
RectF areaRect = new RectF(mCenterX - radiusInner, mCenterY - radiusInner, mCenterX + radiusInner, mCenterY + radiusInner);
RectF bounds = new RectF(areaRect);
// measure text width
bounds.right = mTextPaint.measureText(mTimedText, 0, mTimedText.length());
// measure text height
bounds.bottom = mTextPaint.descent() - mTextPaint.ascent();
bounds.left += (areaRect.width() - bounds.right) / 2.0f;
bounds.top += (areaRect.height() - bounds.bottom) / 2.0f;
canvas.drawText(mTimedText, bounds.left, bounds.top - mTextPaint.ascent(), mTextPaint);
}
public void setTimedTextSize(int textSize) {
this.textSize = textSize;
mTextPaint.setTextSize(textSize);
}
public void setTimedText(String timedText) {
this.mTimedText = timedText;
invalidate();
}
public void setPercentage(int percent) {
this.percent = percent;
mTimedText = String.valueOf(percent)+"%";
invalidate();
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int widthMode = MeasureSpec.getMode(widthMeasureSpec);
int widthSize = MeasureSpec.getSize(widthMeasureSpec);
int heightMode = MeasureSpec.getMode(heightMeasureSpec);
int heightSize = MeasureSpec.getSize(heightMeasureSpec);
setWidgetWidth((int) (widthSize * 0.6));
setWidgetHeight((int) (heightSize * 0.6));
int width;
int height;
//Measure Width
if (widthMode == MeasureSpec.EXACTLY) {
width = widthSize;
} else if (widthMode == MeasureSpec.AT_MOST) {
width = Math.min(getWidgetWidth(), widthSize);
} else {
width = getWidgetWidth();
}
if (heightMode == MeasureSpec.EXACTLY) {
height = heightSize;
} else if (heightMode == MeasureSpec.AT_MOST) {
height = Math.min(getWidgetHeight(), heightSize);
} else {
height = getWidgetHeight();
}
setWidgetWidth(width);
setWidgetHeight(height);
getUpdateRadius();
setMeasuredDimension(width, height);
}
public int getWidgetWidth() {
return desiredWidth;
}
public void setWidgetWidth(int clockWidgetWidth) {
this.desiredWidth = clockWidgetWidth;
}
public int getWidgetHeight() {
return desiredHeight;
}
public void setWidgetHeight(int clockWidgetHeight) {
this.desiredHeight = clockWidgetHeight;
}
}
在对自定义 CircleView class 进行一些更改后，我终于解决了这个问题。为此，我为每个地区计算了 sweepAngle 和 startAngle。这是我发布的部分代码。
我必须展示三个不同的区域，所以我采用了三个不同的 Paints 并为每个区域声明了变量。喜欢，
private float absStart;
private float absSweep;
private float preStart;
private float preSweep;
private float vacStart;
private float vacSweep;
private Paint absPaint;
private Paint prePaint;
private Paint vacPaint;
现在初始化所有三个区域的绘画。在这里我只发布其中一个
absPaint = new Paint();
absPaint.setStrokeCap(Paint.Cap.ROUND);
absPaint.setStyle(Paint.Style.STROKE);
absPaint.setStrokeJoin(Paint.Join.ROUND);
absPaint.setColor(Color.parseColor("#eb537a"));
absPaint.setStrokeWidth((float) 22.5);
现在为了计算每个区域的面积，我创建了一个名为 updateAngles() 的方法，它具有三个浮点参数
public void updateAngles(float absPercent, float prePercent, float vacPercent) {
float total = absPercent + prePercent + vacPercent;
absStart = 0;
absSweep = (absPercent / total) * 360;
preStart = absSweep;
preSweep = (prePercent / total) * 360;
vacStart = absSweep + preSweep;
vacSweep = (vacPercent / total) * 360;
Log.e("Angles are:", absStart + ":" + absSweep + ":" + preStart + ":" + preSweep + ":" + vacStart + ":" + vacSweep);
invalidate();
}
此方法将在初始化 CircleView 后在您想要的 activity 中调用，并像 cv.updateAngles(20,20,60); 一样调用，其中 cv 是 CircleView 的对象。
现在在 onDraw() 方法中，您需要为每个区域绘制弧线。
mInnerRectF.set(45, 45, 330, 330);
canvas.drawArc(mInnerRectF, absStart, absSweep, false, absPaint);
canvas.drawArc(mInnerRectF, preStart, preSweep, false, prePaint);
canvas.drawArc(mInnerRectF, vacStart, vacSweep, false, vacPaint);
所以这终于给了我想要的输出。
但是如果依赖于不同的设备，如手机屏幕、7 英寸和 10 英寸平板电脑，那么您应该使用 DisplayMetrics。
我正在使用圆形的自定义视图。我几乎已经通过创建自定义 class 并实现了它。但我的问题是在不同颜色的曲线形状中也显示出不同的进展，这取决于动态数据。这是我实现的图像
我想要这样http://imgur.com/cmNKWBF。
所以我的问题是如何用不同的颜色和动态数据绘制弧形（曲线形状）进度。
帮助将不胜感激!!
以下代码满足您的要求。
public class ProgressWidget extends View {
private int percent = 25;
private int radiusOuter = 110, radiusInner = 90;
private Paint mPaintOuter;
private Paint mPaintPercent;
private Paint mInnerCircle, mTextPaint;
private int mCenterX, mCenterY;
private int textSize;
private String mTimedText = percent+"%";
private int desiredWidth = 300;
private int desiredHeight = 300;
private boolean isRunning;
private boolean isMeasured;
public ProgressWidget(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
initialization();
}
public ProgressWidget(Context context, AttributeSet attrs) {
super(context, attrs);
initialization();
}
public ProgressWidget(Context context) {
super(context);
initialization();
}
private void initialization() {
mPaintOuter = new Paint(Paint.ANTI_ALIAS_FLAG);
mPaintOuter.setColor(Color.DKGRAY);
mPaintPercent = new Paint(Paint.ANTI_ALIAS_FLAG);
mPaintPercent.setColor(Color.CYAN);
mInnerCircle = new Paint(Paint.ANTI_ALIAS_FLAG);
mInnerCircle.setColor(Color.BLACK);
mTextPaint = new Paint();
mTextPaint.setColor(Color.CYAN);
mTextPaint.setTextSize(textSize);
}
public void getUpdateRadius() {
if (!isMeasured) {
isMeasured = true;
int size = getWidgetWidth() < getWidgetHeight() ? getWidgetWidth() : getWidgetHeight();
radiusOuter = (int) (size * 0.35f);
radiusInner = (int) (size * 0.3f);
textSize = (int) (size * 0.08f);
setTimedTextSize(textSize);
}
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
mCenterX = getWidth() / 2;
mCenterY = getHeight() / 2;
drawSecCircle(canvas);
drawInnerCircle(canvas);
drawPercentageText(canvas);
}
private void drawInnerCircle(Canvas canvas) {
canvas.drawCircle(mCenterX, mCenterY, radiusInner, mInnerCircle);
}
private void drawSecCircle(Canvas canvas) {
canvas.drawCircle(mCenterX, mCenterY, radiusOuter, mPaintOuter);
canvas.drawArc(new RectF(mCenterX - radiusOuter, mCenterY - radiusOuter, mCenterX + radiusOuter, mCenterY + radiusOuter), -90, percent*3.6f, true, mPaintPercent);
}
public void drawPercentageText(Canvas canvas) {
RectF areaRect = new RectF(mCenterX - radiusInner, mCenterY - radiusInner, mCenterX + radiusInner, mCenterY + radiusInner);
RectF bounds = new RectF(areaRect);
// measure text width
bounds.right = mTextPaint.measureText(mTimedText, 0, mTimedText.length());
// measure text height
bounds.bottom = mTextPaint.descent() - mTextPaint.ascent();
bounds.left += (areaRect.width() - bounds.right) / 2.0f;
bounds.top += (areaRect.height() - bounds.bottom) / 2.0f;
canvas.drawText(mTimedText, bounds.left, bounds.top - mTextPaint.ascent(), mTextPaint);
}
public void setTimedTextSize(int textSize) {
this.textSize = textSize;
mTextPaint.setTextSize(textSize);
}
public void setTimedText(String timedText) {
this.mTimedText = timedText;
invalidate();
}
public void setPercentage(int percent) {
this.percent = percent;
mTimedText = String.valueOf(percent)+"%";
invalidate();
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int widthMode = MeasureSpec.getMode(widthMeasureSpec);
int widthSize = MeasureSpec.getSize(widthMeasureSpec);
int heightMode = MeasureSpec.getMode(heightMeasureSpec);
int heightSize = MeasureSpec.getSize(heightMeasureSpec);
setWidgetWidth((int) (widthSize * 0.6));
setWidgetHeight((int) (heightSize * 0.6));
int width;
int height;
//Measure Width
if (widthMode == MeasureSpec.EXACTLY) {
width = widthSize;
} else if (widthMode == MeasureSpec.AT_MOST) {
width = Math.min(getWidgetWidth(), widthSize);
} else {
width = getWidgetWidth();
}
if (heightMode == MeasureSpec.EXACTLY) {
height = heightSize;
} else if (heightMode == MeasureSpec.AT_MOST) {
height = Math.min(getWidgetHeight(), heightSize);
} else {
height = getWidgetHeight();
}
setWidgetWidth(width);
setWidgetHeight(height);
getUpdateRadius();
setMeasuredDimension(width, height);
}
public int getWidgetWidth() {
return desiredWidth;
}
public void setWidgetWidth(int clockWidgetWidth) {
this.desiredWidth = clockWidgetWidth;
}
public int getWidgetHeight() {
return desiredHeight;
}
public void setWidgetHeight(int clockWidgetHeight) {
this.desiredHeight = clockWidgetHeight;
}
}
在对自定义 CircleView class 进行一些更改后，我终于解决了这个问题。为此，我为每个地区计算了 sweepAngle 和 startAngle。这是我发布的部分代码。
我必须展示三个不同的区域，所以我采用了三个不同的 Paints 并为每个区域声明了变量。喜欢，
private float absStart;
private float absSweep;
private float preStart;
private float preSweep;
private float vacStart;
private float vacSweep;
private Paint absPaint;
private Paint prePaint;
private Paint vacPaint;
现在初始化所有三个区域的绘画。在这里我只发布其中一个
absPaint = new Paint();
absPaint.setStrokeCap(Paint.Cap.ROUND);
absPaint.setStyle(Paint.Style.STROKE);
absPaint.setStrokeJoin(Paint.Join.ROUND);
absPaint.setColor(Color.parseColor("#eb537a"));
absPaint.setStrokeWidth((float) 22.5);
现在为了计算每个区域的面积，我创建了一个名为 updateAngles() 的方法，它具有三个浮点参数
public void updateAngles(float absPercent, float prePercent, float vacPercent) {
float total = absPercent + prePercent + vacPercent;
absStart = 0;
absSweep = (absPercent / total) * 360;
preStart = absSweep;
preSweep = (prePercent / total) * 360;
vacStart = absSweep + preSweep;
vacSweep = (vacPercent / total) * 360;
Log.e("Angles are:", absStart + ":" + absSweep + ":" + preStart + ":" + preSweep + ":" + vacStart + ":" + vacSweep);
invalidate();
}
此方法将在初始化 CircleView 后在您想要的 activity 中调用，并像 cv.updateAngles(20,20,60); 一样调用，其中 cv 是 CircleView 的对象。
现在在 onDraw() 方法中，您需要为每个区域绘制弧线。
mInnerRectF.set(45, 45, 330, 330);
canvas.drawArc(mInnerRectF, absStart, absSweep, false, absPaint);
canvas.drawArc(mInnerRectF, preStart, preSweep, false, prePaint);
canvas.drawArc(mInnerRectF, vacStart, vacSweep, false, vacPaint);
所以这终于给了我想要的输出。
但是如果依赖于不同的设备，如手机屏幕、7 英寸和 10 英寸平板电脑，那么您应该使用 DisplayMetrics。