1.無意看到了一個(gè)指南針的UI，在這里簡單的模仿了一下。其實(shí)就是第畫布的一些變化而已。

別人的效果圖是：

　　

3.簡單說一下思路：

　　1)首先是畫一個(gè)黑色圓盤

　　2) 然后畫圓盤上的刻度(就是對Canvas一些變換)

　　3) 文字添加

4.直接上代碼：

　　

  1 public class CompassView extends View {
  2     private Paint circlePaint, tickPaint;
  3     private TextPaint textPaint;
  4     // 指定控件寬和高，用于自適應(yīng)
  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         // 對刻度畫筆進(jìn)行初始化
 30         tickPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
 31         tickPaint.setColor(Color.RED);
 32         tickPaint.setStrokeWidth(3);
 33 
 34         // 對字的畫筆進(jìn)行初始化
 35         textPaint = new TextPaint(Paint.ANTI_ALIAS_FLAG);
 36         textPaint.setColor(Color.WHITE);
 37         textPaint.setTextSize(20);
 38 
 39     }
 40 
 41     // 自適應(yīng)在這里做的
 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             // 當(dāng)前canvas旋轉(zhuǎn)角度
 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 }

運(yùn)行后的效果圖是：

　　

源碼下載

總結(jié)

以上是生活随笔為你收集整理的Android 画指南针的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。