问题
I am working with custom view which is in a circle shape. Almost i have done it with creating a custom class and implemented that. But my problem is too show a different progress in a curve shape with different color and which is depends on dynamic data. Here is the image which i have implemented
I want like this http://imgur.com/cmNKWBF.
So my question is how to draw arc (curve shape) progress with different color and with dynamic data.
Help would be appreciated !!
回答1:
Finally i have resolved this after making some changes in Custom CircleView class. For that i have counted a sweepAngle and startAngle for each region. Here is some part of code i am posting.
I had to show three different regions so i have taken three different Paints and declared variable for each regions. Like,
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;
Now init your all three regions paints. Here i just posting one of them
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);
Now to calculate the area of each region i had created a method named updateAngles() which have three float parameters
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();
}
This method will be called in your desired activity after initialize CircleView and call like cv.updateAngles(20,20,60); where cv is object of CircleView.
Now in onDraw() method you need to draw arc for each region.
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);
So this finally giving me a my desired output.
But if there is depend on different devices like mobile screen , 7 inch and 10 inch tablets then you should use DisplayMetrics for it.
回答2:
Below code satisfies your requirement.
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;
}
}
来源：https://stackoverflow.com/questions/30432781/display-curve-shape-progress-in-custom-view