Edge-to-Edge / WindowInsets との上手な付き合い方

https://youtu.be/j5ckxa6_2gc

Transcript

1. Edge-to-Edge / WindowInsetsとの 上手な付き合い方 @wcaokaze
2. 自己紹介 • wcaokaze（わかおかぜ） • Palcy Android 2
3. Edge-to-Edgeとは？ 3
4. Edge-to-Edgeとは？ 画面の端から端までアプリの領域に なる 4 出典: 太宰治「走れメロス」
5. SDK35以降、強制される 5
6. SDK35以降Edge-to-Edge強制 35以降でも無効化する方法があるらしいが…？ 6
7. SDK35以降Edge-to-Edge強制 35以降でも無効化する方法があるらしいが…？ 今回は無効化しない場合の話 7
8. SDK35以降Edge-to-Edge強制 より厳密には？ 8
9. SDK35以降Edge-to-Edge強制 より厳密には？ 下記条件を満たすとEdge-to-Edgeが有効化される • targetSdk 35以降でビルドしたアプリ • Android 15以降で実行 9
10. SDK35以降Edge-to-Edge強制 ただし、これはEdge-to-Edgeが「強制される」条件。 この条件を満たさなくてもEdge-to-Edgeにすることは可能 10
11. SDK35以降Edge-to-Edge強制 ただし、これはEdge-to-Edgeが「強制される」条件。 この条件を満たさなくてもEdge-to-Edgeにすることは可能 どのみち対応するのであればAndroid 14以前でもEdge-to-Edgeにしたい 11
12. Android 14以前のEdge-to-Edge • APIレベル 26(Android 8.0)以降 ◦ フル対応可能 • APIレベル 25(Android 7.1)以前 ◦ ナビゲーションバーのアイコン色が白固定 • APIレベル 22(Android 5.1)以前 ◦ ステータスバーのアイコン色が白固定 • APIレベル 20(Android 4.4)以前 ◦ 割愛 12
13. Android 14以前のEdge-to-Edge • APIレベル 26(Android 8.0)以降 ◦ フル対応可能 • APIレベル 25(Android 7.1)以前 ◦ ナビゲーションバーのアイコン色が白固定 • APIレベル 22(Android 5.1)以前 ◦ ステータスバーのアイコン色が白固定 • APIレベル 20(Android 4.4)以前 ◦ 割愛 13 出典: 太宰治「走れメロス」
14. Android 14以前のEdge-to-Edge • APIレベル 26(Android 8.0)以降 ◦ フル対応可能 • APIレベル 25(Android 7.1)以前 ◦ ナビゲーションバーのアイコン色が白固定 • APIレベル 22(Android 5.1)以前 ◦ ステータスバーのアイコン色が白固定 • APIレベル 20(Android 4.4)以前 ◦ 割愛 14 出典: 太宰治「走れメロス」
15. Android 14以前のEdge-to-Edge • APIレベル 26(Android 8.0)以降 ◦ フル対応可能 • APIレベル 25(Android 7.1)以前 ◦ ナビゲーションバーのアイコン色が白固定 • APIレベル 22(Android 5.1)以前 ◦ ステータスバーのアイコン色が白固定 • APIレベル 20(Android 4.4)以前 ◦ 割愛 15 出典: 太宰治「走れメロス」
16. Android 14以前のEdge-to-Edge • APIレベル 26(Android 8.0)以降 ◦ フル対応可能 • APIレベル 25(Android 7.1)以前 ◦ ナビゲーションバーのアイコン色が白固定 • APIレベル 22(Android 5.1)以前 ◦ ステータスバーのアイコン色が白固定 • APIレベル 20(Android 4.4)以前 ◦ 割愛 16 出典: 太宰治「走れメロス」
17. Android 14以前のEdge-to-Edge • APIレベル 26(Android 8.0)以降 ◦ フル対応可能 • APIレベル 25(Android 7.1)以前 ◦ ナビゲーションバーのアイコン色が白固定 • APIレベル 22(Android 5.1)以前 ◦ ステータスバーのアイコン色が白固定 • APIレベル 20(Android 4.4)以前 ◦ 割愛 17 出典: 太宰治「走れメロス」
18. Android 14以前のEdge-to-Edge • APIレベル 26(Android 8.0)以降 ◦ フル対応可能 • APIレベル 25(Android 7.1)以前 ◦ ナビゲーションバーのアイコン色が白固定 • APIレベル 22(Android 5.1)以前 ◦ ステータスバーのアイコン色が白固定 • APIレベル 20(Android 4.4)以前 ◦ 割愛 18
19. Android 14以前のEdge-to-Edge • APIレベル 26(Android 8.0)以降 ◦ フル対応可能 • APIレベル 25(Android 7.1)以前 ◦ ナビゲーションバーのアイコン色が白固定 • APIレベル 22(Android 5.1)以前 ◦ ステータスバーのアイコン色が白固定 • APIレベル 20(Android 4.4)以前 ◦ 割愛 19 ⎫ ⎬ ⎭ 工夫が必要
20. Android 14以前のEdge-to-Edge • APIレベル 26(Android 8.0)以降 ◦ フル対応可能 • APIレベル 25(Android 7.1)以前 ◦ ナビゲーションバーのアイコン色が白固定 • APIレベル 22(Android 5.1)以前 ◦ ステータスバーのアイコン色が白固定 • APIレベル 20(Android 4.4)以前 ◦ 割愛 20 出典: 太宰治「走れメロス」
21. Android 14以前のEdge-to-Edge • APIレベル 26(Android 8.0)以降 ◦ フル対応可能 • APIレベル 25(Android 7.1)以前 ◦ ナビゲーションバーのアイコン色が白固定 • APIレベル 22(Android 5.1)以前 ◦ ステータスバーのアイコン色が白固定 • APIレベル 20(Android 4.4)以前 ◦ 割愛 21 出典: 太宰治「走れメロス」
22. Android 14以前のEdge-to-Edge • APIレベル 26(Android 8.0)以降 ◦ フル対応可能 • APIレベル 25(Android 7.1)以前 ◦ ナビゲーションバーのアイコン色が白固定 • APIレベル 22(Android 5.1)以前 ◦ ステータスバーのアイコン色が白固定 • APIレベル 20(Android 4.4)以前 ◦ 割愛 22 出典: 太宰治「走れメロス」
23. Android 14以前のEdge-to-Edge APIレベル25(Android 7.1)以前をサポート しない場合 23 出典: 太宰治「走れメロス」
24. Android 14以前のEdge-to-Edge APIレベル25(Android 7.1)以前をサポート しない場合 24 出典: 太宰治「走れメロス」 val windowInsetsController = WindowCompat.getInsetsController(window, window.decorView) windowInsetsController.isAppearanceLightStatusBars = true windowInsetsController.isAppearanceLightNavigationBars = true
25. Edge-to-Edge対応とは？ 25
26. Edge-to-Edge対応とは？ Edge-to-Edgeを有効化してみる 26 出典: 太宰治「走れメロス」
27. Edge-to-Edge対応とは？ Edge-to-Edgeを有効化してみる 27 出典: 太宰治「走れメロス」
28. Edge-to-Edge対応とは？ 画面端のUIがシステムバー等とカブらないように レイアウトする 28 出典: 太宰治「走れメロス」
29. WindowInsets 29
30. WindowInsets 画面端にあるものの大きさを知ることができる 30 WindowInsets( left = 0dp, top = 56dp, right = 0dp, bottom = 48dp )
31. WindowInsets WindowInsets.statusBars 31
32. WindowInsets WindowInsets.navigationBars 32
33. WindowInsets WindowInsets.displayCutout 33
34. WindowInsets WindowInsets.ime 34
35. WindowInsets WindowInsets.safeDrawing 35
36. WindowInsets WindowInsets.safeGestures 36
37. どれを使えばいい？ ほぼsafeDrawing一択 37
38. どれを使えばいい？ ほぼsafeDrawing一択 38 出典: 太宰治「走れメロス」 Text( text = "メロスは激怒した。" + "必ず、かの邪智暴虐の王を除かなければならぬと決意した。", modifier = Modifier .align(Alignment.BottomCenter) .windowInsetsPadding(WindowInsets.navigationBars) ) ❌
39. どれを使えばいい？ ほぼsafeDrawing一択 39 出典: 太宰治「走れメロス」 Text( text = "メロスは激怒した。" + "必ず、かの邪智暴虐の王を除かなければならぬと決意した。", modifier = Modifier .align(Alignment.BottomCenter) .windowInsetsPadding(WindowInsets.navigationBars) ) ❌
40. どれを使えばいい？ ほぼsafeDrawing一択 40 出典: 太宰治「走れメロス」 Text( text = "メロスは激怒した。" + "必ず、かの邪智暴虐の王を除かなければならぬと決意した。", modifier = Modifier .align(Alignment.BottomCenter) .windowInsetsPadding(WindowInsets.navigationBars) ) ❌
41. どれを使えばいい？ ほぼsafeDrawing一択 41 出典: 太宰治「走れメロス」 Text( text = "メロスは激怒した。" + "必ず、かの邪智暴虐の王を除かなければならぬと決意した。", modifier = Modifier .align(Alignment.BottomCenter) .windowInsetsPadding( WindowInsets.safeDrawing.only(WindowInsetsSides.Bottom) ) ) ⭕
42. 実践 42
43. 実践 画面端のUIがシステムバー等とカブらないように レイアウトする 43 出典: 太宰治「走れメロス」
44. 実践 画面上部(AppBar) 44 出典: 太宰治「走れメロス」 TopAppBar( title = { … }, navigationIcon = { … }, actions = { … }, )
45. 実践 画面上部(AppBar) windowInsetsを渡す 45 出典: 太宰治「走れメロス」 TopAppBar( title = { … }, navigationIcon = { … }, actions = { … }, windowInsets = WindowInsets.safeDrawing )
46. 実践 画面上部(AppBar) windowInsetsを渡す 46 出典: 太宰治「走れメロス」 TopAppBar( title = { … }, navigationIcon = { … }, actions = { … }, windowInsets = WindowInsets.safeDrawing.only(WindowInsetsSides.Top) )
47. 実践 画面内のすべてのComposableに同様の対応を 行う 47 出典: 太宰治「走れメロス」
48. No 48
49. WindowInsetsと重なってもいい Composableもある 49
50. 実践 画面下部(LazyColumn) 50 出典: 太宰治「走れメロス」 LazyColumn { items(...) { … } }
51. 実践 画面下部(LazyColumn) 51 出典: 太宰治「走れメロス」 LazyColumn( modifier = Modifier .windowInsetsPadding( WindowInsets.safeDrawing.only(WindowInsetsSides.Bottom) ) ) { items(...) { … } } ❌
52. 実践 LazyColumnはスクロールが可能なため、 WindowInsetsと重ねることができる 52 出典: 太宰治「走れメロス」 LazyColumn { items(...) { … } }
53. 実践 LazyColumnはスクロールが可能なため、 WindowInsetsと重ねることができる 53 出典: 太宰治「走れメロス」 LazyColumn { items(...) { … } }
54. 実践 一番下までスクロールしたときには WindowInsetsと重なってはいけない 54 出典: 太宰治「走れメロス」 LazyColumn { items(...) { … } }
55. 実践 一番下までスクロールしたときには WindowInsetsと重なってはいけない 55 出典: 太宰治「走れメロス」 LazyColumn( contentPadding = WindowInsets.safeDrawing .only(WindowInsetsSides.Bottom) .asPaddingValues() ) { items(...) { … } }
56. 実践 左右端 56 出典: 太宰治「走れメロス」
57. 実践 AppBarは左右端も避けなければならない 57 出典: 太宰治「走れメロス」 TopAppBar( title = { … }, navigationIcon = { … }, actions = { … }, windowInsets = WindowInsets.safeDrawing .only(WindowInsetsSides.Top) )
58. 実践 AppBarは左右端も避けなければならない 58 出典: 太宰治「走れメロス」 TopAppBar( title = { … }, navigationIcon = { … }, actions = { … }, windowInsets = WindowInsets.safeDrawing .only(WindowInsetsSides.Top + WindowInsetsSides.Horizontal) )
59. 実践 LazyColumn部分も同様に 左右のWindowInsetsを避ける 59 出典: 太宰治「走れメロス」
60. No 60
61. WindowInsetsと重なってもいい Composableもある 61
62. 実践 区切り線 62 出典: 太宰治「走れメロス」 HorizontalDivider( modifier = Modifier .windowInsetsPadding( WindowInsets.safeDrawing.only(WindowInsetsSides.Horizontal) ) )
63. 実践 背景色 63 出典: 太宰治「走れメロス」 Row( modifier = Modifier .windowInsetsPadding( WindowInsets.safeDrawing.only(WindowInsetsSides.Horizontal) ) .background(if (background) { backgroundColor } else { Color.Transparent }) .windowInsetsPadding( WindowInsets.safeDrawing.only(WindowInsetsSides.Horizontal) ) ) { … }
64. 完成！ 64 出典: 太宰治「走れメロス」
65. まとめ 65
66. まとめ • (Jetpack Composeが動作する)すべての機種でEdge-to-Edgeを利用できる ◦ Android 7.1以前は工夫が必要 • Edge-to-Edgeに対応するためにはComposableがWindowInsetsと 重ならないようにレイアウトしなければならない • WindowInsetsと重なってはいけないComposable ◦ ユーザーが見ているコンテンツ(画像、文字など) ◦ ユーザーが操作するもの(ボタンなど) • WindowInsetsと重なってもいいComposable ◦ スクロール可能なもの ◦ 部分的に隠れても機能が失われないもの(区切り線、背景色など) 66
67. Q. 大変じゃないですか？ A. そうですね・・・ 67
68. Q. 大変じゃないですか？ A. そうですね・・・ Android Studioのプレビュー機能を活用して かなり軽減できるので見てみてください https://inside.pixiv.blog/2025/03/26/163000 68
69. ありがとうございました 69