1.无意看到了一个指南针的UI，在这里简单的模仿了一下。其实就是第画布的一些变化而已。
别人的效果图是：
3.简单说一下思路：
1)首先是画一个黑色圆盘
2) 然后画圆盘上的刻度(就是对Canvas一些变换)
3) 文字添加
4.直接上代码：
1 public class CompassView extends View { 2 private Paint circlePaint, tickPaint; 3 private TextPaint textPaint; 4 // 指定控件宽和高，用于自适应 5 private float vWidth, vHeight; 6 // 圆盘的半径 7 private float compassRadiu; 8 // 刻度线段的长度 9 private float tickHeight; 10 // 字体高度和宽度 11 private float textHeight, textWidth;; 12 13 public CompassView(Context context) { 14 super(context); 15 initPaint(context); 16 } 17 18 public CompassView(Context context, AttributeSet attrs) { 19 super(context, attrs); 20 initPaint(context); 21 } 22 23 private void initPaint(Context context) { 24 // 对画圆盘画初始化 25 circlePaint = new Paint(Paint.ANTI_ALIAS_FLAG | Paint.DITHER_FLAG); 26 circlePaint.setColor(Color.BLACK); 27 circlePaint.setStyle(Paint.Style.FILL); 28 29 // 对刻度画笔进行初始化 30 tickPaint = new Paint(Paint.ANTI_ALIAS_FLAG); 31 tickPaint.setColor(Color.RED); 32 tickPaint.setStrokeWidth(3); 33 34 // 对字的画笔进行初始化 35 textPaint = new TextPaint(Paint.ANTI_ALIAS_FLAG); 36 textPaint.setColor(Color.WHITE); 37 textPaint.setTextSize(20); 38 39 } 40 41 // 自适应在这里做的 42 @Override 43 protected void onSizeChanged(int w, int h, int oldw, int oldh) { 44 // 获取控件的宽和高 45 vWidth = w; 46 vHeight = h; 47 compassRadiu = Math.min(w, h) / 2; 48 tickHeight = (1 / 12F) * compassRadiu; 49 textHeight = textPaint.descent() - textPaint.ascent(); 50 51 } 52 53 @Override 54 protected void onDraw(Canvas canvas) { 55 canvas.drawColor(Color.CYAN); 56 // 黑色圆盘 57 canvas.drawCircle(compassRadiu, compassRadiu, compassRadiu, circlePaint); 58 // 画红色的刻度 59 int degress; 60 float textWidth; 61 62 for (int i = 0; i < 24; i++) { 63 canvas.save(); 64 canvas.translate(compassRadiu, compassRadiu); 65 // 当前canvas旋转角度 66 degress = i * 15; 67 canvas.rotate(15 * i); 68 69 canvas.drawLine(0, -compassRadiu, 0, -compassRadiu + tickHeight, 70 tickPaint); 71 switch (degress) { 72 case 0: 73 textWidth = textPaint.measureText("45"); 74 drawText(canvas, "45", textWidth); 75 break; 76 77 case 45: 78 textWidth = textPaint.measureText("东"); 79 drawText(canvas, "东", textWidth); 80 break; 81 case 90: 82 textWidth = textPaint.measureText("135"); 83 drawText(canvas, "135", textWidth); 84 break; 85 case 135: 86 textWidth = textPaint.measureText("南"); 87 drawText(canvas, "南", textWidth); 88 break; 89 case 180: 90 textWidth = textPaint.measureText("225"); 91 drawText(canvas, "225", textWidth); 92 break; 93 case 225: 94 textWidth = textPaint.measureText("西"); 95 drawText(canvas, "西", textWidth); 96 break; 97 case 270: 98 textWidth = textPaint.measureText("315"); 99 drawText(canvas, "315", textWidth); 100 break; 101 case 315: 102 textWidth = textPaint.measureText("北"); 103 drawText(canvas, "北", textWidth); 104 canvas.drawLine(0, 105 -compassRadiu + tickHeight + textHeight + 10, 106 -textWidth / 3, -compassRadiu + tickHeight + textHeight 107 + 30, tickPaint); 108 canvas.drawLine(0, 109 -compassRadiu + tickHeight + textHeight + 10, 110 textWidth / 3, -compassRadiu + tickHeight + textHeight 111 + 30, tickPaint); 112 113 break; 114 default: 115 break; 116 } 117 canvas.restore(); 118 } 119 120 } 121 122 private void drawText(Canvas canvas, String text, float textWidth) { 123 124 canvas.drawText(text, -(textWidth / 2), -compassRadiu + tickHeight 125 + textHeight, textPaint); 126 127 } 128 }
运行后的效果图是：
