android自定义简单时钟

1
2
3
4
5
6
7
8
9
10
11
<?xml version="1.0" encoding="utf-8"?>
<resources>
 <declare-styleable name="ClockView">
  <attr name="pointer_color" format="color" />
  <attr name="scale_color" format="color" />
  <attr name="one_circle_color" format="color" />
  <attr name="two_circle_color" format="color" />
  <attr name="three_circle_color" format="color" />
  <attr name="four_circle_color" format="color" />
 </declare-styleable>
</resources>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
package com.example.helloworld;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.View;

import androidx.annotation.Nullable;

import java.util.Calendar;

/**
 * 时钟
 *
 * @since 2021-02-29
 * @author Sar
 */
public class ClockView extends View {
 private static final int DEFAULT_POINTER_COLOR = Color.parseColor("#FFFFFF");
 private static final int DEFAULT_SCALE_COLOR = Color.parseColor("#FFFFFF");
 private static final int DEFAULT_ONE_CIRCLE_COLOR = Color.parseColor("#FFFFFF");
 private static final int DEFAULT_TWO_CIRCLE_COLOR = Color.parseColor("#CCCCCC");
 private static final int DEFAULT_THREE_CIRCLE_COLOR = Color.parseColor("#BBBBBB");
 private static final int DEFAULT_FOUR_CIRCLE_COLOR = Color.parseColor("#AAAAAA");
 private static final int DEFAULT_FOUR_CIRCLE_DIAMETER = 180; // 默认外圈圆直径，也就是该控件默认宽高，单位dp

 private int pointerColor; // 指针颜色
 private int scaleColor; // 刻度颜色
 private int oneCircleColor; // 中心圆颜色
 private int twoCircleColor; // 次中心圆颜色
 private int threeCircleColor; // 次外圈圆颜色
 private int fourCircleColor; // 外圈圆颜色

 private Paint paint;

 private int cx;
 private int cy;
 private int scaleStrokeWidth;
 private int hourPointerWidth;
 private int minutePointerWidth;
 private int oneCircleDiameter;
 private int twoCircleDiameter;
 private int threeCircleDiameter;
 private int fourCircleDiameter;
 private int defaultFourCircleDiameter;

 public ClockView(Context context) {
  super(context);
  init(context, null, 0);
 }

 public ClockView(Context context, @Nullable AttributeSet attrs) {
  super(context, attrs);
  init(context, attrs, 0);
 }

 public ClockView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
  super(context, attrs, defStyleAttr);
  init(context, attrs, defStyleAttr);
 }

 private void init(Context context, AttributeSet attrs, int defStyleAttr) {
  if (attrs != null) {
   TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.ClockView, defStyleAttr, 0);
   pointerColor = typedArray.getColor(R.styleable.XTClockView_pointer_color, DEFAULT_POINTER_COLOR);
   scaleColor = typedArray.getColor(R.styleable.XTClockView_scale_color, DEFAULT_SCALE_COLOR);
   oneCircleColor = typedArray.getColor(R.styleable.XTClockView_one_circle_color, DEFAULT_ONE_CIRCLE_COLOR);
   twoCircleColor = typedArray.getColor(R.styleable.XTClockView_two_circle_color, DEFAULT_TWO_CIRCLE_COLOR);
   threeCircleColor = typedArray.getColor(R.styleable.XTClockView_three_circle_color, DEFAULT_THREE_CIRCLE_COLOR);
   fourCircleColor = typedArray.getColor(R.styleable.XTClockView_four_circle_color, DEFAULT_FOUR_CIRCLE_COLOR);
   typedArray.recycle();
  } else {
   pointerColor = DEFAULT_POINTER_COLOR;
   scaleColor = DEFAULT_SCALE_COLOR;
   oneCircleColor = DEFAULT_ONE_CIRCLE_COLOR;
   twoCircleColor = DEFAULT_TWO_CIRCLE_COLOR;
   threeCircleColor = DEFAULT_THREE_CIRCLE_COLOR;
   fourCircleColor = DEFAULT_FOUR_CIRCLE_COLOR;
  }
  paint = new Paint(Paint.ANTI_ALIAS_FLAG);
  paint.setStyle(Paint.Style.FILL);
  defaultFourCircleDiameter = dp2px(context, DEFAULT_FOUR_CIRCLE_DIAMETER);
 }
 
 public void setPointerColor(int pointerColor) {
  this.pointerColor = pointerColor;
 }

 public void setScaleColor(int scaleColor) {
  this.scaleColor = scaleColor;
 }

 public void setOneCircleColor(int oneCircleColor) {
  this.oneCircleColor = oneCircleColor;
 }

 public void setTwoCircleColor(int twoCircleColor) {
  this.twoCircleColor = twoCircleColor;
 }

 public void setThreeCircleColor(int threeCircleColor) {
  this.threeCircleColor = threeCircleColor;
 }

 public void setFourCircleColor(int fourCircleColor) {
  this.fourCircleColor = fourCircleColor;
 }

 @Override
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
  super.onMeasure(widthMeasureSpec, heightMeasureSpec);
  int width = 0;
  int height = 0;
  int widthMode = MeasureSpec.getMode(widthMeasureSpec);
  int widthSize = MeasureSpec.getSize(widthMeasureSpec);
  switch (widthMode) {
   case MeasureSpec.EXACTLY:
    width = widthSize;
    break;
   case MeasureSpec.AT_MOST:
   case MeasureSpec.UNSPECIFIED:
    width = defaultFourCircleDiameter;
    break;
  }
  int heightMode = MeasureSpec.getMode(heightMeasureSpec);
  int heightSize = MeasureSpec.getSize(heightMeasureSpec);
  switch (heightMode) {
   case MeasureSpec.EXACTLY:
    height = heightSize;
    break;
   case MeasureSpec.AT_MOST:
   case MeasureSpec.UNSPECIFIED:
    height = defaultFourCircleDiameter;
    break;
  }
  setMeasuredDimension(width, height);
  cx = width / 2;
  cy = height / 2;
  fourCircleDiameter = Math.min(width, height);
  threeCircleDiameter = fourCircleDiameter * 7 / 10;
  twoCircleDiameter = fourCircleDiameter * 28 / 50;
  oneCircleDiameter = fourCircleDiameter * 3 / 50;
  scaleStrokeWidth = fourCircleDiameter / 100;
  hourPointerWidth = oneCircleDiameter * 2 / 5;
  minutePointerWidth = oneCircleDiameter / 5;
 }

 private int dp2px(Context context, int dpValue) {
  float scale = context.getResources().getDisplayMetrics().density;
  return (int) (dpValue * scale + 0.5f);
 }

 @Override
 protected void onDraw(Canvas canvas) {
  super.onDraw(canvas);
  drawCircle(canvas, fourCircleColor, fourCircleDiameter);
  drawCircle(canvas, threeCircleColor, threeCircleDiameter);
  drawCircle(canvas, twoCircleColor, twoCircleDiameter);

  drawScale(canvas);
  Calendar calendar = Calendar.getInstance();
  calendar.setTimeInMillis(System.currentTimeMillis());
  int hour = calendar.get(Calendar.HOUR);
  int minute = calendar.get(Calendar.MINUTE);
  int second = calendar.get(Calendar.SECOND);

  paint.setColor(pointerColor);
  drawPointer(canvas, (float) (hour * 30 + minute * 0.5), hourPointerWidth, cy - twoCircleDiameter / 2 * 2 / 3);
  drawPointer(canvas, minute * 6, minutePointerWidth, cy - twoCircleDiameter / 2 * 4 / 5);
  drawPointer(canvas, second * 6, minutePointerWidth, cy - twoCircleDiameter / 2 * 8 / 9);

  paint.setStrokeWidth(0);
  drawCircle(canvas, oneCircleColor, oneCircleDiameter);

  postInvalidateDelayed(1000);
 }

 private void drawCircle(Canvas canvas, int circleColor, int circleDiameter) {
  paint.setColor(circleColor);
  canvas.drawCircle(cx, cy, circleDiameter / 2, paint);
 }

 private void drawScale(Canvas canvas) {
  paint.setColor(scaleColor);
  paint.setStrokeWidth(scaleStrokeWidth);
  for (int i = 0; i < 12; i++) {
   canvas.save();
   canvas.rotate(i * 30, cx, cy);
   canvas.drawLine(cx, (fourCircleDiameter - threeCircleDiameter) / 6, cx, (fourCircleDiameter - threeCircleDiameter) / 3, paint);
   canvas.restore();
  }
 }

 private void drawPointer(Canvas canvas, float rotateDegrees, float strokeWidth, float stopY) {
  paint.setStrokeWidth(strokeWidth);
  canvas.save();
  canvas.rotate(rotateDegrees, cx, cy);
  canvas.drawLine(cx, cy, cx, stopY, paint);
  canvas.restore();
 }
}