[shibuya.apk #46] Composableの枠を超えてアニメーションする / Animation beyond Composable

shibuya.apk #46 で発表した資料です。
動きのあるスライドが多いため、動きを見たい場合は以下のGoogle Slidesをご参照ください。
https://docs.google.com/presentation/d/1bRE9RRSn7A5BPMuflTWU5kvP8mHO03ZHRlbW6UIjlGU/edit?usp=sharing

Transcript

1. Composableの枠を超えて アニメーションする shibuya.apk #46 2024/01/19 (Fri.) Taichi Sato / @syarihu Giftmall, Inc. / mikan Co., Ltd. Android Engineer 動きのあるスライドが多いため、動きを見たい場合は DescriptionにあるURLまた は右のQRコードからGoogle Slidesを見てください
2. Taichi Sato (@syarihu) • 本業 ◦ Giftmall, Inc. (LUCHE GROUP) • 副業 ◦ mikan Co., Ltd.
3. Taichi Sato (@syarihu) • 本業 ◦ Giftmall, Inc. (LUCHE GROUP) • 副業 ◦ mikan Co., Ltd.
4. 実現したい機能 語句を並べかえて正しい英文を作る問題 を回答する（語句整序）ための機能
5. 語句整序の初期実装
6. 語句整序の初期実装 • 6単語以上は非対応 • 単語の改行に非対応 ◦ 改行が必要になる問題の場合は レイアウトが崩れる • 単語を一単語ずつ戻せない ◦ すべての単語が一括で戻る
7. 語句整序の初期実装 • Layout Composableを使う ◦ Jetpack Composeにおけるカスタムレイアウト • 単語が選択されたら選択された単語の枠はグレーアウトして表示 しておくため、背景色用のBoxの中に単語のBoxを入れ子にする • Boxのoffsetを変えることで単語の移動と並べ替えを表現 ◦ 単語をタップしたときにoffsetを計算して単語を移動
9. 移動用のBoxのoffsetを変えたとき offset=0の単語 offsetをずらした単語
10. 語句整序の初期実装の課題 • 選択された単語のoffsetを計算する必要があるので、複数行に なったときに計算が大変 ◦ これが理由で初期実装時に改行を諦めたのだと思い確認し たところ、その通りだった
11. 語句整序の初期実装の課題 • 複数行になったとき、選択済の単語を表示する領域にDividerを 表示するのが難しい
12. 語句整序の初期実装の課題 • 複数行になったとき、選択済の単語を表示する領域にDividerを 表示するのが難しい これ これ
13. 語句整序の初期実装の課題 • 複数行になったとき、選択済の単語を表示する領域にDividerを 表示するのが難しい ◦ 単語を描画する領域と行数を計算し、必要なDividerを事前に Layoutのcontent内に入れておく必要がある ◦ 初期実装では1行の表示を前提としてLayoutの外にDivider を置いてoffsetで選択済と選択肢の間に配置していた
14. 語句整序の初期実装の課題 • 初期実装の追加改修では6単語以上（改行が必要となる語句整 序）の対応は難しいと判断して、別のアプローチで新規実装する ことにした
15. 語句整序の6単語以上に対応する方法を考える • Layout Composableによる実装 ◦ 単語が右端までいったら単語単位で折り返さないといけない ◦ 単語が改行されるとき、行間にDividerを入れるのが大変 ▪ Layoutはあくまで配置を決めるものなので、事前に DividerをContentに含める必要がある
16. 語句整序の6単語以上に対応する方法を考える • Canvasによる実装 ◦ ComposeにもCanvas Composableがあり、すべてをCanvas で描画すれば頑張ればできる ◦ パワープレイすぎるし、誰もメンテできなくなる可能性がある のでできればやりたくない ◦ 他のアプローチが無かった場合の最終手段にした
17. 語句整序の6単語以上に対応する方法を考える • レイアウトはComposableで、アニメーションはCanvasで実装す る ◦ 単語単位で折返すレイアウトはFlowRowを使う ◦ ModifierにはdrawWithContentがあり、これを使うと Composableの描画の後にCanvasを描画できる
18. 改行可能な単語一覧のレイアウトを構築する
19. 単語を並べて、単語が右端までいったら単語単位で折り返す val sampleWords = listOf( "store", "to", "buy", "want", "food", "to", "cook", "dinner", "to", "go", "to", "the", "some", "to", "eat", "with", "my", "family", "I" ).mapIndexed { index, word -> WordEntity(wordId = "$index", word = word) } @Composable private fun Words( words: List<WordEntity> = sampleWords, ) { FlowRow( modifier = Modifier .fillMaxWidth() .padding(horizontal = 20.dp, vertical = 16.dp), mainAxisSpacing = 8.dp, crossAxisSpacing = 16.dp, ) { words.forEach { entity -> Word( word = entity.word, ) } } }
20. 単語を並べて、単語が右端までいったら単語単位で折り返す val sampleWords = listOf( "store", "to", "buy", "want", "food", "to", "cook", "dinner", "to", "go", "to", "the", "some", "to", "eat", "with", "my", "family", "I" ).mapIndexed { index, word -> WordEntity(wordId = "$index", word = word) } @Composable private fun Words( words: List<WordEntity> = sampleWords, ) { FlowRow( modifier = Modifier .fillMaxWidth() .padding(horizontal = 20.dp, vertical = 16.dp), mainAxisSpacing = 8.dp, crossAxisSpacing = 16.dp, ) { words.forEach { entity -> Word( word = entity.word, ) } } }
21. 単語を並べて、単語が右端までいったら単語単位で折り返す
22. 選択した単語の描画領域を確保する
23. 単語を並べて、単語が右端までいったら単語単位で折り返す @Composable private fun Word( word: String, showWord: Boolean = true, onGloballyPositioned: (LayoutCoordinates) -> Unit = {}, ) { Box( modifier = Modifier .drawWithContent { if (showWord) { drawContent() } } .border( BorderStroke(2.dp, Color.LightGray), RoundedCornerShape(8.dp) ) .onGloballyPositioned { onGloballyPositioned(it) } ) {
24. 単語を並べて、単語が右端までいったら単語単位で折り返す @Composable private fun Word( word: String, showWord: Boolean = true, onGloballyPositioned: (LayoutCoordinates) -> Unit = {}, ) { Box( modifier = Modifier .drawWithContent { if (showWord) { drawContent() } } .border( BorderStroke(2.dp, Color.LightGray), RoundedCornerShape(8.dp) ) .onGloballyPositioned { onGloballyPositioned(it) } ) {
25. 単語を並べて、単語が右端までいったら単語単位で折り返す FlowRow( // ... ) { words.forEach { entity -> Word( word = entity.word, showWord = showWord, ) } }
26. 単語を並べて、単語が右端までいったら単語単位で折り返す @Preview @Composable private fun Preview() { Column { Words(showWord = false) Words(showWord = true) } }
27. 選択した単語の描画領域を確保する
28. 選択済の単語の領域にDividerを描画する
29. 選択済の単語の領域にDividerを描画する // FlowRowのサイズを保持する var flowRowSize by remember { mutableStateOf(IntSize.Zero) } FlowRow( modifier = Modifier // ... .onGloballyPositioned { flowRowSize = it.size }, // ... ) { // ... }
30. 選択済の単語の領域にDividerを描画する // 各単語の位置を保持するための Map val wordPositions = remember { mutableMapOf<String, LayoutCoordinates>() } FlowRow( // ... ) { words.forEach { entity -> Word( word = entity.word, visible = showWord, onGloballyPositioned = { wordPositions[entity.wordId] = it } ) } }
31. 選択済の単語の領域にDividerを描画する FlowRow( modifier = Modifier // ... .drawWithContent { // FlowRowのcontentを先に描画する drawContent()
32. 選択済の単語の領域にDividerを描画する FlowRow( modifier = Modifier // ... .drawWithContent { // FlowRowのcontentを先に描画する drawContent() // 単語が非表示のとき if (showWord.not()) { // 描画されている単語の中から親の Composable上でx=0の位置に // 描画されている単語（各行の一番最初の単語）のみを取得する val firstWordInLines = wordPositions .filter { (_, layoutCoordinates) -> layoutCoordinates.positionInParent().x == 0f } if (firstWordInLines.isEmpty()) return@drawWithContent
33. 選択済の単語の領域にDividerを描画する FlowRow( modifier = Modifier // ... .drawWithContent { // ... if (showWord.not()) { // ... // 最後行の下に dividerを表示しないために最後行の単語の keyを取得する val lastKey = firstWordInLines.keys.last() // 最後行の単語以外の単語の下に dividerを表示する firstWordInLines .filterNot { it.key == lastKey } .forEach { (_, layoutCoordinates) -> // ここでDividerを描画する } } }
34. 選択済の単語の領域にDividerを描画する firstWordInLines .filterNot { it.key == lastKey } .forEach { (_, layoutCoordinates) -> // 単語の左下の y座標 + 単語とDividerの間のスペース val dividerOffsetY = Rect( layoutCoordinates.positionInParent(), layoutCoordinates.size.toSize() ).bottomLeft.y + dividerSpacing drawLine( Color.LightGray, start = Offset( // FlowRowの一番左から dividerを表示 x = 0f, y = dividerOffsetY ), end = Offset( // FlowRowの一番右まで dividerを表示 x = flowRowSize.width.toFloat(), y = dividerOffsetY ), strokeWidth = 1.dp.toPx() ) }
35. 選択済の単語の領域にDividerを描画する firstWordInLines .filterNot { it.key == lastKey } .forEach { (_, layoutCoordinates) -> // 単語の左下の y座標 + 単語とDividerの間のスペース val dividerOffsetY = Rect( layoutCoordinates.positionInParent(), layoutCoordinates.size.toSize() ).bottomLeft.y + dividerSpacing drawLine( Color.LightGray, start = Offset( // FlowRowの一番左から dividerを表示 x = 0f, y = dividerOffsetY ), end = Offset( // FlowRowの一番右まで dividerを表示 x = flowRowSize.width.toFloat(), y = dividerOffsetY ), strokeWidth = 1.dp.toPx() ) }
36. 選択済の単語の領域にDividerを描画する firstWordInLines .filterNot { it.key == lastKey } .forEach { (_, layoutCoordinates) -> // 単語の左下の y座標 + 単語とDividerの間のスペース val dividerOffsetY = Rect( layoutCoordinates.positionInParent(), layoutCoordinates.size.toSize() ).bottomLeft.y + dividerSpacing drawLine( Color.LightGray, start = Offset( // FlowRowの一番左から dividerを表示 x = 0f, y = dividerOffsetY ), end = Offset( // FlowRowの一番右まで dividerを表示 x = flowRowSize.width.toFloat(), y = dividerOffsetY ), strokeWidth = 1.dp.toPx() ) }
37. 選択済の単語の領域にDividerを描画する
38. 選択済の単語の領域にDividerを描画する @Preview @Composable private fun WordsPreview() { Column { Box { Words(words = sampleWords, showWord = false) Words(words = sampleWords.take(5), showWord = true) } Words(words = sampleWords, showWord = true) } }
39. 選択済の単語の領域にDividerを描画する
40. Composableの枠を超えてアニメーションする
41. Composableの枠を超えてアニメーションする @Preview @Composable private fun WordsPreview() { Column { Box { Words(words = sampleWords, showWord = false) Words(words = selectedWords, showWord = true) } Words(words = sampleWords, showWord = true) } }
42. Composableの枠を超えてアニメーションする
43. Column Composableの枠を超えてアニメーションする
44. Column { Box { Words {} Words {} } Words {} } Composableの枠を超えてアニメーションする
45. Column { Box { Words {} Words { Word() } } Words { Word() } } Composableの枠を超えてアニメーションする
46. Column { Box { Words {} Words { Word() } } Words { Word() } } 入れ子になったComposableを外のComposableに アニメーションで移動したい Composableの枠を超えてアニメーションする
47. ColumnのCanvas上に単語を描画し、 その単語をアニメーションすることで 単語が移動しているように見せよう💡
48. @Composable fun WordOrderChoice( words: List<WordEntity> = sampleWords, selectedWords: List<WordEntity> = emptyList() ) { Column( modifier = Modifier.drawWithContent { drawContent() // ここに単語のアニメーションを実装することで、 // Composableの入れ子を気にせずアニメーションできる } ) { Box { Words(words = words, showWord = false) Words(words = selectedWords) } Words(words = words, showWord = true) } } Composableの枠を超えてアニメーションする
49. @Composable fun WordOrderChoice( words: List<WordEntity> = sampleWords, selectedWords: List<WordEntity> = emptyList() ) { Column( modifier = Modifier.drawWithContent { drawContent() // ここに単語のアニメーションを実装することで、 // Composableの入れ子を気にせずアニメーションできる } ) { Box { Words(words = words, showWord = false) Words(words = selectedWords) } Words(words = words, showWord = true) } } Composableの枠を超えてアニメーションする
50. Composableの枠を超えてアニメーションする 1. Composableの単語をタップ 2. Composableの単語を非表示にする 3. Composableの単語があった位置にCanvas上で単語を表示する 4. 移動先の単語一覧のComposableに非表示状態で単語を追加 ◦ 移動先の単語の位置の確認のため 5. Canvas上でアニメーションで単語を移動 6. 移動が終わったらComposableの単語を表示し、Canvas上の単語を 非表示にする
51. アニメーションなしで 単語を選択できるようにする
52. /** 単語の表示状態 */ enum class WordVisibility { /** 単語を表示する */ Visible, /** 単語全体を塗りつぶす（文字は表示されない） */ InvisibleFilled, /** 単語を透明にする（表示領域のみの確保） */ InvisibleTransparent, } data class WordEntity( val wordId: String, val word: String, val visibility: WordVisibility = WordVisibility.Visible, ) 単語を選択できるようにする
53. @Composable private fun Word( word: WordEntity, showWord: Boolean = true, onGloballyPositioned: (LayoutCoordinates) -> Unit = {}, onClick: (WordEntity) -> Unit = {}, ) { Box( modifier = Modifier .clip(RoundedCornerShape(8.dp)) .drawWithContent { if (showWord) { when (word.visibility) { WordVisibility.Visible -> drawContent() WordVisibility.InvisibleFilled -> drawRect(Color.LightGray) else -> Unit } } } // ... .clickable( interactionSource = remember { MutableInteractionSource() }, indication = rememberRipple(), onClick = { onClick(word) }, ) 単語を選択できるようにする
54. @Composable private fun Word( word: WordEntity, showWord: Boolean = true, onGloballyPositioned: (LayoutCoordinates) -> Unit = {}, onClick: (WordEntity) -> Unit = {}, ) { Box( modifier = Modifier .clip(RoundedCornerShape(8.dp)) .drawWithContent { if (showWord) { when (word.visibility) { WordVisibility.Visible -> drawContent() WordVisibility.InvisibleFilled -> drawRect(Color.LightGray) else -> Unit } } } // ... .clickable( interactionSource = remember { MutableInteractionSource() }, indication = rememberRipple(), onClick = { onClick(word) }, ) 単語を選択できるようにする
55. @Composable private fun Word( word: WordEntity, showWord: Boolean = true, onGloballyPositioned: (LayoutCoordinates) -> Unit = {}, onClick: (WordEntity) -> Unit = {}, ) { Box( modifier = Modifier .clip(RoundedCornerShape(8.dp)) .drawWithContent { if (showWord) { when (word.visibility) { WordVisibility.Visible -> drawContent() WordVisibility.InvisibleFilled -> drawRect(Color.LightGray) else -> Unit } } } // ... .clickable( interactionSource = remember { MutableInteractionSource() }, indication = rememberRipple(), onClick = { onClick(word) }, ) 単語を選択できるようにする
56. @Composable private fun Words( words: List<WordEntity>, showWords: Boolean = true, onClickWord: (WordEntity) -> Unit = {}, ) { // ... FlowRow( // ... ) { words.forEach { entity -> Word( // ... word = entity, onClick = onClickWord, ) } } 単語を選択できるようにする
57. @Composable fun WordOrderChoice( words: List<WordEntity>, selectedWords: List<WordEntity>, onClickChoicesWord: (WordEntity) -> Unit = {}, ) { Column( modifier = Modifier.background(Color.White) ) { Box { Words(words = words, showWords = false) Words(words = selectedWords) } Words( words = words, showWords = true, onClickWord = onClickChoicesWord ) } } 単語を選択できるようにする
58. @Preview @Composable private fun WordOrderChoicePreview() { var words by remember { mutableStateOf(sampleWords) } var selectedWords by remember { mutableStateOf(listOf<WordEntity>()) } WordOrderChoice( words = words, selectedWords = selectedWords, onClickChoicesWord = { clickWord -> words = words.map { if (it.wordId == clickWord.wordId) { it.copy(visibility = WordVisibility.InvisibleFilled) } else { it } } selectedWords = selectedWords.toMutableList().apply { add(clickWord) } } ) } 単語を選択できるようにする
59. 単語を選択できるよ うにする
60. 単語選択時にアニメーションする
61. private fun ContentDrawScope.drawWord( textLayoutResult: TextLayoutResult, wordSize: Size, wordTopLeft: Offset, ) { if (wordTopLeft == Offset.Unspecified || wordSize == Size.Zero) return // テキストがチップの中央に表示されるように計算して配置する val textTopLeft = Offset( wordTopLeft.x + wordSize.width / 2f - textLayoutResult.size.width / 2f, wordTopLeft.y + wordSize.height / 2f - textLayoutResult.size.height / 2f, ) // チップの背景色 drawRoundRect( color = Color.White, topLeft = wordTopLeft, size = wordSize, cornerRadius = CornerRadius(8.dp.toPx()) ) // ... Canvasで単語を描画する
62. private fun ContentDrawScope.drawWord( textLayoutResult: TextLayoutResult, wordSize: Size, wordTopLeft: Offset, ) { if (wordTopLeft == Offset.Unspecified || wordSize == Size.Zero) return // テキストがチップの中央に表示されるように計算して配置する val textTopLeft = Offset( wordTopLeft.x + wordSize.width / 2f - textLayoutResult.size.width / 2f, wordTopLeft.y + wordSize.height / 2f - textLayoutResult.size.height / 2f, ) // チップの背景色 drawRoundRect( color = Color.White, topLeft = wordTopLeft, size = wordSize, cornerRadius = CornerRadius(8.dp.toPx()) ) // ... Canvasで単語を描画する
63. private fun ContentDrawScope.drawWord( textLayoutResult: TextLayoutResult, wordSize: Size, wordTopLeft: Offset, ) { if (wordTopLeft == Offset.Unspecified || wordSize == Size.Zero) return // テキストがチップの中央に表示されるように計算して配置する val textTopLeft = Offset( wordTopLeft.x + wordSize.width / 2f - textLayoutResult.size.width / 2f, wordTopLeft.y + wordSize.height / 2f - textLayoutResult.size.height / 2f, ) // チップの背景色 drawRoundRect( color = Color.White, topLeft = wordTopLeft, size = wordSize, cornerRadius = CornerRadius(8.dp.toPx()) ) // ... Canvasで単語を描画する
64. private fun ContentDrawScope.drawWord( textLayoutResult: TextLayoutResult, wordSize: Size, wordTopLeft: Offset, ) { if (wordTopLeft == Offset.Unspecified || wordSize == Size.Zero) return // テキストがチップの中央に表示されるように計算して配置する val textTopLeft = Offset( wordTopLeft.x + wordSize.width / 2f - textLayoutResult.size.width / 2f, wordTopLeft.y + wordSize.height / 2f - textLayoutResult.size.height / 2f, ) // 単語の背景色 drawRoundRect( color = Color.White, topLeft = wordTopLeft, size = wordSize, cornerRadius = CornerRadius(8.dp.toPx()) ) // ... Canvasで単語を描画する
65. private fun ContentDrawScope.drawWord( textLayoutResult: TextLayoutResult, wordSize: Size, wordTopLeft: Offset, ) { // ... // 単語の枠線 drawRoundRect( color = Color.LightGray, topLeft = wordTopLeft, size = wordSize, cornerRadius = CornerRadius(8.dp.toPx()), style = Stroke(2.dp.toPx()) ) // 単語のテキスト drawText( textLayoutResult, topLeft = textTopLeft, ) } Canvasで単語を描画する
66. data class DrawWord( /* 描画する単語の情報 */ val word: WordEntity, /* 単語のテキストの測定結果 */ val textLayoutResult: TextLayoutResult? = null, /* 単語のサイズ */ val size: Size = Size.Zero, /* 単語の初期位置 */ val originalTopLeft: Offset = Offset.Zero, /* 単語の現在の位置（アニメーション中はこれを更新する） */ val topLeft: Offset = Offset.Zero, /** 単語がアニメーション中かどうか */ val isInAnimation: Boolean = false, ) Canvas上で単語をアニメーションするための準備
67. @Composable fun WordOrderChoice( // ... ) { val textMeasurer = rememberTextMeasurer() val coroutineScope = rememberCoroutineScope() val drawWords = remember { mutableStateMapOf<String, DrawWord>() } var parentLayoutCoordinates: LayoutCoordinates? by remember { mutableStateOf(null) } Column( modifier = Modifier .background(Color.White) .drawWithContent { drawContent() drawWords.forEach { (_, drawWord) -> drawWord.textLayoutResult?.let { textLayoutResult -> drawWord(textLayoutResult, drawWord.size, drawWord.topLeft) } } } .onGloballyPositioned { parentLayoutCoordinates = it } ) { Canvas上で単語をアニメーションするための準備
68. @Composable fun WordOrderChoice( // ... ) { val textMeasurer = rememberTextMeasurer() val coroutineScope = rememberCoroutineScope() val drawWords = remember { mutableStateMapOf<String, DrawWord>() } var parentLayoutCoordinates: LayoutCoordinates? by remember { mutableStateOf(null) } Column( modifier = Modifier .background(Color.White) .drawWithContent { drawContent() drawWords.forEach { (_, drawWord) -> drawWord.textLayoutResult?.let { textLayoutResult -> drawWord(textLayoutResult, drawWord.size, drawWord.topLeft) } } } .onGloballyPositioned { parentLayoutCoordinates = it } ) { Canvas上で単語をアニメーションするための準備
69. @Composable fun WordOrderChoice( // ... ) { val textMeasurer = rememberTextMeasurer() val coroutineScope = rememberCoroutineScope() val drawWords = remember { mutableStateMapOf<String, DrawWord>() } var parentLayoutCoordinates: LayoutCoordinates? by remember { mutableStateOf(null) } Column( modifier = Modifier .background(Color.White) .drawWithContent { drawContent() drawWords.forEach { (_, drawWord) -> drawWord.textLayoutResult?.let { textLayoutResult -> drawWord(textLayoutResult, drawWord.size, drawWord.topLeft) } } } .onGloballyPositioned { parentLayoutCoordinates = it } ) { Canvas上で単語をアニメーションするための準備
70. @Composable fun WordOrderChoice( // ... ) { val textMeasurer = rememberTextMeasurer() val coroutineScope = rememberCoroutineScope() val drawWords = remember { mutableStateMapOf<String, DrawWord>() } var parentLayoutCoordinates: LayoutCoordinates? by remember { mutableStateOf(null) } Column( modifier = Modifier .background(Color.White) .drawWithContent { drawContent() drawWords.forEach { (_, drawWord) -> drawWord.textLayoutResult?.let { textLayoutResult -> drawWord(textLayoutResult, drawWord.size, drawWord.topLeft) } } } .onGloballyPositioned { parentLayoutCoordinates = it } ) { Canvas上で単語をアニメーションするための準備
71. @Composable private fun Words( // ... onClickWord: (WordEntity, LayoutCoordinates) -> Unit = { _, _ -> }, onWordPositionChanged: (WordEntity, LayoutCoordinates) -> Unit = { _, _ -> }, ) { val wordPositions = remember { mutableMapOf<String, LayoutCoordinates>() } FlowRow(...) { words.forEach { entity -> Word( // ... onGloballyPositioned = { wordPositions[entity.wordId] = it onWordPositionChanged(entity, it) }, onClick = { wordPositions[entity.wordId]?.let { layoutCoordinates -> onClickWord(it, layoutCoordinates) } }, ) } 単語をタップしたときに単語の位置を取得する
72. @Composable private fun Words( // ... onClickWord: (WordEntity, LayoutCoordinates) -> Unit = { _, _ -> }, onWordPositionChanged: (WordEntity, LayoutCoordinates) -> Unit = { _, _ -> }, ) { val wordPositions = remember { mutableMapOf<String, LayoutCoordinates>() } FlowRow(...) { words.forEach { entity -> Word( // ... onGloballyPositioned = { wordPositions[entity.wordId] = it onWordPositionChanged(entity, it) }, onClick = { wordPositions[entity.wordId]?.let { layoutCoordinates -> onClickWord(it, layoutCoordinates) } }, ) } 単語をタップしたときに単語の位置を取得する
73. @Composable private fun Words( // ... onClickWord: (WordEntity, LayoutCoordinates) -> Unit = { _, _ -> }, onWordPositionChanged: (WordEntity, LayoutCoordinates) -> Unit = { _, _ -> }, ) { val wordPositions = remember { mutableMapOf<String, LayoutCoordinates>() } FlowRow(...) { words.forEach { entity -> Word( // ... onGloballyPositioned = { wordPositions[entity.wordId] = it onWordPositionChanged(entity, it) }, onClick = { wordPositions[entity.wordId]?.let { layoutCoordinates -> onClickWord(it, layoutCoordinates) } }, ) } 単語をタップしたときに単語の位置を取得する
74. @Composable fun WordOrderChoice( words: List<WordEntity> = sampleWords, selectedWords: List<WordEntity> = emptyList() ) { Column(...) { Box { Words(words = words, showWord = false) Words(words = selectedWords) } Words(words = words, showWord = true) } } 選択肢の単語一覧にタップイベントを実装する
75. Words( // ... onClickWord = { entity, layoutCoordinates -> if ( drawWords.containsKey(entity.wordId) || selectedWords.any { it.wordId == entity.wordId } ) return@Words val drawWordOffset = parentLayoutCoordinates ?.localPositionOf(layoutCoordinates, Offset.Zero) ?: return@Words val drawWord = DrawWord( word = entity, topLeft = drawWordOffset, originalTopLeft = drawWordOffset, size = layoutCoordinates.size.toSize(), textLayoutResult = if (entity.word.isEmpty()) { null } else { // 単語が押されたとき、押された単語のテキストを測定し、その情報を保持する textMeasurer.measure(AnnotatedString(entity.word), drawWordTextStyle) } ) 選択肢の単語を選択済に移動するアニメーションを実装する
76. Words( // ... onClickWord = { entity, layoutCoordinates -> if ( drawWords.containsKey(entity.wordId) || selectedWords.any { it.wordId == entity.wordId } ) return@Words val drawWordOffset = parentLayoutCoordinates ?.localPositionOf(layoutCoordinates, Offset.Zero) ?: return@Words val drawWord = DrawWord( word = entity, topLeft = drawWordOffset, originalTopLeft = drawWordOffset, size = layoutCoordinates.size.toSize(), textLayoutResult = if (entity.word.isEmpty()) { null } else { // 単語が押されたとき、押された単語のテキストを測定し、その情報を保持する textMeasurer.measure(AnnotatedString(entity.word), drawWordTextStyle) } ) 選択肢の単語を選択済に移動するアニメーションを実装する
77. Words( // ... onClickWord = { entity, layoutCoordinates -> if ( drawWords.containsKey(entity.wordId) || selectedWords.any { it.wordId == entity.wordId } ) return@Words val drawWordOffset = parentLayoutCoordinates ?.localPositionOf(layoutCoordinates, Offset.Zero) ?: return@Words val drawWord = DrawWord( word = entity, topLeft = drawWordOffset, originalTopLeft = drawWordOffset, size = layoutCoordinates.size.toSize(), textLayoutResult = if (entity.word.isEmpty()) { null } else { // 単語が押されたとき、押された単語のテキストを測定し、その情報を保持する textMeasurer.measure(AnnotatedString(entity.word), drawWordTextStyle) } ) 選択肢の単語を選択済に移動するアニメーションを実装する
78. Words( // ... onClickWord = { entity, layoutCoordinates -> if ( drawWords.containsKey(entity.wordId) || selectedWords.any { it.wordId == entity.wordId } ) return@Words val drawWordOffset = parentLayoutCoordinates ?.localPositionOf(layoutCoordinates, Offset.Zero) ?: return@Words val drawWord = DrawWord( word = entity, topLeft = drawWordOffset, originalTopLeft = drawWordOffset, size = layoutCoordinates.size.toSize(), textLayoutResult = if (entity.word.isEmpty()) { null } else { // 単語が押されたとき、押された単語のテキストを測定し、その情報を保持する textMeasurer.measure(AnnotatedString(entity.word), drawWordTextStyle) } ) 選択肢の単語を選択済に移動するアニメーションを実装する
79. Words( words = words, showWords = true, onClickWord = { entity, layoutCoordinates -> // ... onClickChoicesWord( // タップされた単語 entity.copy(visibility = WordVisibility.InvisibleFilled), // 移動先の単語 entity.copy(visibility = WordVisibility.InvisibleTransparent), ) drawWords[entity.wordId] = drawWord } ) 選択肢の単語を選択済に移動するアニメーションを実装する
80. Words( words = words, showWords = true, onClickWord = { entity, layoutCoordinates -> // ... onClickChoicesWord( // タップされた単語 entity.copy(visibility = WordVisibility.InvisibleFilled), // 移動先の単語 entity.copy(visibility = WordVisibility.InvisibleTransparent), ) drawWords[entity.wordId] = drawWord } ) 選択肢の単語を選択済に移動するアニメーションを実装する
81. Words( words = words, showWords = true, onClickWord = { entity, layoutCoordinates -> // ... onClickChoicesWord( // タップされた単語 entity.copy(visibility = WordVisibility.InvisibleFilled), // 移動先の単語 entity.copy(visibility = WordVisibility.InvisibleTransparent), ) drawWords[entity.wordId] = drawWord } ) 選択肢の単語を選択済に移動するアニメーションを実装する
82. Words( words = words, showWords = true, onClickWord = { entity, layoutCoordinates -> // ... onClickChoicesWord( // タップされた単語 entity.copy(visibility = WordVisibility.InvisibleFilled), // 移動先の単語 entity.copy(visibility = WordVisibility.InvisibleTransparent), ) drawWords[entity.wordId] = drawWord } ) 選択肢の単語を選択済に移動するアニメーションを実装する
83. @Composable fun WordOrderChoice( words: List<WordEntity> = sampleWords, selectedWords: List<WordEntity> = emptyList() ) { Column(...) { Box { Words(words = words, showWord = false) Words(words = selectedWords) } Words(words = words, showWord = true) } } 選択肢の単語を選択済に移動するアニメーションを実装する
84. Words( words = selectedWords, onWordPositionChanged = { entity, layoutCoordinates -> val targetWords = drawWords.filter { (_, drawWord) -> drawWord.isInAnimation.not() && drawWord.word.wordId == entity.wordId } if (targetWords.isEmpty()) return@Words // ... } ) 選択肢の単語を選択済に移動するアニメーションを実装する
85. Words( words = selectedWords, onWordPositionChanged = { entity, layoutCoordinates -> val targetWords = drawWords.filter { (_, drawWord) -> drawWord.isInAnimation.not() && drawWord.word.wordId == entity.wordId } if (targetWords.isEmpty()) return@Words // ... } ) 選択肢の単語を選択済に移動するアニメーションを実装する
86. onWordPositionChanged = { entity, layoutCoordinates -> // ... coroutineScope.launch { val animationWords = targetWords.map { (_, drawWord) -> async { drawWords[entity.wordId]?.let { drawWords[entity.wordId] = it.copy(isInAnimation = true) } animate( Offset.VectorConverter, initialValue = drawWord.originalTopLeft, targetValue = parentLayoutCoordinates ?.localPositionOf(layoutCoordinates, Offset.Zero) ?: Offset.Zero, ) { value, _ -> drawWords[entity.wordId]?.let { drawWords[entity.wordId] = it.copy(topLeft = value) } } onSelectedAnimationFinished(entity.copy(visibility = WordVisibility.Visible)) drawWords.remove(entity.wordId) } } animationWords.awaitAll() 選択肢の単語を選択済に移動するアニメーションを実装する
87. onWordPositionChanged = { entity, layoutCoordinates -> // ... coroutineScope.launch { val animationWords = targetWords.map { (_, drawWord) -> async { drawWords[entity.wordId]?.let { drawWords[entity.wordId] = it.copy(isInAnimation = true) } animate( Offset.VectorConverter, initialValue = drawWord.originalTopLeft, targetValue = parentLayoutCoordinates ?.localPositionOf(layoutCoordinates, Offset.Zero) ?: Offset.Zero, ) { value, _ -> drawWords[entity.wordId]?.let { drawWords[entity.wordId] = it.copy(topLeft = value) } } onSelectedAnimationFinished(entity.copy(visibility = WordVisibility.Visible)) drawWords.remove(entity.wordId) } } animationWords.awaitAll() 選択肢の単語を選択済に移動するアニメーションを実装する
88. onWordPositionChanged = { entity, layoutCoordinates -> // ... coroutineScope.launch { val animationWords = targetWords.map { (_, drawWord) -> async { drawWords[entity.wordId]?.let { drawWords[entity.wordId] = it.copy(isInAnimation = true) } animate( Offset.VectorConverter, initialValue = drawWord.originalTopLeft, targetValue = parentLayoutCoordinates ?.localPositionOf(layoutCoordinates, Offset.Zero) ?: Offset.Zero, ) { value, _ -> drawWords[entity.wordId]?.let { drawWords[entity.wordId] = it.copy(topLeft = value) } } onSelectedAnimationFinished(entity.copy(visibility = WordVisibility.Visible)) drawWords.remove(entity.wordId) } } animationWords.awaitAll() 選択肢の単語を選択済に移動するアニメーションを実装する
89. onWordPositionChanged = { entity, layoutCoordinates -> // ... coroutineScope.launch { val animationWords = targetWords.map { (_, drawWord) -> async { drawWords[entity.wordId]?.let { drawWords[entity.wordId] = it.copy(isInAnimation = true) } animate( Offset.VectorConverter, initialValue = drawWord.originalTopLeft, targetValue = parentLayoutCoordinates ?.localPositionOf(layoutCoordinates, Offset.Zero) ?: Offset.Zero, ) { value, _ -> drawWords[entity.wordId]?.let { drawWords[entity.wordId] = it.copy(topLeft = value) } } onSelectedAnimationFinished(entity.copy(visibility = WordVisibility.Visible)) drawWords.remove(entity.wordId) } } animationWords.awaitAll() 選択肢の単語を選択済に移動するアニメーションを実装する
90. onWordPositionChanged = { entity, layoutCoordinates -> // ... coroutineScope.launch { val animationWords = targetWords.map { (_, drawWord) -> async { drawWords[entity.wordId]?.let { drawWords[entity.wordId] = it.copy(isInAnimation = true) } animate( Offset.VectorConverter, initialValue = drawWord.originalTopLeft, targetValue = parentLayoutCoordinates ?.localPositionOf(layoutCoordinates, Offset.Zero) ?: Offset.Zero, ) { value, _ -> drawWords[entity.wordId]?.let { drawWords[entity.wordId] = it.copy(topLeft = value) } } onSelectedAnimationFinished(entity.copy(visibility = WordVisibility.Visible)) drawWords.remove(entity.wordId) } } animationWords.awaitAll() 選択肢の単語を選択済に移動するアニメーションを実装する
91. onWordPositionChanged = { entity, layoutCoordinates -> // ... coroutineScope.launch { val animationWords = targetWords.map { (_, drawWord) -> async { drawWords[entity.wordId]?.let { drawWords[entity.wordId] = it.copy(isInAnimation = true) } animate( Offset.VectorConverter, initialValue = drawWord.originalTopLeft, targetValue = parentLayoutCoordinates ?.localPositionOf(layoutCoordinates, Offset.Zero) ?: Offset.Zero, ) { value, _ -> drawWords[entity.wordId]?.let { drawWords[entity.wordId] = it.copy(topLeft = value) } } onSelectedAnimationFinished(entity.copy(visibility = WordVisibility.Visible)) drawWords.remove(entity.wordId) } } animationWords.awaitAll() 選択肢の単語を選択済に移動するアニメーションを実装する
92. onWordPositionChanged = { entity, layoutCoordinates -> // ... coroutineScope.launch { val animationWords = targetWords.map { (_, drawWord) -> async { drawWords[entity.wordId]?.let { drawWords[entity.wordId] = it.copy(isInAnimation = true) } animate( Offset.VectorConverter, initialValue = drawWord.originalTopLeft, targetValue = parentLayoutCoordinates ?.localPositionOf(layoutCoordinates, Offset.Zero) ?: Offset.Zero, ) { value, _ -> drawWords[entity.wordId]?.let { drawWords[entity.wordId] = it.copy(topLeft = value) } } onSelectedAnimationFinished(entity.copy(visibility = WordVisibility.Visible)) drawWords.remove(entity.wordId) } } animationWords.awaitAll() 選択肢の単語を選択済に移動するアニメーションを実装する
93. 単語選択時に アニメーションする
94. 選択された単語を選択肢の単語一覧に アニメーションする
95. @Composable private fun Words( // ... onWordPositionChanged: (WordEntity, LayoutCoordinates) -> Unit = { _, _ -> }, onWordPositionsChanged: (Map<String, LayoutCoordinates>) -> Unit = {}, ) { val wordPositions = remember { mutableMapOf<String, LayoutCoordinates>() } FlowRow(...) { words.forEach { entity -> Word( word = entity, showWord = showWords, onGloballyPositioned = { wordPositions[entity.wordId] = it onWordPositionChanged(entity, it) onWordPositionsChanged(wordPositions) }, // ... 選択肢の単語の位置を取得できるようにする
96. @Composable private fun Words( // ... onWordPositionChanged: (WordEntity, LayoutCoordinates) -> Unit = { _, _ -> }, onWordPositionsChanged: (Map<String, LayoutCoordinates>) -> Unit = {}, ) { val wordPositions = remember { mutableMapOf<String, LayoutCoordinates>() } FlowRow(...) { words.forEach { entity -> Word( word = entity, showWord = showWords, onGloballyPositioned = { wordPositions[entity.wordId] = it onWordPositionChanged(entity, it) onWordPositionsChanged(wordPositions) }, // ... 選択肢の単語の位置を取得できるようにする
97. val choicesWordPositions = remember { mutableStateMapOf<String, LayoutCoordinates>() } Words( // ... onWordPositionsChanged = { choicesWordPositions.clear() choicesWordPositions.putAll(it) } ) 選択肢の単語の位置を取得できるようにする
98. Words( words = selectedWords, onClickWord = { entity, layoutCoordinates -> if (drawWords.containsKey(entity.wordId)) return@Words val drawWordOffset = parentLayoutCoordinates ?.localPositionOf(layoutCoordinates, Offset.Zero) ?: return@Words val drawWord = DrawWord( word = entity, topLeft = drawWordOffset, originalTopLeft = drawWordOffset, size = layoutCoordinates.size.toSize(), textLayoutResult = if (entity.word.isEmpty()) { null } else { // 単語が押されたとき、押された単語のテキストを測定し、その情報を保持する textMeasurer.measure(AnnotatedString(entity.word), drawWordTextStyle) } ) onClickSelectedWord(entity.copy(visibility = WordVisibility.InvisibleTransparent)) drawWords[entity.wordId] = drawWord // ... } ) 選択肢の単語の位置を取得できるようにする
99. Words( words = selectedWords, onClickWord = { entity, layoutCoordinates -> if (drawWords.containsKey(entity.wordId)) return@Words val drawWordOffset = parentLayoutCoordinates ?.localPositionOf(layoutCoordinates, Offset.Zero) ?: return@Words val drawWord = DrawWord( word = entity, topLeft = drawWordOffset, originalTopLeft = drawWordOffset, size = layoutCoordinates.size.toSize(), textLayoutResult = if (entity.word.isEmpty()) { null } else { // 単語が押されたとき、押された単語のテキストを測定し、その情報を保持する textMeasurer.measure(AnnotatedString(entity.word), drawWordTextStyle) } ) onClickSelectedWord(entity.copy(visibility = WordVisibility.InvisibleTransparent)) drawWords[entity.wordId] = drawWord // ... } ) 選択肢の単語の位置を取得できるようにする
100. Words( words = selectedWords, onClickWord = { entity, layoutCoordinates -> if (drawWords.containsKey(entity.wordId)) return@Words val drawWordOffset = parentLayoutCoordinates ?.localPositionOf(layoutCoordinates, Offset.Zero) ?: return@Words val drawWord = DrawWord( word = entity, topLeft = drawWordOffset, originalTopLeft = drawWordOffset, size = layoutCoordinates.size.toSize(), textLayoutResult = if (entity.word.isEmpty()) { null } else { // 単語が押されたとき、押された単語のテキストを測定し、その情報を保持する textMeasurer.measure(AnnotatedString(entity.word), drawWordTextStyle) } ) onClickSelectedWord(entity.copy(visibility = WordVisibility.InvisibleTransparent)) drawWords[entity.wordId] = drawWord // ... } ) 選択肢の単語の位置を取得できるようにする
101. Words( words = selectedWords, onClickWord = { entity, layoutCoordinates -> // ... coroutineScope.launch { val targetLayoutCoordinates = choicesWordPositions[entity.wordId] ?: return@launch drawWords[entity.wordId]?.let { drawWords[entity.wordId] = it.copy(isInAnimation = true) } animate( Offset.VectorConverter, drawWord.originalTopLeft, parentLayoutCoordinates?.localPositionOf(targetLayoutCoordinates, Offset.Zero) ?: Offset.Zero, ) { value, _ -> drawWords[entity.wordId]?.let { drawWords[entity.wordId] = it.copy(topLeft = value) } } onSelectedWordAnimationFinished(entity.copy(visibility = WordVisibility.Visible)) drawWords.remove(entity.wordId) } } ) 選択肢の単語の位置を取得できるようにする
102. Words( words = selectedWords, onClickWord = { entity, layoutCoordinates -> // ... coroutineScope.launch { val targetLayoutCoordinates = choicesWordPositions[entity.wordId] ?: return@launch drawWords[entity.wordId]?.let { drawWords[entity.wordId] = it.copy(isInAnimation = true) } animate( Offset.VectorConverter, drawWord.originalTopLeft, parentLayoutCoordinates?.localPositionOf(targetLayoutCoordinates, Offset.Zero) ?: Offset.Zero, ) { value, _ -> drawWords[entity.wordId]?.let { drawWords[entity.wordId] = it.copy(topLeft = value) } } onSelectedWordAnimationFinished(entity.copy(visibility = WordVisibility.Visible)) drawWords.remove(entity.wordId) } } ) 選択肢の単語の位置を取得できるようにする
103. Words( words = selectedWords, onClickWord = { entity, layoutCoordinates -> // ... coroutineScope.launch { val targetLayoutCoordinates = choicesWordPositions[entity.wordId] ?: return@launch drawWords[entity.wordId]?.let { drawWords[entity.wordId] = it.copy(isInAnimation = true) } animate( Offset.VectorConverter, drawWord.originalTopLeft, parentLayoutCoordinates?.localPositionOf(targetLayoutCoordinates, Offset.Zero) ?: Offset.Zero, ) { value, _ -> drawWords[entity.wordId]?.let { drawWords[entity.wordId] = it.copy(topLeft = value) } } onSelectedWordAnimationFinished(entity.copy(visibility = WordVisibility.Visible)) drawWords.remove(entity.wordId) } } ) 選択肢の単語の位置を取得できるようにする
104. Words( words = selectedWords, onClickWord = { entity, layoutCoordinates -> // ... coroutineScope.launch { val targetLayoutCoordinates = choicesWordPositions[entity.wordId] ?: return@launch drawWords[entity.wordId]?.let { drawWords[entity.wordId] = it.copy(isInAnimation = true) } animate( Offset.VectorConverter, drawWord.originalTopLeft, parentLayoutCoordinates?.localPositionOf(targetLayoutCoordinates, Offset.Zero) ?: Offset.Zero, ) { value, _ -> drawWords[entity.wordId]?.let { drawWords[entity.wordId] = it.copy(topLeft = value) } } onSelectedWordAnimationFinished(entity.copy(visibility = WordVisibility.Visible)) drawWords.remove(entity.wordId) } } ) 選択肢の単語の位置を取得できるようにする
105. Words( words = selectedWords, onClickWord = { entity, layoutCoordinates -> // ... coroutineScope.launch { val targetLayoutCoordinates = choicesWordPositions[entity.wordId] ?: return@launch drawWords[entity.wordId]?.let { drawWords[entity.wordId] = it.copy(isInAnimation = true) } animate( Offset.VectorConverter, drawWord.originalTopLeft, parentLayoutCoordinates?.localPositionOf(targetLayoutCoordinates, Offset.Zero) ?: Offset.Zero, ) { value, _ -> drawWords[entity.wordId]?.let { drawWords[entity.wordId] = it.copy(topLeft = value) } } onSelectedWordAnimationFinished(entity.copy(visibility = WordVisibility.Visible)) drawWords.remove(entity.wordId) } } ) 選択肢の単語の位置を取得できるようにする
106. 選択された単語を 選択肢の単語一覧に アニメーションする
107. 実際の機能に 組み込む 以下全てに対応できた 🎉 • 単語の改行 • 6単語以上の表示 • 一単語ずつ戻す
108. 単語のドラッグ＆ド ロップ対応 今後リリース予定です 機会があればどこかで話をするか もしれません
109. We Are Hiring ! いつでもお気軽にご連絡ください
110. Composableの枠を超えて アニメーションする shibuya.apk #46 2024/01/19 (Fri.) Taichi Sato / @syarihu Giftmall, Inc. / mikan Co., Ltd. Android Engineer