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);

     }

 }

运行后的效果图是：

　　

源码下载