Android 画指南针

1.无意看到了一个指南针的UI，在这里简单的模仿了一下。其实就是第画布的一些变化而已。

别人的效果图是：

　　

3.简单说一下思路：

　　1)首先是画一个黑色圆盘

　　2) 然后画圆盘上的刻度(就是对Canvas一些变换)

　　3) 文字添加

4.直接上代码：

　　

 public class CompassView extends View {
     private Paint circlePaint, tickPaint;
     private TextPaint textPaint;
     // 指定控件宽和高，用于自适应
     private float vWidth, vHeight;
     // 圆盘的半径
     private float compassRadiu;
     // 刻度线段的长度
     private float tickHeight;
     // 字体高度和宽度
     private float textHeight, textWidth;;

     public CompassView(Context context) {
         super(context);
         initPaint(context);
     }

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

     private void initPaint(Context context) {
         // 对画圆盘画初始化
         circlePaint = new Paint(Paint.ANTI_ALIAS_FLAG | Paint.DITHER_FLAG);
         circlePaint.setColor(Color.BLACK);
         circlePaint.setStyle(Paint.Style.FILL);

         // 对刻度画笔进行初始化
         tickPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
         tickPaint.setColor(Color.RED);
         tickPaint.setStrokeWidth(3);

         // 对字的画笔进行初始化
         textPaint = new TextPaint(Paint.ANTI_ALIAS_FLAG);
         textPaint.setColor(Color.WHITE);
         textPaint.setTextSize(20);

     }

     // 自适应在这里做的
     @Override
     protected void onSizeChanged(int w, int h, int oldw, int oldh) {
         // 获取控件的宽和高
         vWidth = w;
         vHeight = h;
         compassRadiu = Math.min(w, h) / 2;
         tickHeight = (1 / 12F) * compassRadiu;
         textHeight = textPaint.descent() - textPaint.ascent();

     }

     @Override
     protected void onDraw(Canvas canvas) {
         canvas.drawColor(Color.CYAN);
         // 黑色圆盘
         canvas.drawCircle(compassRadiu, compassRadiu, compassRadiu, circlePaint);
         // 画红色的刻度
         int degress;
         float textWidth;

         for (int i = 0; i < 24; i++) {
             canvas.save();
             canvas.translate(compassRadiu, compassRadiu);
             // 当前canvas旋转角度
             degress = i * 15;
             canvas.rotate(15 * i);

             canvas.drawLine(0, -compassRadiu, 0, -compassRadiu + tickHeight,
                     tickPaint);
             switch (degress) {
             case 0:
                 textWidth = textPaint.measureText("45");
                 drawText(canvas, "45", textWidth);
                 break;

             case 45:
                 textWidth = textPaint.measureText("东");
                 drawText(canvas, "东", textWidth);
                 break;
             case 90:
                 textWidth = textPaint.measureText("135");
                 drawText(canvas, "135", textWidth);
                 break;
             case 135:
                 textWidth = textPaint.measureText("南");
                 drawText(canvas, "南", textWidth);
                 break;
             case 180:
                 textWidth = textPaint.measureText("225");
                 drawText(canvas, "225", textWidth);
                 break;
             case 225:
                 textWidth = textPaint.measureText("西");
                 drawText(canvas, "西", textWidth);
                 break;
             case 270:
                 textWidth = textPaint.measureText("315");
                 drawText(canvas, "315", textWidth);
                 break;
             case 315:
                 textWidth = textPaint.measureText("北");
                 drawText(canvas, "北", textWidth);
                 canvas.drawLine(0,
                         -compassRadiu + tickHeight + textHeight + 10,
                         -textWidth / 3, -compassRadiu + tickHeight + textHeight
                                 + 30, tickPaint);
                 canvas.drawLine(0,
                         -compassRadiu + tickHeight + textHeight + 10,
                         textWidth / 3, -compassRadiu + tickHeight + textHeight
                                 + 30, tickPaint);

                 break;
             default:
                 break;
             }
             canvas.restore();
         }

     }

     private void drawText(Canvas canvas, String text, float textWidth) {

         canvas.drawText(text, -(textWidth / 2), -compassRadiu + tickHeight
                 + textHeight, textPaint);

     }
 }

运行后的效果图是：

　　

源码下载