Jetpack Composeで作る楽しい金額入力画面！ / Creating a fun register screen with jetpack compose!

Jetpack Composeで作る楽しい金額入力画面！

STORES Tech Conf 2024 "New Engineering" 登壇資料です。
https://storesinc.tech/conf/2024

Transcript

1. Jetpack Composeで作る 楽しい金額入力画面！ chuka
2. 自己紹介 2 chuka モバイル開発本部 決済グループ 2024年入社 STORES 決済 Android の開発 普段は北海道からリモートワーク おいしいちゅうかがたべたい 𝕏：@YkOxc
3. STORES 決済 について 3 お店のキャッシュレスをかんたんに STORES 決済 アプリと決済端末だけで かんたんにキャッシュレス決済を導入 3種類の決済方法をサポート ・クレジットカード ・電子マネー ・QRコード
4. 支払い金額を入力 STORES 決済 について 4 クレジットカード・電子マネーの場合
5. 支払い金額を入力 STORES 決済 について 5 決済端末と通信 クレジットカード・電子マネーの場合
6. 支払い金額を入力 STORES 決済 について 6 クレジットカードや 電子マネーでお支払い 決済端末と通信 クレジットカード・電子マネーの場合
7. 金額入力画面 とは 7 ・オーナーさんが利用する画面 ・会計時に金額を入力する画面 ・金額表示とキーパッドがある
8. 金額入力画面 とは 8 ・オーナーさんが利用する画面 ・会計時に金額を入力する画面 ・金額表示とキーパッドがある 楽しい金額入力画面？？🤔
9. 9 金額入力画面のここが楽しい！
10. 金額入力画面のここが楽しい！ 10 円形のエフェクトが楽しい！
11. 金額入力画面のここが楽しい！ 11 円形のエフェクトが楽しい！ 波紋の広がり方が楽しい！
12. 金額入力画面のここが楽しい！ 12 円形のエフェクトが楽しい！ 波紋の広がり方が楽しい！ ドラッグに追従して楽しい！
13. 金額入力画面のここが楽しい！ 13 数字が飛んでいって楽しい！ 円形のエフェクトが楽しい！ 波紋の広がり方が楽しい！ ドラッグに追従して楽しい！
14. 金額入力画面のここが楽しい！ 14 ・UI/UXにこだわっている ・アプリで1番楽しくて可愛い ・私は初見で30分触り続けた ・可愛くて大好き！
15. 金額入力画面の現状と課題 15 ・入社当時Javaだった (今はKotlin移行済み！) ・Android ViewでのUI実装がわからない 🥲 ・最終更新実質5年前のバグなし伝説のコード ・とにかく実装が複雑で難解！
16. 金額入力画面の現状と課題 16 変更を加えにくい！ ・入社当時Javaだった (今はKotlin移行済み！) ・Android ViewでのUI実装がわからない 🥲 ・最終更新実質5年前のバグなし伝説のコード ・とにかく実装が複雑で難解！
17. Jetpack Composeとは 17 Androidの新しいUIツールキット 2021年7月に安定版リリース ・宣言的UIで直感的にわかりやすい ・Kotlinで記述できてコード量も削減 ・プレビュー機能などで開発速度UP
18. Jetpack Composeとは 18 STORES 決済 Android も、 Jetpack Compose移行に取り組んでいます！ Androidの新しいUIツールキット 2021年7月に安定版リリース ・宣言的UIで直感的にわかりやすい ・Kotlinで記述できてコード量も削減 ・プレビュー機能などで開発速度UP
19. 金額入力画面の現状と課題 19 ・入社当時Javaだった (今はKotlin移行済み！) ・Android ViewでのUI実装がわからない 🥲 ・最終更新実質5年前のバグなし伝説のコード ・とにかく実装が複雑で難解！ 変更を加えにくい！
20. つくるか金額入力画面 20 楽しくて可愛くてお気に入りの金額入力画面 Jetpack Composeで実装してみよう！🚀
21. タイトル回収 21 Jetpack Composeで作る 楽しい金額入力画面！ 金額入力画面が好きすぎて Jetpack Composeで実装を考えてみた話 ⚠ プロダクションコードには反映されていません
22. 発表のゴール 22 ・STORES 決済 の金額入力画面の楽しさが伝わる ・Jetpack Composeでのジェスチャーに応じた アニメーションの実装がわかる
23. 話すこと 23 円形のエフェクトが楽しい！ 波紋の広がり方が楽しい！ ドラッグに追従して楽しい！
24. 実装の流れ 24 ① キーを1つ作ってみる ② 押下時のアニメーションを実装する ③ キーパッドらしく配置する ④ ドラッグ時のアニメーションを実装する
25. 25 ① キーを1つ作ってみる ② 押下時のアニメーションを実装する ③ キーパッドらしく配置する ④ ドラッグ時のアニメーションを実装する キーを1個つくる
26. 26 @Composable
 fun Key() {
 Box(
 modifier = Modifier
 .size(120.dp)
 .background(Color.LightGray),
 contentAlignment = Alignment.Center
 ) {
 Text(
 text = "1",
 style =
 TextStyle(
 fontSize = 28.sp,
 color = Color.DarkGray,
 ),
 )
 }
 }
 キーを1個つくる
27. 27 @Composable
 fun Key() {
 Box(
 modifier = Modifier
 .size(120.dp)
 .background(Color.LightGray),
 contentAlignment = Alignment.Center
 ) {
 Text(
 text = "1",
 style =
 TextStyle(
 fontSize = 28.sp,
 color = Color.DarkGray,
 ),
 )
 }
 }
 キーを1個つくる
28. 28 @Composable
 fun Key() {
 Box(
 modifier = Modifier
 .size(120.dp)
 .background(Color.LightGray),
 contentAlignment = Alignment.Center
 ) {
 Text(
 text = "1",
 style =
 TextStyle(
 fontSize = 28.sp,
 color = Color.DarkGray,
 ),
 )
 }
 }
 キーを1個つくる
29. 29 @Composable
 fun Key() {
 Box(
 modifier = Modifier
 .size(120.dp)
 .background(Color.LightGray),
 contentAlignment = Alignment.Center
 ) {
 Text(
 text = "1",
 style =
 TextStyle(
 fontSize = 28.sp,
 color = Color.DarkGray,
 ),
 )
 }
 }
 キーを1個つくる
30. 30 ① キーを1つ作ってみる ② 押下時のアニメーションを実装する ③ キーパッドらしく配置する ④ ドラッグ時のアニメーションを実装する 押下時のアニメーションの実装
31. 押下時のアニメーションの実装 31 ① 色と文字サイズが変化 - グレーから青 - 押下時に文字が縮小 ② 円形のエフェクトが表示 - 外側から中心に向かって出現 - 中心から外側に向かって消失
32. 押下時のアニメーションの実装 32 ① 色と文字サイズが変化 - グレーから青 - 押下時に文字が縮小 ② 円形のエフェクトが表示 - 外側から中心に向かって出現 - 中心から外側に向かって消失
33. 押下時のアニメーションの実装① - 色と文字サイズ - 33 val transition = updateTransition(isSelectedState, label = "selected state")
 
 val fontSize by transition.animateFloat(
 targetValueByState = { isSelected ->
 if (isSelected) 0.85f else 1f
 },
 label = "",
 )
 
 val fontColor by transition.animateColor(
 targetValueByState = { isSelected ->
 if (isSelected) Color.Blue else Color.DarkGray
 },
 label = "",
 )

34. 押下時のアニメーションの実装① - 色と文字サイズ - 34 val transition = updateTransition(isSelectedState, label = "selected state")
 
 val fontSize by transition.animateFloat(
 targetValueByState = { isSelected ->
 if (isSelected) 0.85f else 1f
 },
 label = "",
 )
 
 val fontColor by transition.animateColor(
 targetValueByState = { isSelected ->
 if (isSelected) Color.Blue else Color.DarkGray
 },
 label = "",
 )
 キー押下時(isSelectedがtrueのとき) 文字サイズを0.85倍 それ以外は1倍
35. 押下時のアニメーションの実装① - 色と文字サイズ - 35 val transition = updateTransition(isSelectedState, label = "selected state")
 
 val fontSize by transition.animateFloat(
 targetValueByState = { isSelected ->
 if (isSelected) 0.85f else 1f
 },
 label = "",
 )
 
 val fontColor by transition.animateColor(
 targetValueByState = { isSelected ->
 if (isSelected) Color.Blue else Color.DarkGray
 },
 label = "",
 )
 キー押下時(isSelectedがtrueのとき) 文字色をBlue それ以外はDarkGray
36. 押下時のアニメーションの実装① - 色と文字サイズ - 36 Text(
 text = "1",
 modifier = Modifier.graphicsLayer {
 scaleX = fontSize
 scaleY = fontSize
 transformOrigin = TransformOrigin.Center
 },
 style =
 TextStyle(
 textMotion = TextMotion.Animated,
 fontSize = 28.sp,
 color = fontColor,
 ),
 )

37. 押下時のアニメーションの実装① - 色と文字サイズ - 37 Text(
 text = "1",
 modifier = Modifier.graphicsLayer {
 scaleX = fontSize
 scaleY = fontSize
 transformOrigin = TransformOrigin.Center
 },
 style =
 TextStyle(
 textMotion = TextMotion.Animated,
 fontSize = 28.sp,
 color = fontColor,
 ),
 )

38. 押下時のアニメーションの実装① - 色と文字サイズ - 38 Text(
 text = "1",
 modifier = Modifier.graphicsLayer {
 scaleX = fontSize
 scaleY = fontSize
 transformOrigin = TransformOrigin.Center
 },
 style =
 TextStyle(
 textMotion = TextMotion.Animated,
 fontSize = 28.sp,
 color = fontColor,
 ),
 )

39. 押下時のアニメーションの実装 39 ① 色と文字サイズが変化 - グレーから青 - 押下時に文字が縮小 ② 円形のエフェクトが表示 - 外側から中心に向かって出現 - 中心から外側に向かって消失
40. 押下時のアニメーションの実装② - 円形エフェクト - 40 val circleSize by transition.animateFloat(
 targetValueByState = { isSelected ->
 if (isSelected) 100f else 120f
 },
 label = "",
 )
 val circleWidth by transition.animateFloat(
 targetValueByState = { isSelected ->
 if (isSelected) 8f else 0f
 },
 label = "",
 )

41. 押下時のアニメーションの実装② - 円形エフェクト - 41 val circleSize by transition.animateFloat(
 targetValueByState = { isSelected ->
 if (isSelected) 100f else 120f
 },
 label = "",
 )
 val circleWidth by transition.animateFloat(
 targetValueByState = { isSelected ->
 if (isSelected) 8f else 0f
 },
 label = "",
 )
 キー押下時(isSelectedがtrueのとき) 円の大きさを100 離したとき120
42. 押下時のアニメーションの実装② - 円形エフェクト - 42 val circleSize by transition.animateFloat(
 targetValueByState = { isSelected ->
 if (isSelected) 100f else 120f
 },
 label = "",
 )
 val circleWidth by transition.animateFloat(
 targetValueByState = { isSelected ->
 if (isSelected) 8f else 0f
 },
 label = "",
 )
 キー押下時(isSelectedがtrueのとき) 円の太さを8 離したとき0
43. 押下時のアニメーションの実装② - 円形エフェクト - 43 transition.AnimatedVisibility(
 visible = { targetValue -> targetValue },
 enter = fadeIn(),
 exit = fadeOut(),
 ) {
 Box(
 modifier =
 Modifier
 .size(circleSize.dp)
 .border(
 width = circleWidth.dp,
 color = Color.Blue,
 shape = CircleShape,
 ),
 )
 }

44. 押下時のアニメーションの実装② - 円形エフェクト - 44 transition.AnimatedVisibility(
 visible = { targetValue -> targetValue },
 enter = fadeIn(),
 exit = fadeOut(),
 ) {
 Box(
 modifier =
 Modifier
 .size(circleSize.dp)
 .border(
 width = circleWidth.dp,
 color = Color.Blue,
 shape = CircleShape,
 ),
 )
 }
 Modifier.border(shape = CircleShape) で 円形の枠線を描画
45. 押下時のアニメーションの実装② - 円形エフェクト - 45 transition.AnimatedVisibility(
 visible = { targetValue -> targetValue },
 enter = fadeIn(),
 exit = fadeOut(),
 ) {
 Box(
 modifier =
 Modifier
 .size(circleSize.dp)
 .border(
 width = circleWidth.dp,
 color = Color.Blue,
 shape = CircleShape,
 ),
 )
 }
 targetValue(isSelected)に応じて アニメーションで表示・非表示
46. 押下時のアニメーションの実装③ - ジェスチャーの判定 - 46 Box(
 // 背景色などの設定は省略 
 modifier =
 Modifier
 .pointerInput(Unit) {
 detectTapGestures(
 onPress = {
 isSelected = true
 // 指を離したら 
 tryAwaitRelease()
 isSelected = false
 },
 )
 },
 ) {
 // ① のTextと②のCircleを重ねて配置 
 }

47. Box(
 // 背景色などの設定は省略 
 modifier =
 Modifier
 .pointerInput(Unit) {
 detectTapGestures(
 onPress = {
 isSelected = true
 // 指を離したら 
 tryAwaitRelease()
 isSelected = false
 },
 )
 },
 ) {
 // ① のTextと②のCircleを重ねて配置 
 }
 押下時のアニメーションの実装③ - ジェスチャーの判定 - 47 detectTapGestures(onPress = {}) で 長押しのジェスチャーイベントを検知
48. 押下時のアニメーションの実装 48 既存 できたもの
49. 押下時のアニメーションの実装 49 circleWidth固定 circleWidthアニメーション 既存
50. 50 ① キーを1つ作ってみる ② 押下時のアニメーションを実装する ③ キーパッドらしく配置する ④ ドラッグ時のアニメーションを実装する キーパッドらしくする
51. キーパッドらしくする 51 val keyPad =
 listOf(
 "7", "8", "9",
 "4", "5", "6",
 "1", "2", "3",
 "0", "00", "del",
 )
 
 LazyVerticalGrid(
 columns = GridCells.Fixed(3),
 ) {
 items(keyPad) { key ->
 Key(
 text = key,
 isSelected = selected
 )
 }
 }

52. キーパッドらしくする 52 val keyPad =
 listOf(
 "7", "8", "9",
 "4", "5", "6",
 "1", "2", "3",
 "0", "00", "del",
 )
 
 LazyVerticalGrid(
 columns = GridCells.Fixed(3),
 ) {
 items(keyPad) { key ->
 Key(
 text = key,
 isSelected = selected
 )
 }
 }
 ドラッグ時の実装をしよう！
53. 53 ① キーを1つ作ってみる ② 押下時のアニメーションを実装する ③ キーパッドらしく配置する ④ ドラッグ時のアニメーションを実装する ドラッグ時のアニメーションの実装
54. ドラッグ時のアニメーションの実装 54 ① ドラッグジェスチャーの検出 ② ポインタの位置の検出 ① ドラッグジェスチャーの検出 ② ポインタの位置の検出 ③ ①と②を組み合わせる
55. ドラッグ時のアニメーションの実装 55 ① ドラッグジェスチャーの検出 ② ポインタの位置の検出 ① ドラッグジェスチャーの検出 ② ポインタの位置の検出 ③ ①と②を組み合わせる
56. ドラッグ時のアニメーションの実装① - ジェスチャーの検出 - 56 Modifier
 .pointerInput(Unit) {
 detectDragGestures(
 onDragStart = {
 // ドラッグ開始時
 },
 onDrag = {
 // ドラッグ中
 },
 onDragEnd = {
 // ドラッグ終了時
 },
 onDragCancel = {
 // 別のジェスチャが入力されたとき 
 },
 )
 },

57. ドラッグ時のアニメーションの実装① - ジェスチャーの検出 - 57 Modifier
 .pointerInput(Unit) {
 detectDragGestures(
 onDragStart = {
 // ドラッグ開始時
 },
 onDrag = {
 // ドラッグ中
 },
 onDragEnd = {
 // ドラッグ終了時
 },
 onDragCancel = {
 // 別のジェスチャが入力されたとき 
 },
 )
 },
 detectDragGesturesで ドラッグのジェスチャーイベントを検知
58. ドラッグ時のアニメーションの実装 58 ① ドラッグジェスチャーの検出 ② ポインタの位置の検出 ① ドラッグジェスチャーの検出 ② ポインタの位置の検出 ③ ①と②を組み合わせる
59. ドラッグ時のアニメーションの実装② - ポインタの位置の検出 - 59 fun LazyGridState.gridItemKeyAtPosition(hitPoint: Offset): Int? =
 layoutInfo.visibleItemsInfo
 .find { itemInfo ->
 itemInfo.size.toIntRect().contains(hitPoint.round() - itemInfo.offset)
 }?.key as? Int
 Create a photo grid with multiselect behavior using Jetpack Compose https://medium.com/androiddevelopers/create-a-photo-grid-with-multiselect-behavior-using-jetpack-compose-9a8d588a9b63 0
 1
 2
 3
 4
 5

60. 60 fun LazyGridState.gridItemKeyAtPosition(hitPoint: Offset): Int? =
 layoutInfo.visibleItemsInfo
 .find { itemInfo ->
 itemInfo.size.toIntRect().contains(hitPoint.round() - itemInfo.offset)
 }?.key as? Int
 Create a photo grid with multiselect behavior using Jetpack Compose https://medium.com/androiddevelopers/create-a-photo-grid-with-multiselect-behavior-using-jetpack-compose-9a8d588a9b63 0
 1
 2
 3
 4
 5
 ドラッグ時のアニメーションの実装② - ポインタの位置の検出 -
61. 61 fun LazyGridState.gridItemKeyAtPosition(hitPoint: Offset): Int? =
 layoutInfo.visibleItemsInfo
 .find { itemInfo ->
 itemInfo.size.toIntRect().contains(hitPoint.round() - itemInfo.offset)
 }?.key as? Int
 Create a photo grid with multiselect behavior using Jetpack Compose https://medium.com/androiddevelopers/create-a-photo-grid-with-multiselect-behavior-using-jetpack-compose-9a8d588a9b63 0
 1
 2
 3
 4
 5
 ドラッグ時のアニメーションの実装② - ポインタの位置の検出 -
62. 0
 1
 2
 3
 4
 5
 62 fun LazyGridState.gridItemKeyAtPosition(hitPoint: Offset): Int? =
 layoutInfo.visibleItemsInfo
 .find { itemInfo ->
 itemInfo.size.toIntRect().contains(hitPoint.round() - itemInfo.offset)
 }?.key as? Int
 Create a photo grid with multiselect behavior using Jetpack Compose https://medium.com/androiddevelopers/create-a-photo-grid-with-multiselect-behavior-using-jetpack-compose-9a8d588a9b63 hitPoint(350.2, 130.7)
 ドラッグ時のアニメーションの実装② - ポインタの位置の検出 -
63. 0
 1
 2
 3
 4
 5
 63 fun LazyGridState.gridItemKeyAtPosition(hitPoint: Offset): Int? =
 layoutInfo.visibleItemsInfo
 .find { itemInfo ->
 itemInfo.size.toIntRect().contains(hitPoint.round() - itemInfo.offset)
 }?.key as? Int
 Create a photo grid with multiselect behavior using Jetpack Compose https://medium.com/androiddevelopers/create-a-photo-grid-with-multiselect-behavior-using-jetpack-compose-9a8d588a9b63 hitPoint(350.2, 130.7)
 120*120の正方形
 ドラッグ時のアニメーションの実装② - ポインタの位置の検出 -
64. 0
 1
 2
 3
 4
 5
 64 fun LazyGridState.gridItemKeyAtPosition(hitPoint: Offset): Int? =
 layoutInfo.visibleItemsInfo
 .find { itemInfo ->
 itemInfo.size.toIntRect().contains(hitPoint.round() - itemInfo.offset)
 }?.key as? Int
 Create a photo grid with multiselect behavior using Jetpack Compose https://medium.com/androiddevelopers/create-a-photo-grid-with-multiselect-behavior-using-jetpack-compose-9a8d588a9b63 hitPoint(350.2, 130.7)
 itemInfo.offset(0,0)
 (350, 131) - (0,0) = (350,131)
 ドラッグ時のアニメーションの実装② - ポインタの位置の検出 -
65. 0
 1
 2
 3
 4
 5
 65 fun LazyGridState.gridItemKeyAtPosition(hitPoint: Offset): Int? =
 layoutInfo.visibleItemsInfo
 .find { itemInfo ->
 itemInfo.size.toIntRect().contains(hitPoint.round() - itemInfo.offset)
 }?.key as? Int
 Create a photo grid with multiselect behavior using Jetpack Compose https://medium.com/androiddevelopers/create-a-photo-grid-with-multiselect-behavior-using-jetpack-compose-9a8d588a9b63 hitPoint(350.2, 130.7)
 itemInfo.offset(120,0)
 (350, 131) - (120,0) = (230,131)
 ドラッグ時のアニメーションの実装② - ポインタの位置の検出 -
66. 0
 1
 2
 3
 4
 5
 66 fun LazyGridState.gridItemKeyAtPosition(hitPoint: Offset): Int? =
 layoutInfo.visibleItemsInfo
 .find { itemInfo ->
 itemInfo.size.toIntRect().contains(hitPoint.round() - itemInfo.offset)
 }?.key as? Int
 Create a photo grid with multiselect behavior using Jetpack Compose https://medium.com/androiddevelopers/create-a-photo-grid-with-multiselect-behavior-using-jetpack-compose-9a8d588a9b63 hitPoint(350.2, 130.7)
 itemInfo.offset(240,0)
 (350, 131) - (240,0) = (110,131)
 ドラッグ時のアニメーションの実装② - ポインタの位置の検出 -
67. 0
 1
 2
 3
 4
 5
 67 fun LazyGridState.gridItemKeyAtPosition(hitPoint: Offset): Int? =
 layoutInfo.visibleItemsInfo
 .find { itemInfo ->
 itemInfo.size.toIntRect().contains(hitPoint.round() - itemInfo.offset)
 }?.key as? Int
 Create a photo grid with multiselect behavior using Jetpack Compose https://medium.com/androiddevelopers/create-a-photo-grid-with-multiselect-behavior-using-jetpack-compose-9a8d588a9b63 hitPoint(350.2, 130.7)
 itemInfo.offset(0,120)
 (350, 131) - (0,120) = (350,11)
 ドラッグ時のアニメーションの実装② - ポインタの位置の検出 -
68. 0
 1
 2
 3
 4
 5
 68 fun LazyGridState.gridItemKeyAtPosition(hitPoint: Offset): Int? =
 layoutInfo.visibleItemsInfo
 .find { itemInfo ->
 itemInfo.size.toIntRect().contains(hitPoint.round() - itemInfo.offset)
 }?.key as? Int
 Create a photo grid with multiselect behavior using Jetpack Compose https://medium.com/androiddevelopers/create-a-photo-grid-with-multiselect-behavior-using-jetpack-compose-9a8d588a9b63 hitPoint(350.2, 130.7)
 itemInfo.offset(120,120)
 (350, 131) - (120,120) = (230,11)
 ドラッグ時のアニメーションの実装② - ポインタの位置の検出 -
69. 0
 1
 2
 3
 4
 5
 69 fun LazyGridState.gridItemKeyAtPosition(hitPoint: Offset): Int? =
 layoutInfo.visibleItemsInfo
 .find { itemInfo ->
 itemInfo.size.toIntRect().contains(hitPoint.round() - itemInfo.offset)
 }?.key as? Int
 Create a photo grid with multiselect behavior using Jetpack Compose https://medium.com/androiddevelopers/create-a-photo-grid-with-multiselect-behavior-using-jetpack-compose-9a8d588a9b63 hitPoint(350.2, 130.7)
 itemInfo.offset(240,120)
 (350, 131) - (240,120) = (110,11)
 ドラッグ時のアニメーションの実装② - ポインタの位置の検出 -
70. ドラッグ時のアニメーションの実装 70 ① ドラッグジェスチャーの検出 ② ポインタの位置の検出 ③ ①と②を組み合わせる
71. ドラッグ時のアニメーションの実装③ - ドラッグ中のポインタ検出 - 71 detectDragGestures(
 onDragStart = { offset ->
 lazyGridState.gridItemKeyAtPosition(offset)?.let { key ->
 pointer.value = key
 }
 },
 onDrag = { change, _ ->
 lazyGridState.gridItemKeyAtPosition(change.position)?.let { key ->
 pointer.value = key
 }
 },
 onDragEnd = {
 pointer.value = null
 },
 onDragCancel = {
 pointer.value = null
 },
 )

72. detectDragGestures(
 onDragStart = { offset ->
 lazyGridState.gridItemKeyAtPosition(offset)?.let { key ->
 pointer.value = key
 }
 },
 onDrag = { change, _ ->
 lazyGridState.gridItemKeyAtPosition(change.position)?.let { key ->
 pointer.value = key
 }
 },
 onDragEnd = {
 pointer.value = null
 },
 onDragCancel = {
 pointer.value = null
 },
 )
 72 ドラッグ開始時のoffsetを受けて 現在のキーをpointerに格納 ドラッグ時のアニメーションの実装③ - ドラッグ中のポインタ検出 -
73. detectDragGestures(
 onDragStart = { offset ->
 lazyGridState.gridItemKeyAtPosition(offset)?.let { key ->
 pointer.value = key
 }
 },
 onDrag = { change, _ ->
 lazyGridState.gridItemKeyAtPosition(change.position)?.let { key ->
 pointer.value = key
 }
 },
 onDragEnd = {
 pointer.value = null
 },
 onDragCancel = {
 pointer.value = null
 },
 )
 73 onDrag中は常に変更を受け取るので 都度最新のkeyを返す ドラッグ時のアニメーションの実装③ - ドラッグ中のポインタ検出 -
74. detectDragGestures(
 onDragStart = { offset ->
 lazyGridState.gridItemKeyAtPosition(offset)?.let { key ->
 pointer.value = key
 }
 },
 onDrag = { change, _ ->
 lazyGridState.gridItemKeyAtPosition(change.position)?.let { key ->
 pointer.value = key
 }
 },
 onDragEnd = {
 pointer.value = null
 },
 onDragCancel = {
 pointer.value = null
 },
 )
 74 Drag終了・キャンセル時はnull ドラッグ時のアニメーションの実装③ - ドラッグ中のポインタ検出 -
75. 完成 75
76. 完成 - 既存との比較 - 76
77. まとめ 77 ・完全に振る舞いから実装 　→ Jetpack Composeの知識だけで 　　 既存に近い実装ができた！ ・既存645行 / 移行後234行 　→ コード量が63％減少！ ・ジェスチャーのハンドリングが難しい 　→ 上下のドラッグがうまく反応しないことも 　　 長押しとドラッグが競合している可能性 ・金額入力画面やっぱり可愛くて楽しい 　→ 全画面もっと楽しく可愛くしたい！
78. 最後に ・STORES 決済 の金額入力画面は楽しい！ ・Jetpack Composeでのジェスチャーに応じた 　アニメーションの実装ができた！ 78 　こだわりを持って 　Jetpack Compose移行やっていきます💪