ComposeでTimeRangePickerを作る_YUMEMI.grow Mobile #2

Composeで
TimeRangePickerを作る
YUMEMI.grow Mobile #2
kako351@おいしい健康

View Slide

自己紹介
kako351 / @kako_351
おいしい健康 Androidエンジニア
Androidエンジニア募集中！
仕事
● バイク（ハンターカブ）
● ギター
● コーヒー自宅焙煎
趣味

View Slide

What’s new おいしい健康

View Slide

食事記録機能をリリースしました！ 🎉
時計部分はJetpack ComposeのCanvasで書かれていま
す。（私ではなくて同僚が実装してくれました...!）
これをみてCanvas面白そうだなと思ったのが今回の話す内容の
きっかけです。
What’s new おいしい健康

View Slide

Jetpack ComposeでTimeRangePickerを
作れるようになる
TimeRangePickerとは
TimeRangePickerは、ユーザーが時間範囲を選
択できるようにするUIコンポーネントです。開
始時間と終了時間の間で選択された時間範囲を
表します。
本日のゴール

View Slide

本日話す内容
● 弧を描く
● 時計盤を作る
● ドラッグ操作を制御する
● ドラッグ操作で時刻を設定する
● 2つの時刻を繋ぐ弧を描く
● https://developer.android.com/  
● https://github.com/Droppers/TimeRangePicker  
● https://ja.wikipedia.org/wiki/%E4%B8%89%E8%A7%9
2%E9%96%A2%E6%95%B0  
アジェンダ参考

View Slide

弧を描く

View Slide

Canvas(
//...
) {
drawArc(
color = Color.LightGray,
startAngle = 0f,
sweepAngle = 360f,
useCenter = false,
style = Stroke(width = 50f),
)

View Slide

Canvas(
//...
) {
drawArc(
color = Color.LightGray,
startAngle = 0f,
sweepAngle = 360f,
useCenter = false,
style = Stroke(width = 50f),
)
弧を描くには drawArcを利用
します

View Slide

● drawArc
● drawCircle
● drawOval
● drawLine
● drawRect
draw〇〇
● drawRoundRect
● drawPath
● drawPoint
● drawImage

View Slide

時計盤を作る

View Slide

for (hour in 0..23) {
val centerX = size.width / 2
val centerY = size.height / 2
val radius = (size.width / 2) - 50f
val lineLength = 20f
val angle = hour * (360 / 24) // 360度を24分割
val radian = Math.toRadians(angle.toDouble())
val startX = (centerX + radius * Math.cos(radian)).toFloat()
val startY = (centerY + radius * Math.sin(radian)).toFloat()
val endX = (centerX + (radius - lineLength) * Math.cos(radian)).toFloat()
val endY = (centerY + (radius - lineLength) * Math.sin(radian)).toFloat()
drawLine(
color = Color.Black,
start = Offset(x = startX, y = startY),
end = Offset(x = endX, y = endY),
cap = StrokeCap.Round,
strokeWidth = 3f
)
}

View Slide

for (hour in 0..23) {
val centerX = size.width / 2
val centerY = size.height / 2
val radius = (size.width / 2) - 50f
val lineLength = 20f
24時間計の時計盤にするため
0時から23時まで表します
毎時刻の角度を求めます

View Slide

val endX = (centerX + (radius - lineLength) * Math.cos(radian)).toFloat()
val endY = (centerY + (radius - lineLength) * Math.sin(radian)).toFloat()
角度からX Y座標を求めます
孤の中心を囲むように配置するため
にcanterX, centerYを足しています

View Slide

drawLine(
color = Color.Black,
start = Offset(x = startX, y = startY),
end = Offset(x = endX, y = endY),
cap = StrokeCap.Round,
strokeWidth = 3f
)
線を引く開始位置の座標と終了位置
の座標を渡して線を描画します。

View Slide

if (hour % 6 == 0) {
drawIntoCanvas {
it.nativeCanvas.drawText(
"$hour",
endX,
endY + lineLength,
Paint().apply {
color = Color.Black.toArgb()
textSize = 45f
textAlign = Paint.Align.CENTER
}
)
}
} else {
時計盤ぽくするために、6の倍数時
刻の時はその時間をテキストで表示
してみます。

View Slide

if (hour % 6 == 0) {
drawIntoCanvas {
"$hour",
endX,
endY + lineLength,
Paint().apply {
textSize = 45f
}
)
}
} else {
Canvas内でテキストを表示するには
drawIntoCanvasの中で
nativeCanvas.drawText() を呼び出す
必要があります。

View Slide

if (hour % 6 == 0) {
drawIntoCanvas {
"$hour",
endX,
endY + lineLength,
Paint().apply {
textSize = 45f
}
)
}
} else {
時刻が右中央から始まってしまいま
す。
中央上に配置したい。

View Slide

中央 (x:0 y:0)
cosθ = 1
sinθ = 0
0時 = 0度(angle = 0)と
考えると...
中央座標からの0度の座
標を指定しているので
右中央に配置されます
が右中

View Slide

val angle = hour * (360 / 24)// 360度を24分割
val radian = Math.toRadians(angle.toDouble()) - (PI / 2)
0時を中央上に配置する
場合、反時計周りに90
度回転すればよい
angleから90度を引けば
いい
PI = 180度 / 2 を引きま
す

View Slide

ドラッグ操作を
制御する

View Slide

var dragOffsetX by remember { mutableStateOf(0f) }
var dragOffsetY by remember { mutableStateOf(0f) }
Canvas(
modifier = Modifier
.pointerInput(Unit) {
detectDragGestures(
// …
onDrag = { change, dragAmount ->
change.consume()
dragOffsetX = change.position.x
dragOffsetY = change.position.y
}
)
},
) {
drawCircle(
color = Color.Blue,
radius = 100f,
center = Offset(x = dragOffsetX, y = dragOffsetY)
)

View Slide

Canvas(
modifier = Modifier
detectDragGestures(
// …
change.consume()
}
)
},
Canvasでジェスチャーを検知したい
時は.pointerInputを呼び出します

View Slide

Canvas(
modifier = Modifier
detectDragGestures(
// …
change.consume()
}
)
},
双方向のドラッグ操作を制御したい
時はdetectDragGesturesを呼び出し
ます

View Slide

・draggable修飾子
縦方向のみのドラッグや横方向のみのドラッグなど単一方向のドラッグ操作を制
御したい時にはdraggable修飾子で十分です。
・pointerInput修飾子 ( + detectDragGestures)
縦横斜めなど、ドラッグ操作全体を制御したい時はpointerInput修飾子の中で
detectDragGesturesを呼び出します。
単一方向ドラッグと双方向ドラッグ

View Slide

ドラッグ操作で
時刻を設定する

View Slide

var centerX by remember { mutableStateOf(0f) }
var centerY by remember { mutableStateOf(0f) }
var dragOffsetX by remember { mutableStateOf(0f) }
var dragOffsetY by remember { mutableStateOf(0f) }
// xy座標からAngleを決める
val dragAngle = remember(key1 = dragOffsetX, key2 = dragOffsetY) {
derivedStateOf {
Math.toDegrees(
Math.atan2(
(dragOffsetY - centerY).toDouble(),
(dragOffsetX - centerX).toDouble()
)
).toFloat()
}
}
ドラッグ中の座標から角度を求める

View Slide

var centerX by remember { mutableStateOf(0f) }
var centerY by remember { mutableStateOf(0f) }
Canvas(
modifier = Modifier
.onSizeChanged {
centerX = it.width / 2f
centerY = it.height / 2f
}
Canvasのサイズを取得する
onSizeChangedでComposable外に
Comsableのサイズを渡します。
サイズ取得の方法はいくつかありますが、今回
はonSizeChangedがニーズに合っていました

View Slide

val timeX = remember(key1 = dragAngle.value, key2 = centerX) {
derivedStateOf {
val radius = centerX
val angle = Math.toRadians(dragAngle.value.toDouble())
(radius * Math.cos(angle)).toFloat() + centerX
}
}
val timeY = remember(key1 = dragAngle.value, key2 = centerY) {
derivedStateOf {
val radius = centerY
val angle = Math.toRadians(dragAngle.value.toDouble())
(radius * Math.sin(angle)).toFloat() + centerY
}
}
ドラッグ中の角度から弧上の座標を求める

View Slide

drawCircle(
color = Color.Blue,
radius = 25f,
center = Offset(x = timeX.value, y = timeY.value),
)
座標に合わせて円を描画する

View Slide

val time = remember(key1 = dragAngle.value) {
derivedStateOf {
var angle = dragAngle.value + Math.toDegrees(PI / 2)
if (angle < 0) angle += 360f
if (angle >= 360f) angle -= 360f
val hour = (angle / 15).toInt()
val minute = ((angle % 15) / 15 * 60).toInt()
"%02d:%02d".format(hour, minute)
}
}
ドラッグ中の角度から時刻を求める

View Slide

2つの時刻を繋ぐ
弧を描く

View Slide

var endTimeDragOffsetX by remember { mutableStateOf(0f) }
var endTimeDragOffsetY by remember { mutableStateOf(0f) }
// xy座標からAngleを決める
val endTimeDragAngle = remember(key1 = endTimeDragOffsetX, key2 =
endTimeDragOffsetY) {
derivedStateOf {
Math.toDegrees(
Math.atan2(
(endTimeDragOffsetY - centerY).toDouble(),
(endTimeDragOffsetX - centerX).toDouble()
)
).toFloat()
}
}
終了時刻分の角度を求める

View Slide

val startAngle = startTimeDragAngle.value
val sweepAngle = when(endTimeDragAngle.value < startTimeDragAngle.value) {
true -> endTimeDragAngle.value - startTimeDragAngle.value + 360f
false -> endTimeDragAngle.value - startTimeDragAngle.value
}
drawArc(
color = Color.Blue,
startAngle = startAngle,
sweepAngle = sweepAngle,
useCenter = false,
style = Stroke(
width = 50f,
cap = StrokeCap.Round
),
)
ドラッグ操作した角度に合わせて弧を描画する

View Slide

}
drawArc(
color = Color.Blue,
useCenter = false,
style = Stroke(
width = 50f,
),
)
drawArcはstartAngleとsweepAngleの
間を時計回りに描画します。
数字の小さい方から大きい方へ

View Slide

}
drawArc(
color = Color.Blue,
useCenter = false,
style = Stroke(
width = 50f,
),
)
開始位置が終了位置より大きくなる
ときは360度足します

View Slide

https://github.com/kako351/Compose-TimeRangePicker
Githubに公開しています

View Slide

● Canvasコンポーザブル内ではdrawArc, drawCircle,drawLineなどで図形や線を
描画できます
● Canvas内にテキストを表示したい場合は、drawIntoCanvas内でdrawTextを使
います
● Canvas上のドラッグ操作を検知するならpointerInput修飾子内で
detectDragGesturesを呼び出します
まとめ

View Slide

ご静聴
ありがとう
ございました
39
YUMEMI.grow Mobile #2 2023/04/12
 
kako351@おいしい健康 

View Slide

ComposeでTimeRangePickerを作る_YUMEMI.grow Mobile #2

ComposeでTimeRangePickerを作る_YUMEMI.grow Mobile #2

kako351

More Decks by kako351

Other Decks in Technology

Featured

Transcript