├── .gitignore
├── .idea
├── .name
├── codeStyles
│ ├── Project.xml
│ └── codeStyleConfig.xml
├── gradle.xml
├── misc.xml
├── runConfigurations.xml
└── vcs.xml
├── app
├── .gitignore
├── build.gradle
├── proguard-rules.pro
└── src
│ ├── androidTest
│ └── java
│ │ └── com
│ │ └── caobo
│ │ └── customizeview
│ │ └── ExampleInstrumentedTest.kt
│ ├── main
│ ├── AndroidManifest.xml
│ ├── java
│ │ └── com
│ │ │ └── caobo
│ │ │ └── customizeview
│ │ │ ├── CustomizeView.kt
│ │ │ └── MainActivity.kt
│ └── res
│ │ ├── drawable-v24
│ │ └── ic_launcher_foreground.xml
│ │ ├── drawable
│ │ └── ic_launcher_background.xml
│ │ ├── layout
│ │ └── activity_main.xml
│ │ ├── mipmap-anydpi-v26
│ │ ├── ic_launcher.xml
│ │ └── ic_launcher_round.xml
│ │ ├── mipmap-hdpi
│ │ ├── ic_launcher.png
│ │ └── ic_launcher_round.png
│ │ ├── mipmap-mdpi
│ │ ├── ic_launcher.png
│ │ └── ic_launcher_round.png
│ │ ├── mipmap-xhdpi
│ │ ├── ic_launcher.png
│ │ └── ic_launcher_round.png
│ │ ├── mipmap-xxhdpi
│ │ ├── ic_launcher.png
│ │ └── ic_launcher_round.png
│ │ ├── mipmap-xxxhdpi
│ │ ├── ic_launcher.png
│ │ └── ic_launcher_round.png
│ │ └── values
│ │ ├── colors.xml
│ │ ├── strings.xml
│ │ └── styles.xml
│ └── test
│ └── java
│ └── com
│ └── caobo
│ └── customizeview
│ └── ExampleUnitTest.kt
├── build.gradle
├── gradle.properties
├── gradle
└── wrapper
│ ├── gradle-wrapper.jar
│ └── gradle-wrapper.properties
├── gradlew
├── gradlew.bat
├── readme.md
└── settings.gradle
/.gitignore:
--------------------------------------------------------------------------------
1 | *.iml
2 | .gradle
3 | /local.properties
4 | /.idea/caches
5 | /.idea/libraries
6 | /.idea/modules.xml
7 | /.idea/workspace.xml
8 | /.idea/navEditor.xml
9 | /.idea/assetWizardSettings.xml
10 | .DS_Store
11 | /build
12 | /captures
13 | .externalNativeBuild
14 | .cxx
15 |
--------------------------------------------------------------------------------
/.idea/.name:
--------------------------------------------------------------------------------
1 | CustomizeView
--------------------------------------------------------------------------------
/.idea/codeStyles/Project.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 | xmlns:android
20 |
21 | ^$
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 | xmlns:.*
31 |
32 | ^$
33 |
34 |
35 | BY_NAME
36 |
37 |
38 |
39 |
40 |
41 |
42 | .*:id
43 |
44 | http://schemas.android.com/apk/res/android
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 | .*:name
54 |
55 | http://schemas.android.com/apk/res/android
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 | name
65 |
66 | ^$
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 | style
76 |
77 | ^$
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 | .*
87 |
88 | ^$
89 |
90 |
91 | BY_NAME
92 |
93 |
94 |
95 |
96 |
97 |
98 | .*
99 |
100 | http://schemas.android.com/apk/res/android
101 |
102 |
103 | ANDROID_ATTRIBUTE_ORDER
104 |
105 |
106 |
107 |
108 |
109 |
110 | .*
111 |
112 | .*
113 |
114 |
115 | BY_NAME
116 |
117 |
118 |
119 |
120 |
121 |
122 |
123 |
124 |
125 |
--------------------------------------------------------------------------------
/.idea/codeStyles/codeStyleConfig.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
--------------------------------------------------------------------------------
/.idea/gradle.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
18 |
19 |
--------------------------------------------------------------------------------
/.idea/misc.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/.idea/runConfigurations.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
11 |
12 |
--------------------------------------------------------------------------------
/.idea/vcs.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
--------------------------------------------------------------------------------
/app/.gitignore:
--------------------------------------------------------------------------------
1 | /build
2 |
--------------------------------------------------------------------------------
/app/build.gradle:
--------------------------------------------------------------------------------
1 | apply plugin: 'com.android.application'
2 |
3 | apply plugin: 'kotlin-android'
4 |
5 | apply plugin: 'kotlin-android-extensions'
6 |
7 | android {
8 | compileSdkVersion 29
9 | buildToolsVersion "29.0.2"
10 | defaultConfig {
11 | applicationId "com.caobo.customizeview"
12 | minSdkVersion 26
13 | targetSdkVersion 29
14 | versionCode 1
15 | versionName "1.0"
16 | testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
17 | }
18 | buildTypes {
19 | release {
20 | minifyEnabled false
21 | proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
22 | }
23 | }
24 | }
25 |
26 | dependencies {
27 | implementation fileTree(dir: 'libs', include: ['*.jar'])
28 | implementation"org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
29 | implementation 'androidx.appcompat:appcompat:1.1.0'
30 | implementation 'androidx.core:core-ktx:1.0.2'
31 | implementation 'androidx.constraintlayout:constraintlayout:1.1.3'
32 | testImplementation 'junit:junit:4.12'
33 | androidTestImplementation 'androidx.test.ext:junit:1.1.1'
34 | androidTestImplementation 'androidx.test.espresso:espresso-core:3.2.0'
35 | }
36 |
--------------------------------------------------------------------------------
/app/proguard-rules.pro:
--------------------------------------------------------------------------------
1 | # Add project specific ProGuard rules here.
2 | # You can control the set of applied configuration files using the
3 | # proguardFiles setting in build.gradle.
4 | #
5 | # For more details, see
6 | # http://developer.android.com/guide/developing/tools/proguard.html
7 |
8 | # If your project uses WebView with JS, uncomment the following
9 | # and specify the fully qualified class name to the JavaScript interface
10 | # class:
11 | #-keepclassmembers class fqcn.of.javascript.interface.for.webview {
12 | # public *;
13 | #}
14 |
15 | # Uncomment this to preserve the line number information for
16 | # debugging stack traces.
17 | #-keepattributes SourceFile,LineNumberTable
18 |
19 | # If you keep the line number information, uncomment this to
20 | # hide the original source file name.
21 | #-renamesourcefileattribute SourceFile
22 |
--------------------------------------------------------------------------------
/app/src/androidTest/java/com/caobo/customizeview/ExampleInstrumentedTest.kt:
--------------------------------------------------------------------------------
1 | package com.caobo.customizeview
2 |
3 | import androidx.test.platform.app.InstrumentationRegistry
4 | import androidx.test.ext.junit.runners.AndroidJUnit4
5 |
6 | import org.junit.Test
7 | import org.junit.runner.RunWith
8 |
9 | import org.junit.Assert.*
10 |
11 | /**
12 | * Instrumented test, which will execute on an Android device.
13 | *
14 | * See [testing documentation](http://d.android.com/tools/testing).
15 | */
16 | @RunWith(AndroidJUnit4::class)
17 | class ExampleInstrumentedTest {
18 | @Test
19 | fun useAppContext() {
20 | // Context of the app under test.
21 | val appContext = InstrumentationRegistry.getInstrumentation().targetContext
22 | assertEquals("com.caobo.customizeview", appContext.packageName)
23 | }
24 | }
25 |
--------------------------------------------------------------------------------
/app/src/main/AndroidManifest.xml:
--------------------------------------------------------------------------------
1 |
2 |
4 |
5 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
--------------------------------------------------------------------------------
/app/src/main/java/com/caobo/customizeview/CustomizeView.kt:
--------------------------------------------------------------------------------
1 | package com.caobo.customizeview
2 |
3 | import android.content.Context
4 | import android.graphics.*
5 | import android.util.AttributeSet
6 | import android.view.View
7 | import java.util.*
8 | import kotlin.math.*
9 |
10 | /**
11 | * Created by jaynm
12 | * 关注公众号：码农专栏 获取更多学习资料
13 | * on 2020-05-26.
14 | */
15 | class CustomizeView @JvmOverloads constructor(
16 | context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0
17 | ) : View(context, attrs, defStyleAttr) {
18 |
19 | // 时针宽度
20 | private val mHourPointWidth = 15f
21 |
22 | // 分针宽度
23 | private val mMinutePointWidth = 10f
24 |
25 | // 秒针宽度
26 | private val mSecondPointWidth = 4f
27 |
28 | // 指针矩形弧度
29 | private val mPointRange = 20F
30 |
31 | // 刻度与数字间距
32 | private val mNumberSpace = 10f
33 |
34 | // 表盘宽度
35 | private val mCircleWidth = 4.0F
36 |
37 | // 设置表盘整点刻度尺寸
38 | private val scaleMax = 50
39 |
40 | // 设置表盘非整点刻度尺寸
41 | private val scaleMin = 25
42 |
43 | // View宽度
44 | private var mWidth = 0
45 |
46 | // View高度
47 | private var mHeight = 0
48 |
49 | // 圆半径，默认200像素
50 | private var radius = 300.0F
51 |
52 | // 画笔
53 | private val mPaint: Paint by lazy {
54 | Paint()
55 | }
56 | private val mRect: Rect by lazy {
57 | Rect()
58 | }
59 |
60 |
61 | // 初始化画笔属性
62 | init {
63 | mPaint.textSize = 35F
64 | mPaint.typeface = Typeface.DEFAULT_BOLD
65 | mPaint.isAntiAlias = true
66 |
67 | // // 设置圆心X轴位置
68 | // val centerX: Float = width / 2F
69 | // // 设置圆心Y轴位置
70 | // val centerY: Float = height / 2F
71 | // // 设置圆半径，默认设置为1/4屏幕宽度，可添加为自定义属性
72 | // val radius: Float = width / 4F
73 | }
74 |
75 |
76 | override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
77 | super.onMeasure(widthMeasureSpec, heightMeasureSpec)
78 |
79 | mWidth = onMeasuredSpec(widthMeasureSpec) + (mCircleWidth * 2).toInt()
80 | mHeight = onMeasuredSpec(heightMeasureSpec) + (mCircleWidth * 2).toInt()
81 |
82 | radius = (mWidth - mCircleWidth * 2) / 2
83 | setMeasuredDimension(mWidth, mHeight)
84 | }
85 |
86 | private fun onMeasuredSpec(measureSpec: Int): Int {
87 |
88 | var specViewSize = 0
89 | val specMode = MeasureSpec.getMode(measureSpec)
90 | val specSize = MeasureSpec.getSize(measureSpec)
91 |
92 | when (specMode) {
93 | MeasureSpec.EXACTLY -> {
94 | specViewSize = specSize
95 | }
96 | MeasureSpec.AT_MOST -> {
97 | // 计算半径以宽高最小值为准
98 | specViewSize = min((radius * 2).toInt(), specSize)
99 | }
100 | }
101 | return specViewSize
102 | }
103 |
104 | override fun onDraw(canvas: Canvas) {
105 | super.onDraw(canvas)
106 |
107 | // 设置圆心X轴位置
108 | val centerX: Float = (mWidth / 2).toFloat()
109 | // 设置圆心Y轴位置
110 | val centerY: Float = (mHeight / 2).toFloat()
111 |
112 | canvas.translate(centerX, centerY)
113 |
114 | /** 第一步：绘制最外层的圆 **/
115 | drawClock(canvas)
116 |
117 | /** 第二步：表盘一共60个刻度，1到12点整数属于长刻度，其余属于短刻度 **/
118 | drawClockScale(canvas)
119 |
120 | /** 第三步：绘制指针 **/
121 | drawPointer(canvas)
122 |
123 | postInvalidateDelayed(1000)
124 |
125 | }
126 |
127 | /**
128 | * 绘制表盘
129 | */
130 | private fun drawClock(canvas: Canvas) {
131 |
132 | // 设置外层圆画笔宽度
133 | mPaint.strokeWidth = mCircleWidth
134 | // 设置画笔颜色
135 | mPaint.color = Color.BLACK
136 | // 设置画笔空心风格
137 | mPaint.style = Paint.Style.STROKE
138 | // 绘制圆方法
139 | canvas.drawCircle(0F, 0F, radius, mPaint)
140 | }
141 |
142 | /**
143 | * 绘制表盘刻度
144 | */
145 | private fun drawClockScale(canvas: Canvas) {
146 | for (index in 1..60) {
147 | // 刻度绘制以12点钟为准，每次将表盘旋转6°，后续绘制都以12点钟为基准绘制
148 | canvas.rotate(6F, 0F, 0F)
149 | // 绘制长刻度线
150 | if (index % 5 == 0) {
151 | // 设置长刻度画笔宽度
152 | mPaint.strokeWidth = 4.0F
153 | // 绘制刻度线
154 | canvas.drawLine(0F, -radius, 0F, -radius + scaleMax, mPaint)
155 | /** 绘制文本 **/
156 | canvas.save()
157 | // 设置画笔宽度
158 | mPaint.strokeWidth = 1.0F
159 | // 设置画笔实心风格
160 | mPaint.style = Paint.Style.FILL
161 | mPaint.getTextBounds(
162 | (index / 5).toString(),
163 | 0,
164 | (index / 5).toString().length,
165 | mRect
166 | )
167 | canvas.translate(0F, -radius + mNumberSpace + scaleMax + (mRect.height() / 2))
168 | canvas.rotate((index * -6).toFloat())
169 | canvas.drawText(
170 | (index / 5).toString(), -mRect.width() / 2.toFloat(),
171 | mRect.height().toFloat() / 2, mPaint
172 | )
173 | canvas.restore()
174 | }
175 | // 绘制短刻度线
176 | else {
177 | // 设置短刻度画笔宽度
178 | mPaint.strokeWidth = 2.0F
179 | canvas.drawLine(0F, -radius, 0F, -radius + scaleMin, mPaint)
180 | }
181 | }
182 | }
183 |
184 | /**
185 | * 绘制表盘数字
186 | */
187 | private fun drawClockNumber(canvas: Canvas, centerX: Float, centerY: Float) {
188 | // var x = 0.0F // 数字x坐标
189 | // var y = 0.0F // 数字y坐标
190 | // // 设置画笔宽度
191 | // mPaint.strokeWidth = 1.0F
192 | // // 设置画笔实心风格
193 | // mPaint.style = Paint.Style.FILL
194 | //
195 | // // 数字距离表盘边界距离：半径-刻度线长度-数字距离刻度线间距
196 | // var tempSpace = radius - scaleMax - mNumberSpace
197 | //
198 | // // 遍历绘制表盘数字
199 | // for (num in 1..12) {
200 | // mPaint.getTextBounds((num).toString(), 0, (num).toString().length, mRect)
201 | // if (num == 1 || num == 2) {
202 | // x =
203 | // (centerX + tempSpace * sin(Math.toRadians(num * 30.0)) - mRect.width()).toFloat()
204 | // y =
205 | // (centerY - tempSpace * cos(Math.toRadians(num * 30.0)) + mRect.height()).toFloat()
206 | // } else if (num == 4 || num == 5) {
207 | // x =
208 | // (centerX + tempSpace * sin(Math.toRadians(num * 30.0)) - mRect.width()).toFloat()
209 | // y = (centerY - tempSpace * cos(Math.toRadians(num * 30.0))).toFloat()
210 | // } else if (num == 7 || num == 8) {
211 | // x = (centerX + tempSpace * sin(Math.toRadians(num * 30.0))).toFloat()
212 | // y = (centerY - tempSpace * cos(Math.toRadians(num * 30.0))).toFloat()
213 | // } else if (num == 10 || num == 11) {
214 | // x = (centerX + tempSpace * sin(Math.toRadians(num * 30.0))).toFloat()
215 | // y =
216 | // (centerY - tempSpace * cos(Math.toRadians(num * 30.0)) + mRect.height()).toFloat()
217 | // } else if (num == 3) {
218 | // x =
219 | // (centerX + tempSpace * sin(Math.toRadians(num * 30.0)) - mRect.width()).toFloat()
220 | // y =
221 | // (centerY - tempSpace * cos(Math.toRadians(num * 30.0)) + mRect.height() / 2).toFloat()
222 | // } else if (num == 6) {
223 | // x =
224 | // (centerX + tempSpace * sin(Math.toRadians(num * 30.0)) - mRect.width() / 2).toFloat()
225 | // y = (centerY - tempSpace * cos(Math.toRadians(num * 30.0))).toFloat()
226 | // } else if (num == 9) {
227 | // x = (centerX + tempSpace * sin(Math.toRadians(num * 30.0))).toFloat()
228 | // y =
229 | // (centerY - tempSpace * cos(Math.toRadians(num * 30.0)) + mRect.height() / 2).toFloat()
230 | // } else if (num == 12) {
231 | // x =
232 | // (centerX + tempSpace * sin(Math.toRadians(num * 30.0)) - mRect.width() / 2).toFloat()
233 | // y =
234 | // (centerY - tempSpace * cos(Math.toRadians(num * 30.0)) + mRect.height()).toFloat()
235 | // }
236 | //
237 | // canvas.drawText(num.toString(), x, y, mPaint)
238 | // }
239 | }
240 |
241 | /**
242 | * 第四步：绘制指针
243 | */
244 | private fun drawPointer(canvas: Canvas) {
245 | // 获取当前时间：时分秒
246 | val calendar = Calendar.getInstance()
247 | val hour = calendar[Calendar.HOUR]
248 | val minute = calendar[Calendar.MINUTE]
249 | val second = calendar[Calendar.SECOND]
250 | // 计算时分秒转过的角度
251 | val angleHour = (hour + minute.toFloat() / 60) * 360 / 12
252 | val angleMinute = (minute + second.toFloat() / 60) * 360 / 60
253 | val angleSecond = second * 360 / 60
254 |
255 | // 绘制时针
256 | canvas.save()
257 | // 旋转到时针的角度
258 | canvas.rotate(angleHour, 0F, 0F)
259 | val rectHour = RectF(
260 | -mHourPointWidth / 2,
261 | -radius / 2,
262 | mHourPointWidth / 2,
263 | radius / 6
264 | )
265 | // 设置时针画笔属性
266 | mPaint.color = Color.BLUE
267 | mPaint.style = Paint.Style.STROKE
268 | mPaint.strokeWidth = mHourPointWidth
269 | canvas.drawRoundRect(rectHour, mPointRange, mPointRange, mPaint)
270 | canvas.restore()
271 |
272 | // 绘制分针
273 | canvas.save()
274 | // 旋转到分针的角度
275 | canvas.rotate(angleMinute, 0F, 0F)
276 | val rectMinute = RectF(
277 | -mMinutePointWidth / 2,
278 | -radius * 3.5f / 5,
279 | mMinutePointWidth / 2,
280 | radius / 6
281 | )
282 | // 设置分针画笔属性
283 | mPaint.color = Color.BLACK
284 | mPaint.strokeWidth = mMinutePointWidth
285 | canvas.drawRoundRect(rectMinute, mPointRange, mPointRange, mPaint)
286 | canvas.restore()
287 |
288 | // 绘制秒针
289 | canvas.save()
290 | // 旋转到分针的角度
291 | canvas.rotate(angleSecond.toFloat(), 0F, 0F)
292 | val rectSecond = RectF(
293 | -mSecondPointWidth / 2,
294 | -radius + 10,
295 | mSecondPointWidth / 2,
296 | radius / 6
297 | )
298 | // 设置秒针画笔属性
299 | mPaint.strokeWidth = mSecondPointWidth
300 | mPaint.color = Color.RED
301 | canvas.drawRoundRect(rectSecond, mPointRange, mPointRange, mPaint)
302 | canvas.restore()
303 |
304 | // 绘制原点
305 | mPaint.style = Paint.Style.FILL
306 | canvas.drawCircle(
307 | 0F,
308 | 0F, mSecondPointWidth * 4, mPaint
309 | )
310 | }
311 | }
312 |
313 |
--------------------------------------------------------------------------------
/app/src/main/java/com/caobo/customizeview/MainActivity.kt:
--------------------------------------------------------------------------------
1 | package com.caobo.customizeview
2 |
3 | import androidx.appcompat.app.AppCompatActivity
4 | import android.os.Bundle
5 |
6 | class MainActivity : AppCompatActivity() {
7 |
8 | override fun onCreate(savedInstanceState: Bundle?) {
9 | super.onCreate(savedInstanceState)
10 | setContentView(R.layout.activity_main)
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/app/src/main/res/drawable-v24/ic_launcher_foreground.xml:
--------------------------------------------------------------------------------
1 |
7 |
12 |
13 |
19 |