2024年のナビゲーション・フォーカス対応：Composeでキーボード・ナビゲーションをサポートしよう

DroidKaigi 2024 - 2024/9/12
https://2024.droidkaigi.jp/timetable/694196/

English version：
https://speakerdeck.com/tahia910/navigation-focus-support-in-2024-support-keyboard-navigation-with-compose

動画：
https://www.youtube.com/watch?v=poJg1A2xL-o

Transcript

1. 2024೥ͷ φϏήʔγϣϯɾϑΥʔΧεରԠ ComposeͰΩʔϘʔυɾφϏήʔγϣϯΛ αϙʔτ͠Α͏ DroidKaigi 2024 Tiphaine (ςΟϑΣϯ)
2. • AndroidΤϯδχΞ @ DeNA (Pococha) • DroidKaigiελοϑ • Mobile Dev JapanӡӦ 2 Tiphaine (ςΟϑΣϯ)
3. 3 ࢿྉ & ಈըɿ2021೥ͦ͜ΞΫηγϏϦςΟͱ޲͖߹͓͏ هࣄԽ΍Δ΍Δ࠮ٗ ൓লதͰʔ͢ ࠓ೔͸͜Εͷଓฤ
4. 4 01 Introduction to Focus Common Problems 02 Focus in Compose 03
5. 01 5 Introduction to Focus
8. 8 Focus Navigation
9. 9 • ը໘Λ৮Βͣʹ εϚϗΛૢ࡞͢Δ୅ସํ๏ • 1ཁૉͣͭҠಈ͢Δ Focus Navigation Focus ཁૉ ࢀߟɿGoogle Play Store
10. Focus Focusʢয఺ʣ 10 • UIͰͷݱࡏҐஔ • ΞϓϦͱͷ།Ұͷ઀఺ • ཁૉͷݟͨ໨ʹมԽ͕ى͖Δ Focus ࢀߟɿGoogle Play Store
11. Focus 11 • Accessibility Focus ≠ Navigation Focus • Nav Focus(ུ)͸ʮΩʔϘʔυɾφϏήʔγϣϯʯ ͱ΋ݺ͹ΕΔ • ͲͪΒ΋Focus NavigationͷҰछ 😵💫 Focusͷछྨ
12. 12 Focusͷҧ͍
13. ը໘Λ৮Βͳ͍ 👋 👀 ը໘Λݟͳ͍ 13 Navigation Focus Accessibility Focus
14. ΞΫγϣϯΛىͤ͜ΔཁૉͷΈ ͢΂ͯͷཁૉ Navigation Focus Accessibility Focus 14
15. focusableଐੑ focusableଐੑͱ importantForAccessibilityଐੑ 15 ΞΫγϣϯΛىͤ͜ΔཁૉͷΈ ͢΂ͯͷཁૉ Navigation Focus Accessibility Focus
16. 16 ΩʔϘʔυɺεΠονΞΫηεɺ ेࣈΩʔʢ໼ҹΩʔʣͳͲ εΫϦʔϯϦʔμʔ ʢTalkBackͳͲʣ focusableଐੑ focusableଐੑͱ importantForAccessibilityଐੑ ΞΫγϣϯΛىͤ͜ΔཁૉͷΈ ͢΂ͯͷཁૉ Navigation Focus Accessibility Focus
17. 17 • ෺ཧΩʔϘʔυ ʢλϒϨοτɺChromebookʣ • ιϑτ΢ΣΞɾΩʔϘʔυ ʢΦϯεΫϦʔϯɾΩʔϘʔυʣ ը૾ɿSergi Kabrera Nav FocusΛ࢖͏σόΠε
18. 18 • Android TVͷϦϞίϯ • εϚʔτ΢Υονͷϕθϧ • ήʔϜίϯτϩʔϥʔ • εΠονɾΞΫηε Nav FocusΛ࢖͏σόΠε ը૾ɿErik Mclean
19. 19 Πϯδέʔλ͸ΧελϚΠζՄೳ σϑΥϧτͷΠϯδέʔλͷΈ ΩʔϘʔυɺεΠονΞΫηεɺ ेࣈΩʔʢ໼ҹΩʔʣͳͲ εΫϦʔϯϦʔμʔ ʢTalkBackͳͲʣ focusableଐੑ focusableଐੑͱ importantForAccessibilityଐੑ ΞΫγϣϯΛىͤ͜ΔཁૉͷΈ ͢΂ͯͷཁૉ Navigation Focus Accessibility Focus
20. 20 ϑΥʔΧεɾΠϯδέʔλ Navigation Focus Accessibility Focus
21. 21 ੍࣌ؒݶͷͨΊɺ ࠓ೔͸Nav Focusͷ࿩ͷΈ
22. 22 Accessibility Focusͷ࿩͸ 2021೥ͷొஃͰ 💁 ࢿྉ & ಈըɿ2021೥ͦ͜ΞΫηγϏϦςΟͱ޲͖߹͓͏
23. 23 (Nav Focusͷ) φϏήʔγϣϯͷछྨ
24. 24 • ेࣈΩʔɺ·ͨ͸໼ҹΩʔ • 2࣍ݩφϏήʔγϣϯ • ϑΥʔΧε͸্Լࠨӈʹಈ͚Δ Directional Navigation
25. 25 • TabΩʔɺεΠονɾΞΫηεͳͲ • 1࣍ݩφϏήʔγϣϯʢ໭Δ/ਐΉʣ • ϑΥʔΧε͸ϨΠΞ΢τ಺Ͱ ཁૉ͕දࣔ͞ΕΔॱংʹಈ͚Δ Tab Navigation 1 2 3
26. 26 Focus Navigation Accessibility Focus Navigation Focus Directional Navigation Tab Navigation
27. 01 27 Introduction to Focus Common Problems Focus in Compose 02 03 Introduction to Focus
28. 02 28 Common Problems
29. 1/3 29 શͯͷΞΫγϣϯ͕ Ͱ͖Δ͔ʁ
30. 30 • ΞΫγϣϯͷ͋ΔཁૉΛFocusՄೳʹ͢Δ ʢOnClickListenerΛ࢖Θͳ͍৔߹ʣ // Accessibility FocusͰ΋ // FocusՄೳʹͳΔ android:focusable="true" ΞΫγϣϯ͕Ͱ͖ΔΑ͏ʹ͢Δ
31. myView.setOnLongClickListener { // Կ͔ॲཧ͢Δ true } 31 ཁૉΛબ୒Ͱ͖ͳ͍ 🥲
32. myView.setOnLongClickListener { // Կ͔ॲཧ͢Δ true } // setOnClickListenerͷ৔߹Ҏ֎ɺ 
 // ઃఆ͢΂͖⚠ myView.isFocusable = true 32
33. 33 δΣενϟʔ͸Ͳ͏͢Δʁ 🤔
34. 34 બ୒Ͱ͖Δ͚ͲɺԿ΋ى͖ͳ͍😢 true } myView.isFocusable = true view.performClick() myView.setOnTouchListener { view, event -> // ΠϕϯτΛϋϯυϦϯά͢Δ
35. 35 • Nav Focus͸OnTouchListenerΛݺ΂ͳ͍ 😣 • Πϕϯτൃੜͷݕ஌͸ผͷ΍Γํ͕ඞཁ 👉 ୅ΘΓʹKeyEventsΛ؂ࢹ͢Δ δΣενϟʔͷ৔߹
36. myView.setOnKeyListener { view, keyCode, event -> 36 } // αϙʔτ͍ͨ͠ΠϕϯτΛఆٛ͢Δ KeyEvent.KEYCODE_ENTER, ... -> { // Կ͔ॲཧ͢Δ true } else -> false when (keyCode) { ࢀߟɿAndroid Developers }
37. myView.setOnKeyListener { view, keyCode, event -> } when (keyCode) { } 37 ΠϕϯτͷॏෳഉআΛ๨Εͳ͍ ⚠ when (keyCode) { ... } // ACTION_UP·Ͱ͸ಉ͡Πϕϯτ͕਺ճདྷͯ͠·͏ if (event.action != KeyEvent.ACTION_UP) { return@setOnKeyListener false }
38. override fun onKeyUp(keyCode: Int, event: KeyEvent?)
 : Boolean { } return when (keyCode) { KeyEvent.KEYCODE_ENTER -> performClick() else -> ... } 38 ΧελϜɾϏϡʔͷ৔߹͸ɺ onKeyUp()ΛΦʔόʔϥΠυ͢Δ🚀
39. 39 Ҡಈͱૢ࡞͕༰қʹ Ͱ͖Δ͔ʁ 2/3
40. 40 • ΞΫγϣϯͷͳ͍ཁૉΛεΩοϓ͢Δ • ΞΫγϣϯΛͨ͠৔߹ͷΈUIΛมԽͤ͞Δ // ͜ͷཁૉΛεΩοϓ͢Δ android:focusable=“false” Ϣʔβʔͷظ଴Λཪ੾Βͳ͍
41. 41 • Focus͕͍ͭͰ΋֎ͤΒΕΔ͔͔֬ΊΔ • EscΩʔͰͲ͔͜ΒͰ΋ൈ͚ग़ͤΔΑ͏ʹ͢Δ • WebViewɺεΫϩʔϧɺ·ͨ͸υϩοϓμ΢ϯ Ϧετ͸৻ॏʹݕূ͢Δ ΩʔϘʔυɾτϥοϓΛ๷͙
42. 42 ༷ʑͳϝʔΧʔͷ୺຤Ͱ ݕূΛ͠Α͏ 😇
43. 43 • ࿦ཧతͰҰ؏ͨ͠ॱংΛอͭ // Tab navigation
 android:nextFocusForward=“@id/...” // Directional navigation // ্ɺԼɺࠨ΋ผͷଐੑͰઃఆͰ͖Δ android:nextFocusRight=“@id/...” ༧૝͞ΕͨྲྀΕΛҡ࣋͢Δ
44. 44 खؒΛল͘ ࢀߟɿAndroid Developers // API 26+ android:keyboardNavigationCluster • ClusterͰཁૉΛάϧʔϓԽ͢Δ 1 2 3 4 10 11 12 ϝΠϯ ίϯςϯπ Bottom nav bar Top tabs
45. 45 • ඞཁͳ৔߹ɺը໘ͷ࢝఺ʹFocusΛ͋ͯΔ // API 26+ // ιϑτ΢ΣΞɾΩʔϘʔυ͸ݺ͹Εͳ͍ <EditText ... android:focusedByDefault="true"/> खؒΛল͘
46. 46 ࢀߟɿAlex Zlatkus ͔͜͜Β ࢝Ί͍ͨ
47. 47 Focus͕Ͳ͜ʹ͋Δ͔ ৗʹ෼͔Δ͔ʁ 3/3
48. 48 • Focus͕ৗʹݟ͑ΔΑ͏ʹ͢Δ • ඞཁͳ৔߹͸Πϯδέʔλͷ ৭΍ܗΛΧελϚΠζ͢Δ ໎ࢠΛ๷ࢭ͢Δ ࢀߟɿ2021೥ͷGoogle Play StoreΞϓϦ
49. ΧελϜΠϯδέʔλɿશΞϓϦϨϕϧ 49 <!-- themes.xml --> <style name=“AppTheme" ...> ... <item name="colorControlHighlight">...</item> </style> ΧελϜΠϯδέʔλ
50. ΧελϜΠϯδέʔλɿཁૉϨϕϧ ᶃ ΧελϜΠϯδέʔλɿཁૉϨϕϧ 50 <!-- outline.xml --> <shape ... android:shape="rectangle"> ... <stroke android:width="4dp" android:color=“@color/black” /> </shape> ΧελϜΠϯδέʔλ
51. <!-- focus_selector.xml --> <selector ...> </selector> 51 <item android:drawable=“@drawable/outline” 
 android:state_focused="true" /> <item android:drawable="@color/transparent"/> ΧελϜΠϯδέʔλɿཁૉϨϕϧ ᶄ ΧελϜΠϯδέʔλɿཁૉϨϕϧ ΧελϜΠϯδέʔλ
52. // ΫϦοΫΤϑΣΫτ͸state_pressedͱͯ͠ఆٛͰ͖Δ <Button ... android:foreground=“@drawable/focus_selector"/> 52 ΧελϜΠϯδέʔλɿཁૉϨϕϧ ᶅ ΧελϜΠϯδέʔλɿཁૉϨϕϧ ΧελϜΠϯδέʔλ
53. 53 ιϑτ΢ΣΞɾΩʔϘʔυͷ࿩͸ ·ͨࠓ౓… 🥲
54. 01 54 Introduction to Focus Common Problems Focus in Compose 02 03 Introduction to Focus Common Problems
55. 03 55 Focus in Compose
56. 56 Compose specificities
57. 57 • FocusͷྲྀΕ͸Composable ͷએݴॱংʹͳΔ • ಉ͡Ϩϕϧʹ͋Δཁૉ͕ ༏ઌ͞ΕΔ Tab NavigationͷྲྀΕ // Ϩϕϧ ᶃ // Ϩϕϧ ᶄ // Ϩϕϧ ᶄ Column { Row { Row { } } } ... ...
58. 58 CustomButton("1") CustomButton("2") CustomButton("3") CustomButton("4") Column { } Row { Row { } }
59. 59 Row { Column { } Column { } } CustomButton("1") CustomButton("2") CustomButton("3") CustomButton("4")
60. 60 Modifierͷॱং͕େࣄ 🧐
61. 61 ΞΫγϣϯͷϋϯυϦϯά (in Compose)
62. Modifier.focusable() 62 • Πϯδέʔλͷ࡞੒ͱͦͷදࣔϩδοΫ͸ ࣗ෼Ͱॻ͔͘͠ͳ͍ 😭 ཁૉΛFocusՄೳʹ͢Δ
63. 63 Modifier var color by remember { .focusable() mutableStateOf(transparent) } // FocusՄೳʹ͍ͨ͠ComposableͷModifier focusableͷModifier͸Ұ൪࠷ޙʹઃఆ͢΂͖ ⚠
64. 64 Modifier .border(5.dp, indicatorColor) .onFocusChanged { focusState -> } color = if (focusState.isFocused) { black } else { transparent } var color by remember { ...} .focusable() 🎉
65. 65 Modifier.clickable { // Կ͔ॲཧ͢Δ } • ͜ͷModifierͳΒɺComposable͸ࣗಈͰ FocusՄೳʹͳΔ ✅ ΫϦοΫɾΞΫγϣϯΛॲཧ͢Δ
66. 66 👀 ͦͷଞͷΞΫγϣϯ͸ʁ
67. 67 ͦͷଞͷΞΫγϣϯΛॲཧ͢Δ 👉 ୅ΘΓʹKeyEventsΛ؂ࢹ͢Δ ʢ·ͨʣ • ௕ԡؚ͠Ίͯɺશ෦τϦΨʔͰ͖ͳ͍ 😢
68. 68 KeyEventsΛ؂ࢹ͢Δ Modifier.onPreviewKeyEvent {} Modifier.onKeyEvent {} // ਌ͷίʔϧόοΫ͕ઌʹݺ͹ΕΔ // ͍ͭ΋௨ΓʹࢠͷίʔϧόοΫ͔Β࢝·Δ
69. 69 Modifier.onKeyEvent { keyEvent -> } when (keyEvent.key) { Modifier.onKeyEvent Key.Enter -> { // Կ͔ॲཧΛ͢Δ true } else -> false }
70. 70 // ॏෳഉআ if (keyEvent.type != KeyEventType.KeyUp) { return@onPreviewKeyEvent false } when (keyEvent.key) { } when (keyEvent.key) { ... } Modifier.onKeyEvent { keyEvent -> } Modifier.onKeyEvent
71. 71 ૢ࡞ͱҠಈ (in Compose)
72. • TouchModeͰ͸λοϓՄೳͷ·· 👋 72 Modifier.focusProperties { ཁૉΛεΩοϓ͢Δ canFocus = false }
73. 73 ॱংΛม͑Δ - Tab Navigation Modifier.focusProperties { } next = } previous = ... ... • FocusPropertiesͱFocusRequesterΛ࢖͏ ॱংΛม͑Δ
74. 74 val (first, second) = remember { FocusRequester.createRefs() }
75. Modifier 75 val (first, second) = remember { FocusRequester.createRefs() } first // ̍൪໨ͷComposable // ̎൪໨ͷComposableʢߦ͖ઌʣ Modifier.focusRequester( ) ) second .focusRequester(
76. 76 val (first, second) = remember { FocusRequester.createRefs() } Modifier .focusProperties { } second next = first) .focusRequester(
77. 77 // ͪ͜Β͸࢖ΘΕͳ͍ Ұ൪্ͷModifier͕উͭ ⚠ Modifier .focusProperties { } .focusProperties { previous = second } next = second
78. 78 Modifier.focusProperties { left = ... right = ... up = ... down = ... } ॱংΛม͑Δ - Directional Nav ॱংΛม͑Δ
79. 79 val focusManager = LocalFocusManager.current FocusΛҠಈͤ͞Δ focusManager.moveFocus( ) FocusDirection.Down // Ұ൪ۙ͘ʹ͋ΔFocusՄೳͳཁૉ΁ߦ͘ // ߦ͖͍ͨํ޲
80. 80 • FocusՄೳͰ͋Ε͹ɺͲ͜΁Ͱ΋ߦ͚Δ val requester = remember { FocusRequester() } requester.requestFocus() FocusΛ౰ͯΔ
81. Button( onClick = { ) { ... } TextField(... // ΫϦοΫͨ͠ΒɺTextFieldʹҠಈ͢Δ 81 ) }
82. 82 Button( onClick = { ) { ... } TextField(... } ) val requester = remember { FocusRequester() } Modifier.focusRequester(requester) // ΫϦοΫͨ͠ΒɺTextFieldʹҠಈ͢Δ
83. 83 Button( onClick = { ) { ... } TextField(... } ) val requester = remember { FocusRequester() } Modifier.focusRequester(requester) requester.requestFocus() // ΫϦοΫͨ͠ΒɺTextFieldʹҠಈ͢Δ
84. 84 ࢼͯ͠ΈΑ͏ʂ
85. 85 ᶃ εϚϗʹ઀ଓ͢Δ ᶄ ೚ҙͷΩʔΛԡ͢ ᶅ Πϯδέʔλ͕දࣔ͞ΕΔ ʢଞͷ֎෦πʔϧ΋ಉ༷ 🎮ʣ ֎෦ΩʔϘʔυͷ৔߹
86. 86 1⃣ ΤϛϡϨʔλʔΛ࢖͏ OR 2⃣ σόΠεɾϛϥʔϦϯάΛ࢖͏ ύιίϯͷΩʔϘʔυͷ৔߹
87. 87 • ϓϦηοτɾϓϩϑΟʔϧͳΒɺ σϑΥϧτͰઃఆࡁΈ ✅ • ΧελϜɾϓϩϑΟʔϧͷ৔߹͸ɺ σόΠε࡞੒࣌ʹઃఆ͢Δඞཁ͕͋Δ 1⃣ ΤϛϡϨʔλʔΛ࢖͏
91. 91 ύιίϯͷΩʔϘʔυܦ༝Ͱૢ࡞Մೳʹ🥳
92. 92 • AndroidStudioܦ༝Ͱ࣮ػΛ࢖͏ • Preferences → Tools → Device mirroring 2⃣ σόΠεɾϛϥʔϦϯάΛ࢖͏
94. 94 ίʔυΛॻ͖ͳ͕Β࣮ػͰಈ࡞֬ೝ͢Δ 🎉
95. 95 • Focus in Compose ɹ- Android DevelopersެࣜυΩϡϝϯτ • Android App Development: Accessibility ɹ(LinkedIn Learning) - Renato Iwashima ࢀߟ
96. Thanks! ςʔϚɿSlidesCarnival ɹ tahia910 Special thanks: • Shogo Takasaki • Hidenari Tajima