Android 自定义UI--指南针

2023-02-22 21:48:11

有了之前的基础，下面开始实现一个简单的指南针。首先来看一下效果图，

Android 自定义UI--指南针

我们可以粗略将这个指南针分为三个部分，一是圆形背景，二是刻度，三是文本。那么在写代码的时候，就可以声明三个Paint画笔来画以上三个物体。代码如下：

  1. package com.example.apptest;
  2. import android.content.Context;
  3. import android.graphics.Canvas;
  4. import android.graphics.Color;
  5. import android.graphics.Paint;
  6. import android.util.AttributeSet;
  7. import android.util.Log;
  8. import android.view.View;
  9. /**
  10. * 指南针
  11. *
  12. */
  13. class CompassView extends View {
  14. //刻度画笔
  15. private Paint markerPaint;
  16. //文本画笔
  17. private Paint textPaint;
  18. //圆形画笔
  19. private Paint circlePaint;
  20. //字符串
  21. private String northString;
  22. //字符串
  23. private String eastString;
  24. //字符串
  25. private String southString;
  26. //字符串
  27. private String westString;
  28. //文本高度
  29. private int textHeight;
  30. //轴
  31. private float bearing;
  32. /**
  33. *
  34. * @param _bearing
  35. */
  36. public void setBearing(float _bearing) {
  37. bearing = _bearing;
  38. }
  39. /**
  40. *
  41. * @return
  42. */
  43. public float getBearing() {
  44. return bearing;
  45. }
  46. public CompassView(Context context) {
  47. super(context);
  48. initCompassView();
  49. }
  50. public CompassView(Context context, AttributeSet attrs) {
  51. super(context, attrs);
  52. initCompassView();
  53. }
  54. public CompassView(Context context, AttributeSet attrs, int defaultStyle) {
  55. super(context, attrs, defaultStyle);
  56. initCompassView();
  57. }
  58. protected void initCompassView() {
  59. setFocusable(true);
  60. // 东西南北
  61. northString = "北";
  62. eastString = "东";
  63. southString = "南";
  64. westString = "西";
  65. // 设置实心圆画笔
  66. circlePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
  67. circlePaint.setColor(Color.BLACK);
  68. circlePaint.setStrokeWidth(1);
  69. circlePaint.setStyle(Paint.Style.FILL_AND_STROKE);
  70. // 设置线条画笔 刻度
  71. markerPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
  72. markerPaint.setColor(Color.RED);
  73. // 设置坐标画笔 东西南北 度数
  74. textPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
  75. textPaint.setColor(Color.WHITE);
  76. // 设置文字高度
  77. textHeight = (int) textPaint.measureText("yY");
  78. Log.i("textHeight", textHeight+"");
  79. }
  80. @Override
  81. protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
  82. int measuredWidth = measure(widthMeasureSpec);
  83. int measuredHeight = measure(heightMeasureSpec);
  84. int d = Math.min(measuredWidth, measuredHeight);
  85. setMeasuredDimension(d, d);
  86. }
  87. /**
  88. * @category
  89. * @param measureSpec
  90. * @return
  91. */
  92. private int measure(int measureSpec) {
  93. int result = 0;
  94. int specMode = MeasureSpec.getMode(measureSpec);
  95. int specSize = MeasureSpec.getSize(measureSpec);
  96. if (specMode == MeasureSpec.UNSPECIFIED) {
  97. result = 200;
  98. } else {
  99. result = specSize;
  100. }
  101. return result;
  102. }
  103. @Override
  104. protected void onDraw(Canvas canvas) {
  105. // 圆心坐标
  106. int px = getMeasuredWidth() / 2;
  107. Log.i("px", px+"");
  108. int py = getMeasuredHeight() / 2;
  109. Log.i("py", py+"");
  110. // 半径 取最小值
  111. int radius = Math.min(px, py);
  112. Log.i("radius", radius+"");
  113. // 画圆
  114. canvas.drawCircle(px, py, radius, circlePaint);
  115. canvas.save();
  116. canvas.rotate(-bearing, px, py);
  117. // 东西南北 坐标位置
  118. int textWidth = (int) textPaint.measureText("W");
  119. Log.i("textWidth", textWidth+"");
  120. int cardinalX = px - textWidth / 2;
  121. Log.i("cardinalX", cardinalX+"");
  122. int cardinalY = py - radius + textHeight;
  123. Log.i("cardinalY", cardinalY+"");
  124. //画24个刻度
  125. for (int i = 0; i < 24; i++) {
  126. //画刻度
  127. canvas.drawLine(px, py - radius, px, py - radius + 10, markerPaint);
  128. canvas.save();
  129. //移动原点textHeight距离 开始画东西南北以及度数
  130. canvas.translate(0, textHeight);
  131. //判断如果满足条件画东西南北
  132. if (i % 6 == 0) {
  133. String dirString = "";
  134. switch (i) {
  135. case (0): {
  136. dirString = northString;
  137. // 画指南针
  138. int arrowY = 2 * textHeight;
  139. canvas.drawLine(px, arrowY, px - 5, 3 * textHeight,
  140. markerPaint);
  141. canvas.drawLine(px, arrowY, px + 5, 3 * textHeight,
  142. markerPaint);
  143. break;
  144. }
  145. case (6):
  146. dirString = eastString;
  147. break;
  148. case (12):
  149. dirString = southString;
  150. break;
  151. case (18):
  152. dirString = westString;
  153. break;
  154. }
  155. //画东西南北
  156. canvas.drawText(dirString, cardinalX, cardinalY, textPaint);
  157. }else if (i % 3 == 0) {//判断如果满足条件画4个度数
  158. String angle = String.valueOf(i * 15);
  159. float angleTextWidth = textPaint.measureText(angle);
  160. int angleTextX = (int) (px - angleTextWidth / 2);
  161. int angleTextY = py - radius + textHeight;
  162. //画弧度数
  163. canvas.drawText(angle, angleTextX, angleTextY, textPaint);
  164. }
  165. canvas.restore();
  166. //每隔15度旋转一下
  167. canvas.rotate(15, px, py);
  168. }
  169. canvas.restore();
  170. }
  171. }

这个例子中，多了一个measure过程，重写了OnMeasure()过程，用于计算View的大小。先不细说这个，下面重点说一下如何画图的。背景很简单，不多说，难点还是在于刻度以及文字的实现。我们知道，画文本可以使用drawText()方法，画刻度也就是画直线，可以使用drawLine()方法。那关键问题就是在哪个位置画刻度以及文本。本例子中，圆形的大小取决于屏幕的宽度，可以看到圆形的直接就是屏幕的宽度。画刻度线也是从圆心坐标开始的，直接使用drawLine()方法。还有一个地方需要注意就是东西南北以及刻度的文字是移动了一段距离后开始绘制的，使用的方法就是translate()，在画完14个刻度之后调用这个方法。

上一篇：【原】npm 常用命令详解


下一篇：vue局部组件