Android 画指南针

浏览数：28 / 时间：2015年06月11日

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 }