$30 off During Our Annual Pro Sale. View Details »

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

kako351
April 12, 2023

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

kako351

April 12, 2023
Tweet

More Decks by kako351

Other Decks in Technology

Transcript

  1. 本日話す内容 • 弧を描く • 時計盤を作る • ドラッグ操作を制御する • ドラッグ操作で時刻を設定する •

    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 
 アジェンダ 参考
  2. Canvas( //... ) { drawArc( color = Color.LightGray, startAngle =

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

    0f, sweepAngle = 360f, useCenter = false, style = Stroke(width = 50f), ) 弧を描くには drawArcを利用 します
  4. • drawArc • drawCircle • drawOval • drawLine • drawRect

    draw〇〇 • drawRoundRect • drawPath • drawPoint • drawImage
  5. 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 ) }
  6. 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分割 24時間計の時計盤にするため 0時から23時まで表します 毎時刻の角度を求めます
  7. 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() 角度からX Y座標を求めます 孤の中心を囲むように配置するため にcanterX, centerYを足しています
  8. drawLine( color = Color.Black, start = Offset(x = startX, y

    = startY), end = Offset(x = endX, y = endY), cap = StrokeCap.Round, strokeWidth = 3f ) 線を引く開始位置の座標と終了位置 の座標を渡して線を描画します。
  9. 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の倍数時 刻の時はその時間をテキストで表示 してみます。
  10. 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 { Canvas内でテキストを表示するには drawIntoCanvasの中で nativeCanvas.drawText() を呼び出す 必要があります。
  11. 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 { 時刻が右中央から始まってしまいま す。 中央上に配置したい。
  12. 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() 中央 (x:0 y:0) cosθ = 1 sinθ = 0 0時 = 0度(angle = 0)と 考えると... 中央座標からの0度の座 標を指定しているので 右中央に配置されます が右中
  13. val angle = hour * (360 / 24)// 360度を24分割 val

    radian = Math.toRadians(angle.toDouble()) - (PI / 2) val startX = (centerX + radius * Math.cos(radian)).toFloat() val startY = (centerY + radius * Math.sin(radian)).toFloat() 0時を中央上に配置する 場合、反時計周りに90 度回転すればよい angleから90度を引けば いい PI = 180度 / 2 を引きま す
  14. 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) )
  15. Canvas( modifier = Modifier .pointerInput(Unit) { detectDragGestures( // … onDrag

    = { change, dragAmount -> change.consume() dragOffsetX = change.position.x dragOffsetY = change.position.y } ) }, Canvasでジェスチャーを検知したい 時は.pointerInputを呼び出します
  16. Canvas( modifier = Modifier .pointerInput(Unit) { detectDragGestures( // … onDrag

    = { change, dragAmount -> change.consume() dragOffsetX = change.position.x dragOffsetY = change.position.y } ) }, 双方向のドラッグ操作を制御したい 時はdetectDragGesturesを呼び出し ます
  17. 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() } } ドラッグ中の座標から角度を求める
  18. 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がニーズに合っていました
  19. 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 } } ドラッグ中の角度から弧上の座標を求める
  20. drawCircle( color = Color.Blue, radius = 25f, center = Offset(x

    = timeX.value, y = timeY.value), ) 座標に合わせて円を描画する
  21. 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) } } ドラッグ中の角度から時刻を求める
  22. 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() } } 終了時刻分の角度を求める
  23. 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 ), ) ドラッグ操作した角度に合わせて弧を描画する
  24. 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 ), ) ドラッグ操作した角度に合わせて弧を描画する drawArcはstartAngleとsweepAngleの 間を時計回りに描画します。 数字の小さい方から大きい方へ
  25. 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 ), ) ドラッグ操作した角度に合わせて弧を描画する 開始位置が終了位置より大きくなる ときは360度足します