android 自定义仪表盘(一) 绘制仪表盘边框
效果图
1.首先在该目录下新增attr.xml文件
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()); } }