Question

我必须制作一个视图，其中每种颜色代表一个固定的百分比。

Answer 1

您可以开始使用以下视图。

对于不同分辨率的屏幕，此视图大小会有所不同。请确保为不同的分辨率提供不同的大小（无论何处指出）。

CircularCompletionView （将此文件存储在某个包中）

public class CircularCompletionView extends View {

private int completionPercent=0;
private Paint paint = new Paint();
private int radius = 100;
private int strokeSize = 20;
private int textSize = 10;
private int diameter = radius * 2;

public CircularCompletionView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
    super(context, attrs, defStyleAttr, defStyleRes);
}

public CircularCompletionView(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    // TODO Auto-generated constructor stub
}

public CircularCompletionView(Context context, AttributeSet attrs) {
    super(context, attrs);
    // TODO Auto-generated constructor stub
}

public CircularCompletionView(Context context) {
    super(context);
    // TODO Auto-generated constructor stub
}

public void setCompletionPercentage(int completion){
    completionPercent = completion;//size should change for different Resolution screens
    invalidate();
}

public void setTextSize(int size){
    textSize = size;//size should change for different Resolution screens
    invalidate();
}

public void setStrokeSize(int size){
    strokeSize = size;//size should change for different Resolution screens
    invalidate();
}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    int width=MeasureSpec.getSize(widthMeasureSpec);
    int height=MeasureSpec.getSize(heightMeasureSpec);
    if(width > height){
        width = height;
    }
    else{
        height = width;
    }

    diameter = width;
    radius = diameter/2;

    int newWidthMeasureSpec=MeasureSpec.makeMeasureSpec(width, MeasureSpec.EXACTLY);
    int newHeightMeasureSpec=MeasureSpec.makeMeasureSpec(width, MeasureSpec.EXACTLY);

    super.onMeasure(newWidthMeasureSpec, newHeightMeasureSpec);
}

@Override
protected void onDraw(Canvas canvas) {
    paint.setColor(Color.parseColor("#dedede"));  // circle stroke color- grey
    paint.setStrokeWidth(strokeSize);
    paint.setAntiAlias(true);
    paint.setStyle(Paint.Style.STROKE);

    canvas.drawCircle(radius, radius, radius-10, paint);

    paint.setColor(Color.parseColor("#04B404"));  // circle stroke color(indicating completion Percentage) - green
    paint.setStrokeWidth(strokeSize);   
    paint.setStyle(Paint.Style.FILL);

    final RectF oval = new RectF();
    paint.setStyle(Paint.Style.STROKE);
    oval.set(10,10,(diameter)-10,(diameter)-10);

    canvas.drawArc(oval, 270, ((completionPercent*360)/100), false, paint);

    paint.setTextAlign(Align.CENTER);
    paint.setColor(Color.parseColor("#282828"));  // text color - dark grey

    paint.setStyle(Paint.Style.FILL);
    paint.setTextSize(textSize);

    canvas.drawText(completionPercent + "%", radius, radius+(paint.getTextSize()/2), paint);

}

}

在XML中使用它

<package.CircularCompletionView 
    android:id="@+id/ccv"
    android:layout_width="100dp"
    android:layout_height="100dp"/>

在活动中获取对此视图的引用，并按如下方式设置完成百分比。

CircularCompletionView ccv= (CircularCompletionView) findViewById(R.id.ccv);
    ccv.setCompletionPercentage(66);
    ccv.setTextSize(16);
    ccv.setStrokeSize(20);

Answer 2

最后，我使用此代码实现了我想要的目标：

public class CircularCompletionView extends View {

    private int completionPercent=0;
    private Paint paint = new Paint();
    private int radius = 100;
    private int strokeSize = 20;
    private int textSize = 10;
    private int diameter = radius * 2;


    public CircularCompletionView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        // TODO Auto-generated constructor stub
    }

    public CircularCompletionView(Context context, AttributeSet attrs) {
        super(context, attrs);
        // TODO Auto-generated constructor stub
    }

    public CircularCompletionView(Context context) {
        super(context);
        // TODO Auto-generated constructor stub
    }

    public void setCompletionPercentage(int completion){
        completionPercent = completion;//size should change for different Resolution screens
        invalidate();
    }

    public void setTextSize(int size){
        textSize = size;//size should change for different Resolution screens
        invalidate();
    }

    public void setStrokeSize(int size){
        strokeSize = size;//size should change for different Resolution screens
        invalidate();
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int width=MeasureSpec.getSize(widthMeasureSpec);
        int height=MeasureSpec.getSize(heightMeasureSpec);
        if(width > height){
            width = height;
        }
        else{
            height = width;
        }

        diameter = width;
        radius = diameter/2;

        int newWidthMeasureSpec=MeasureSpec.makeMeasureSpec(width, MeasureSpec.EXACTLY);
        int newHeightMeasureSpec=MeasureSpec.makeMeasureSpec(width, MeasureSpec.EXACTLY);

        super.onMeasure(newWidthMeasureSpec, newHeightMeasureSpec);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        paint.setColor(Color.parseColor("#dedede"));  // circle stroke color- grey
        paint.setStrokeWidth(strokeSize);
        paint.setAntiAlias(true);
        paint.setStyle(Paint.Style.STROKE);
       /* Path segmentPath = new Path();
        final RectF oval1 = new RectF();
        segmentPath.addArc(oval1, 90, 180 );
        canvas.drawPath(segmentPath, paint);*/
        canvas.drawCircle(radius, radius, radius - 10, paint);

        paint.setColor(Color.parseColor("#04B404"));  // circle stroke color(indicating completion Percentage) - green
        paint.setStrokeWidth(strokeSize);
        paint.setStyle(Paint.Style.FILL);

        final RectF oval = new RectF();
        paint.setStyle(Paint.Style.STROKE);
        oval.set(10, 10, (diameter) - 10, (diameter) - 10);

        canvas.drawArc(oval, 270, ((50 * 360) / 100), false, paint);
        paint.setColor(Color.parseColor("#ff0000"));
        canvas.drawArc(oval, 270 + 180, ((30 * 360) / 100), false, paint);
        paint.setColor(Color.parseColor("#0000ff"));
        canvas.drawArc(oval, 270+180+108, ((20*360)/100), false, paint);


        paint.setTextAlign(Paint.Align.CENTER);
        paint.setColor(Color.parseColor("#282828"));  // text color - dark grey

        paint.setStyle(Paint.Style.FILL);
        paint.setTextSize(textSize);

        canvas.drawText(completionPercent + "%", radius, radius+(paint.getTextSize()/2), paint);

    }

}

要为固定百分比着色，您必须在drawArc（）方法的参数sweepAngle中提供percentvalue。希望它也能帮到你:)。

我必须使用不同的颜色制作圆形视图笔划，每种颜色代表固定的百分比

2 个答案: