Android 畫指南針

標籤：

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 + textHeight107                                 + 30, tickPaint);108                 canvas.drawLine(0,109                         -compassRadiu + tickHeight + textHeight + 10,110                         textWidth / 3, -compassRadiu + tickHeight + textHeight111                                 + 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 + tickHeight125                 + textHeight, textPaint);126 127     }128 }

運行後的是：

　　

源碼下載

Android 畫指南針