android 自定义仪表盘(一) 绘制仪表盘边框

效果图

android 自定义仪表盘(一) 绘制仪表盘边框

1.首先在该目录下新增attr.xml文件

android 自定义仪表盘(一) 绘制仪表盘边框

2.然后在该文件下加入如下内容:

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <!-- 仪表盘自定义属性 -->
    <attr name="color_dial_lower" format="color"/>
    <attr name="color_dial_middle" format="color"/>
    <attr name="color_dial_high" format="color"/>
    <attr name="stroke_width_dial" format="dimension"/>
    <declare-styleable name="ClockView">
        <attr name="color_dial_lower"/>
        <attr name="color_dial_middle"/>
        <attr name="color_dial_high"/>
        <attr name="stroke_width_dial"/>
      
    </declare-styleable>

</resources>

3.然后新增一个DrawArc类,代码如下:

public class DrawArc extends View {
//前三个属性保存边框颜色值
    private static final int DEFAULT_COLOR_LOWER = Color.parseColor("#1d953f");
    private static final int DEFAULT_COLOR_MIDDLE = Color.parseColor("#228fbd");
    private static final int DEFAULT_COLOR_HIGH = Color.RED;
    private int leftBodercolor;
    private int middleBodercolor;
    private int rightBodercolor;
    private RectF mRect;
// 绘制画笔
    private Paint arcPaint;
    private int strokeWidth;
//画笔边框宽度
    private static final int DEFAULT_STROKE_WIDTH = 8;
    public DrawArc(Context context) {
        this(context,null);
    }

    public DrawArc(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs,0);
    }

    public DrawArc(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initAttrs(context, attrs);
        initPaint();
    }
//初始化画笔
    private void initPaint() {
        arcPaint = new Paint();
        arcPaint.setAntiAlias(true);
        arcPaint.setStyle(Paint.Style.STROKE);
        arcPaint.setStrokeWidth(strokeWidth);
    }
//获取自定义属性值
    private void initAttrs(Context context, AttributeSet attrs) {
        TypedArray attributes = context.obtainStyledAttributes(attrs,R.styleable.ClockView);
        leftBodercolor = attributes.getColor(R.styleable.ClockView_color_dial_lower, DEFAULT_COLOR_LOWER);
        middleBodercolor = attributes.getColor(R.styleable.ClockView_color_dial_middle, DEFAULT_COLOR_MIDDLE);
        rightBodercolor = attributes.getColor(R.styleable.ClockView_color_dial_high, DEFAULT_COLOR_HIGH);
        strokeWidth = (int) attributes.getDimension(R.styleable.ClockView_stroke_width_dial, dp2px(DEFAULT_STROKE_WIDTH));
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
//绘制表盘边框
        drawArc(canvas);
    }
    private void drawArc(Canvas canvas){
        int r=Math.min(getRight()/2,getBottom()/2);
        int PaddingLeft=(getWidth()-r)/2;
        mRect = new RectF(PaddingLeft, PaddingLeft, r+PaddingLeft, r+PaddingLeft);
        arcPaint.setColor(leftBodercolor);
        canvas.drawArc(mRect, 135, 54, false, arcPaint);
        arcPaint.setColor(middleBodercolor);
        canvas.drawArc(mRect, 189, 162, false, arcPaint);
        arcPaint.setColor(rightBodercolor);
        canvas.drawArc(mRect, 351, 54, false, arcPaint);
    }
//dp 转成px单位
    protected int dp2px(int dpVal) {
        return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dpVal, getResources().getDisplayMetrics());
    }
}