在自定義中顯示曲線形狀進度查看

Question

我正在使用具有圓形形狀的自定義視圖。幾乎我已經通過創建一個自定義類來實現它。但是我的問題在不同顏色的曲線形狀中也顯示出不同的進展，並且這取決於動態數據。這裏是我已經實現的圖像

我想要這樣http://imgur.com/cmNKWBF。

所以我的問題是如何繪製不同顏色和動態數據的弧（曲線形狀）進度。

幫助將不勝感激！

Answer 1

最後我在Custom CircleView類中做了一些修改後解決了這個問題。爲此，我計算了每個地區的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); 

我們計算這有三個浮動參數

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(); 
} 

這種方法會在你需要的活性被稱爲我已經創建了一個名爲updateAngles()的方法，每個區域的面積在初始化CircleView並呼籲像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它。

Answer 2

下面的代碼可以滿足您的要求。

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; 
    } 
}