天天看点

自定义CircleProgressView控件

1.思路:

1.自定义中间的圆形,
2.自定义中间显示的文字;
3.自定义外圈的弧线。
           

2.代码实现:

package com.best.keke.circleprogressdemo;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;

/**
 * Created by keke on 2016/5/29.
 */
public class CircleProgressView extends View {

    private int widthMeasure;
    private int heightMeasure;

    private RectF arcRect;  // 弧线的矩形区域
    private float sweepAngle;  //圆弧扫过的角度
    private float sweepValues = ;
    private Paint arcPaint;     // 创建圆弧的画笔样式

    private float circleXY; // 圆的x/y坐标
    private float radius;   // 圆的半径
    private Paint circlePaint;  // 画圆的画笔

    private String drawText;   // 写的文字
    private float textSize; // 文字的大小
    private Paint textPaint;   // 文字的画笔

    public CircleProgressView(Context context) {
        super(context);
    }

    public CircleProgressView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public CircleProgressView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);


    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

        widthMeasure = MeasureSpec.getSize(widthMeasureSpec);
        heightMeasure = MeasureSpec.getSize(heightMeasureSpec);
        Log.e("tag","宽:"+widthMeasure + "高:" + heightMeasure + "");
        setMeasuredDimension(widthMeasure, heightMeasure);
        // 初始化数据
        initView();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        /**
         * 弧线
         * @param oval  指定圆弧的外轮廓矩形区域
         * @param startAngle    圆弧起始角度,单位为度
         * @param sweepAngle    圆弧扫过的角度,顺时针方向,单位为度
         * @param useCenter true 表示在绘制圆弧的时候将圆心包括在内,可以用来绘制扇形,false类似空心圆管状
         * @param paint 画笔
         */
        canvas.drawArc(arcRect, , sweepAngle, false, arcPaint);
        /**
         * 圆
         * @param cx     圆心x坐标
         * @param cy     圆心y坐标
         * @param radius  半径
         * @param paint  画笔
         */
        canvas.drawCircle(circleXY, circleXY, radius, circlePaint);
        /**
         * 文字
         * @param text  显示的文字
         * @param start  第一个文字的起始位置
         * @param end     最后一个文字结束的位置
         * @param x     文字的X坐标
         * @param y     文字基线的y坐标
         * @param paint  画笔
         */
        canvas.drawText(drawText, , drawText.length(), circleXY,
                circleXY + (textSize / ), textPaint);

    }

    private void initView() {
        float length = ;
        if (heightMeasure >= widthMeasure) {
            length = widthMeasure;
        } else {
            length = heightMeasure;
        }

        // 定义弧形的外接矩形的坐标
        arcRect = new RectF(
                (float) (length * ),
                (float) (length * ),
                (float) (length * ),
                (float) (length * ));
        sweepAngle = (sweepValues / f) * f;
        Log.i("tag","角度:"+String.valueOf(sweepAngle));

        arcPaint = new Paint();
        arcPaint.setAntiAlias(true);    // 消除锯齿
        arcPaint.setStrokeWidth((float) (length * ));    // 设置划线的线宽
        arcPaint.setColor(Color.BLUE);
        arcPaint.setStyle(Paint.Style.STROKE);  // 设置画笔空心


        circleXY = length / ;
        Log.i("tag","length:"+String.valueOf(length));
        Log.i("tag","圆心坐标:"+String.valueOf(circleXY));
        radius = (float) ((length * ) / );
        Log.i("tag","半径:"+String.valueOf(radius));
        circlePaint = new Paint();
        circlePaint.setAntiAlias(true);
        circlePaint.setColor(Color.GREEN);


        drawText = setText();
        textSize = setTextSize();
        textPaint = new Paint();
        textPaint.setTextSize(textSize);
        textPaint.setTextAlign(Paint.Align.CENTER);
    }

    /**
     * 设置显示的文字的大小
     *
     * @return
     */
    private float setTextSize() {
        this.invalidate();
        return ;
    }

    /**
     * 设置显示的文字
     *
     * @return
     */
    private String setText() {
        this.invalidate();  // 更新显示
        return "keke_come on";
    }

    /**
     * 给扇形的大小进行赋值
     * @param sweepValues
     */
    public void setSweepValues(float sweepValues) {
        if (sweepValues != ) {
            sweepValues = sweepValues;
        } else {
            sweepValues = ;
        }
        this.invalidate();
    }
}
           
public class MainActivity extends AppCompatActivity {

    private CircleProgressView circleProgress;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        circleProgress = (CircleProgressView) findViewById(R.id.circleProgress);
        circleProgress.setSweepValues();
    }
}
           

3.效果展示:

自定义CircleProgressView控件

继续阅读