加上指針
This commit is contained in:
parent
96cbfa69b6
commit
523bac7f8a
@ -4,6 +4,7 @@ import android.content.Context
|
||||
import android.graphics.*
|
||||
import android.util.AttributeSet
|
||||
import android.view.View
|
||||
import java.util.*
|
||||
import kotlin.math.cos
|
||||
import kotlin.math.sin
|
||||
|
||||
@ -35,7 +36,7 @@ class IOSClockView: View {
|
||||
Paint().apply {
|
||||
isAntiAlias = true
|
||||
style = Paint.Style.FILL
|
||||
color = Color.BLACK
|
||||
color = Color.parseColor("#101010")
|
||||
}
|
||||
}
|
||||
|
||||
@ -47,12 +48,21 @@ class IOSClockView: View {
|
||||
}
|
||||
}
|
||||
|
||||
private val clockScale: Paint by lazy {
|
||||
private val clockHourScale: Paint by lazy {
|
||||
Paint().apply {
|
||||
isAntiAlias = true
|
||||
style = Paint.Style.STROKE
|
||||
color = Color.DKGRAY
|
||||
width = 2
|
||||
color = Color.BLACK
|
||||
strokeWidth = this@IOSClockView.width * 0.005f
|
||||
}
|
||||
}
|
||||
|
||||
private val clockMinuteScale: Paint by lazy {
|
||||
Paint().apply {
|
||||
isAntiAlias = true
|
||||
style = Paint.Style.STROKE
|
||||
color = Color.GRAY
|
||||
strokeWidth = this@IOSClockView.width * 0.005f
|
||||
}
|
||||
}
|
||||
|
||||
@ -91,7 +101,9 @@ class IOSClockView: View {
|
||||
|
||||
drawClockFace(canvas)
|
||||
|
||||
drawScaleArc(canvas)
|
||||
drawScaleHourHand(canvas, 12)
|
||||
|
||||
postInvalidateDelayed(100)
|
||||
}
|
||||
|
||||
private fun drawClockFace(canvas: Canvas?) {
|
||||
@ -100,32 +112,149 @@ class IOSClockView: View {
|
||||
it.drawRoundRect(bgRectF, width / 7f, width / 7f, background)
|
||||
|
||||
it.drawOval(clockFaceRectF, clockFace)
|
||||
|
||||
drawScaleMinute(it)
|
||||
|
||||
drawScaleHour(it)
|
||||
}
|
||||
}
|
||||
|
||||
private fun drawScaleArc(canvas: Canvas?) {
|
||||
private fun drawScaleMinute(canvas: Canvas?) {
|
||||
// 360 * Math.PI / 180
|
||||
val evenryDegrees = (2.0f * Math.PI / 60).toFloat()
|
||||
|
||||
val startDegress = (150 * Math.PI / 180).toFloat()
|
||||
val endDegress = (210 * Math.PI / 180).toFloat()
|
||||
val everyDegrees = (6f * Math.PI / 180).toFloat()
|
||||
|
||||
for (i in 0 until 60) {
|
||||
val degrees = i * evenryDegrees
|
||||
// 過濾底部60度的弧長
|
||||
if (degrees > startDegress && degrees < endDegress) {
|
||||
continue
|
||||
}
|
||||
|
||||
val startX = centerX + sin(degrees.toDouble()).toFloat() * (radius * 0.8f)
|
||||
val startY = centerY - cos(degrees.toDouble()).toFloat() * (radius * 0.8f)
|
||||
|
||||
val stopX = centerX + sin(degrees.toDouble()).toFloat() * (radius * 0.85f)
|
||||
|
||||
val stopY = centerY - cos(degrees.toDouble()).toFloat() * (radius * 0.85f)
|
||||
|
||||
canvas?.drawLine(startX, startY, stopX, stopY, clockScale)
|
||||
val degrees = i * everyDegrees
|
||||
val startX = centerX + sin(degrees.toDouble()).toFloat() * (radius * 0.875f)
|
||||
val startY = centerY - cos(degrees.toDouble()).toFloat() * (radius * 0.875f)
|
||||
val stopX = centerX + sin(degrees.toDouble()).toFloat() * (radius * 0.95f)
|
||||
val stopY = centerY - cos(degrees.toDouble()).toFloat() * (radius * 0.95f)
|
||||
canvas?.drawLine(startX, startY, stopX, stopY, clockMinuteScale)
|
||||
}
|
||||
}
|
||||
|
||||
private fun drawScaleHour(canvas: Canvas?) {
|
||||
// 360 * Math.PI / 180
|
||||
val everyDegrees = (30f * Math.PI / 180).toFloat()
|
||||
|
||||
for (i in 0 until 60) {
|
||||
val degrees = i * everyDegrees
|
||||
val startX = centerX + sin(degrees.toDouble()).toFloat() * (radius * 0.875f)
|
||||
val startY = centerY - cos(degrees.toDouble()).toFloat() * (radius * 0.875f)
|
||||
val stopX = centerX + sin(degrees.toDouble()).toFloat() * (radius * 0.95f)
|
||||
val stopY = centerY - cos(degrees.toDouble()).toFloat() * (radius * 0.95f)
|
||||
canvas?.drawLine(startX, startY, stopX, stopY, clockHourScale)
|
||||
}
|
||||
}
|
||||
|
||||
private fun drawScaleHourHand(canvas: Canvas?, value: Int) {
|
||||
val mPaint = Paint()
|
||||
val mPointRange = 100f
|
||||
// 取得目前時間：時、分、秒
|
||||
val calendar = Calendar.getInstance()
|
||||
val hour = calendar[Calendar.HOUR]
|
||||
val minute = calendar[Calendar.MINUTE]
|
||||
val second = calendar[Calendar.SECOND]
|
||||
// 計算時、分、秒的旋轉角度
|
||||
val angleHour = (hour + minute.toFloat() / 60) * 360 / 12
|
||||
val angleMinute = (minute + second.toFloat() / 60) * 360 / 60
|
||||
val angleSecond = second * 360 / 60
|
||||
|
||||
//region 繪製時針
|
||||
canvas?.save()
|
||||
// 旋轉到時針的角度
|
||||
canvas?.rotate(angleHour, centerX, centerY)
|
||||
// 繪製時針1
|
||||
val rectHour = RectF(
|
||||
centerX - 10f / 2,
|
||||
centerY - radius / 2,
|
||||
centerX + 10f / 2,
|
||||
centerY - radius / 6
|
||||
)
|
||||
// 設定時針畫筆屬性
|
||||
mPaint.color = Color.BLACK
|
||||
mPaint.style = Paint.Style.STROKE
|
||||
mPaint.strokeWidth = 10f
|
||||
canvas?.drawRoundRect(rectHour, mPointRange, mPointRange, mPaint)
|
||||
|
||||
// 繪製時針2
|
||||
val rectHour2 = RectF(
|
||||
centerX - 10f / 2,
|
||||
centerY - radius / 2,
|
||||
centerX + 10f / 2,
|
||||
centerY
|
||||
)
|
||||
// 設定時針畫筆屬性
|
||||
mPaint.color = Color.BLACK
|
||||
mPaint.style = Paint.Style.FILL
|
||||
mPaint.strokeWidth = 5f
|
||||
canvas?.drawRoundRect(rectHour2, mPointRange, mPointRange, mPaint)
|
||||
canvas?.restore()
|
||||
//endregion
|
||||
|
||||
//region 繪製分針
|
||||
// 繪製分針
|
||||
canvas?.save()
|
||||
// 旋轉到分針的角度
|
||||
canvas?.rotate(angleMinute, centerX, centerY)
|
||||
val rectMinute = RectF(
|
||||
centerX - 10f / 2,
|
||||
centerY - radius * 3.5f / 5,
|
||||
centerX + 10f / 2,
|
||||
centerY - radius / 6
|
||||
)
|
||||
// 設定分針畫筆屬性
|
||||
mPaint.color = Color.BLACK
|
||||
mPaint.style = Paint.Style.STROKE
|
||||
mPaint.strokeWidth = 10f
|
||||
canvas?.drawRoundRect(rectMinute, mPointRange, mPointRange, mPaint)
|
||||
|
||||
val rectMinute2 = RectF(
|
||||
centerX - 10f / 2,
|
||||
centerY - radius * 3.5f / 5,
|
||||
centerX + 10f / 2,
|
||||
centerY
|
||||
)
|
||||
// 設定分針畫筆屬性
|
||||
mPaint.color = Color.BLACK
|
||||
mPaint.style = Paint.Style.FILL
|
||||
mPaint.strokeWidth = 5f
|
||||
canvas?.drawRoundRect(rectMinute2, mPointRange, mPointRange, mPaint)
|
||||
canvas?.restore()
|
||||
//endregion
|
||||
|
||||
// 繪製時、分針原點
|
||||
mPaint.style = Paint.Style.FILL
|
||||
mPaint.color = Color.BLACK
|
||||
canvas?.drawCircle(centerX, centerY, 5f * 4, mPaint)
|
||||
|
||||
// 繪製秒針
|
||||
canvas?.save()
|
||||
// 旋轉到分針的角度
|
||||
canvas?.rotate(angleSecond.toFloat(), centerX, centerY)
|
||||
val rectSecond = RectF(
|
||||
centerX - 5f / 2,
|
||||
centerY - radius + 20,
|
||||
centerX + 5f / 2,
|
||||
centerY + radius / 6
|
||||
)
|
||||
// 設定秒針畫筆屬性
|
||||
mPaint.strokeWidth = 5f
|
||||
mPaint.style = Paint.Style.STROKE
|
||||
mPaint.color = Color.parseColor("#FF7F27")
|
||||
canvas?.drawRoundRect(rectSecond, mPointRange, mPointRange, mPaint)
|
||||
canvas?.restore()
|
||||
|
||||
// 繪製秒針原點白底
|
||||
mPaint.style = Paint.Style.FILL
|
||||
mPaint.color = Color.WHITE
|
||||
canvas?.drawCircle(centerX, centerY, 2.5f * 4, mPaint)
|
||||
|
||||
// 繪製秒針原點外框
|
||||
mPaint.style = Paint.Style.STROKE
|
||||
mPaint.color = Color.parseColor("#FF7F27")
|
||||
mPaint.strokeWidth = 5f
|
||||
canvas?.drawCircle(centerX, centerY, 2.5f * 4, mPaint)
|
||||
}
|
||||
|
||||
}
|
||||
@ -6,11 +6,12 @@
|
||||
android:layout_height="match_parent"
|
||||
tools:context=".MainActivity">
|
||||
|
||||
<TextView
|
||||
android:layout_width="wrap_content"
|
||||
android:layout_height="wrap_content"
|
||||
android:text="Hello World!"
|
||||
<com.ray650128.iosclockwidget.IOSClockView
|
||||
android:id="@+id/IOSClockView2"
|
||||
android:layout_width="0dp"
|
||||
android:layout_height="0dp"
|
||||
app:layout_constraintBottom_toBottomOf="parent"
|
||||
app:layout_constraintDimensionRatio="1:1"
|
||||
app:layout_constraintEnd_toEndOf="parent"
|
||||
app:layout_constraintStart_toStartOf="parent"
|
||||
app:layout_constraintTop_toTopOf="parent" />
|
||||
|
||||
@ -3,4 +3,20 @@
|
||||
android:layout_width="match_parent"
|
||||
android:layout_height="match_parent"
|
||||
android:background="@android:color/transparent"
|
||||
android:theme="@style/Theme.IOSClockWidget.AppWidgetContainer"/>
|
||||
android:theme="@style/Theme.IOSClockWidget.AppWidgetContainer">
|
||||
|
||||
<com.ray650128.iosclockwidget.IOSClockView
|
||||
android:id="@+id/IOSClockView"
|
||||
android:layout_width="wrap_content"
|
||||
android:layout_height="wrap_content"
|
||||
android:layout_alignBottom="@id/textView"
|
||||
android:layout_alignParentTop="true" />
|
||||
|
||||
<TextView
|
||||
android:id="@+id/textView"
|
||||
android:layout_width="wrap_content"
|
||||
android:layout_height="wrap_content"
|
||||
android:layout_alignParentBottom="true"
|
||||
android:layout_centerHorizontal="true"
|
||||
android:text="TextView" />
|
||||
</RelativeLayout>
|
||||
Loading…
Reference in New Issue
Block a user