AndroidアプリのUIバリエーションをあの手この手で確認する / Check UI variations of Android apps by various means

DroidKaigi 2024
「AndroidアプリのUIバリエーションをあの手この手で確認する 」の発表スライドです。

スライドに出てくるドキュメントのリンク
App resources overview: https://developer.android.com/guide/topics/resources/providing-resources.html
Support different pixel densities: https://developer.android.com/training/multiscreen/screendensities
Distribution Dashboard: https://developer.android.com/about/dashboards/index.html
Window size classes: https://developer.android.com/develop/ui/compose/layouts/adaptive/window-size-classes
ユーザー補助検証ツール: https://support.google.com/accessibility/android/faq/6376582
Localize your app: https://developer.android.com/guide/topics/resources/localization#emulator
Io.appium.settings: https://github.com/appium/io.appium.settings
Libraries and tools to test different screen sizes: https://developer.android.com/training/testing/different-screens/tools

Transcript

1. Androidアプリの UIバリエーションを あの手この手で確認する Nozomi Takuma DroidKaigi 2024
2. 自己紹介 • Nozomi Takuma • DeNA SWETグループ • Androidとテストが好き
3. 今日話すことのゴール
4. 今日話すことのゴール • Androidアプリが対応すべきデバイスの環境が増えている 中で、UIの動作確認を楽にする機能・ツールを紹介する • 日々の動作確認が楽になったり、網羅的にできるようにな ることを目指す
5. 目次 • 環境のバリエーションを整理する • Compose Previewで確認する • デバイスで確認する • 自動テストで確認する
6. 環境のバリエーションを整理する
7. 環境のバリエーション • 画面サイズ・画面密度 • 端末の種類 • 画面の状態 • フォントスケール・表示サイズ • テーマ • 言語・地域
8. 環境のバリエーション • 画面サイズ・画面密度 • 端末の種類 • 画面の状態 • フォントスケール・表示サイズ • テーマ • 言語・地域 それぞれのバリエーションを確認
9. 画面サイズ・画面密度 • 画面サイズ ◦ small・normal・large・xlarge • 画面密度 ◦ ldpi・mdpi・hdpi・xhdpi・xxhdpi・xxxhdpi • ウィンドウサイズクラス ◦ 幅と高さそれぞれにcompact・medium・expanded
10. 画面サイズ Small 最小レイアウトサイズ: 約320 x 426 dp Normal 最小レイアウトサイズ: 約320 x 470 dp Large 最小レイアウトサイズ: 約480 x 640 dp XLarge 最小レイアウトサイズ: 約720 x 960 dp https://developer.android.com/guide/topics/resources/p roviding-resources.html
11. 画面密度 ldpi(低密度) 〜120dpi ｍdpi(中密度) 〜160dpi hdpi(高密度) 〜240dpi xhdpi(超高密度) 〜320dpi xxhdpi(超超高密度) 〜480dpi xxxhdpi(超超超高密度) 〜680dpi https://developer.android.com/training/multiscreen/scr eendensities
12. 画面サイズと画面密度のマトリクス ldpi mdpi tvdpi hdpi xhdpi xxhdpi Total Small 0.50% 0.10% 0.60% Normal 0.10% 0.30% 4.30% 44.60% 23.80% 73.10% Large 1.00% 4.00% 1.00% 9.10% 1.20% 16.30% Xlarge 5.60% 0.10% 4.00% 0.30% 10.00% Total 0.00% 6.70% 4.40% 9.30% 54.50% 25.10% https://developer.android.com/about/dashboards/index.html Distribution dashboard > Screen sizes and densities
13. https://developer.android.com/about/dashboards/index.html Distribution dashboard > Screen sizes and densities 画面サイズと画面密度のマトリクス ldpi mdpi tvdpi hdpi xhdpi xxhdpi Total Small 0.50% 0.10% 0.60% Normal 0.10% 0.30% 4.30% 44.60% 23.80% 73.10% Large 1.00% 4.00% 1.00% 9.10% 1.20% 16.30% Xlarge 5.60% 0.10% 4.00% 0.30% 10.00% Total 0.00% 6.70% 4.40% 9.30% 54.50% 25.10% 組み合わせを選択する際に参考になる 表には含まれていないxxxhdpi(Pixel 7 Pro等)も忘れずに
14. ウィンドウサイズクラス • ブレイクポイント(レイアウトを決定する分岐条件)のセット • 端末の画面サイズではなく、アプリが利用可能な表示領域から算出さ れる • 同じ端末であってもアプリのライフサイクルの中で表示領域は変更さ れる可能性があるため、ウィンドウサイズクラスを利用してレスポン シブなレイアウトを設計する
15. ウィンドウサイズクラス Width Compact 600dp未満 縦向きのスマートフォンの 99.96% Medium 600dp以上 840dp未満 縦向きのタブレットの 93.73% 開いた状態の最も大きなインナー ディスプレイ（縦向き） Expand 840dp以上 横向きのタブレットの 97.22% 横向きの最も大きな展開インナー ディスプレイ Height Compact 480dp未満 横向きのスマートフォンの 99.78% Medium 480dp以上 900dp未満 横向きのタブレットの 96.56% 縦向きのスマートフォンの 97.59% Expand 900dp以上 縦向きのタブレットの 94.25% https://developer.android.com/develop/ui/compose/layouts/adaptive/window-size-classes
16. 端末の種類 • Phone • Foldable(折りたたみ式)デバイス • Tablet • Chromebook
17. 画面の状態 • 画面の向き(Orientation) • マルチウィンドウモード ◦ 分割画面 ◦ ピクチャーインピクチャー ◦ フリーフォーム • Foldableデバイスの折りたたみ状態
18. マルチウィンドウモード 分割画面 フリー フォーム ウィンドウ PIP
19. Foldableデバイスの折りたたみ状態 • 折りたたみ • 展開 • 半開き ◦ テーブルトップモード ◦ ブックモード
20. フォントスケール・表示サイズ • フォントスケール ◦ Android14の場合: 85%・100%・115%・130%・150%・180%・200% • 表示サイズ ◦ 最小幅が変更される ◦ Pixel8(Android14)の場合: 485dp・411dp(デフォルト) ・375dp・345dp・320dp
21. テーマ • ダークモード • ダイナミックカラー
22. テーマ ダークモード ダイナミック カラー
23. 環境のバリエーション • 画面サイズ・画面密度 • 端末の種類 • 画面の状態 • フォントスケール・表示サイズ • テーマ • 言語・地域
24. Compose Previewで確認する
25. Compose Previewで確認する • 画面サイズ・画面密度 • 画面の向き • フォントスケール • 言語・地域 • ダークテーマ • UI Check Mode
26. Compose Preview @Preview @Composable fun GreetingPreview() { MyApplicationTheme { Greeting("Android") } }
27. Compose Preview @Repeatable annotation class Preview( val name: String = "", val group: String = "", @IntRange(from = 1) val apiLevel: Int = -1, // TODO(mount): Make this Dp when they are inline classes val widthDp: Int = -1, // TODO(mount): Make this Dp when they are inline classes val heightDp: Int = -1, val locale: String = "", @FloatRange(from = 0.01) val fontScale: Float = 1f, val showSystemUi: Boolean = false, val showBackground: Boolean = false, val backgroundColor: Long = 0, @UiMode val uiMode: Int = 0, @Device val device: String = Devices.DEFAULT, @Wallpaper val wallpaper: Int = Wallpapers.NONE, ) https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/ui/ui-tooling-preview/sr c/androidMain/kotlin/androidx/compose/ui/tooling/preview/Preview.android.kt
28. 画面サイズ・画面密度 @Repeatable annotation class Preview( val name: String = "", val group: String = "", @IntRange(from = 1) val apiLevel: Int = -1, val widthDp: Int = -1, val heightDp: Int = -1, val locale: String = "", @FloatRange(from = 0.01) val fontScale: Float = 1f, val showSystemUi: Boolean = false, val showBackground: Boolean = false, val backgroundColor: Long = 0, @UiMode val uiMode: Int = 0, @Device val device: String = Devices.DEFAULT, @Wallpaper val wallpaper: Int = Wallpapers.NONE, )
29. プリセットのデバイスを利用する object Devices { const val DEFAULT = "" const val NEXUS_7 = "id:Nexus 7" const val NEXUS_7_2013 = "id:Nexus 7 2013" .. const val PIXEL_7 = "id:pixel_7" const val PIXEL_7_PRO = "id:pixel_7_pro" const val PIXEL_7A = "id:pixel_7a" const val PIXEL_FOLD = "id:pixel_fold" const val PIXEL_TABLET = "id:pixel_tablet" .. } https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/ui/ui-tooling-preview/sr c/androidMain/kotlin/androidx/compose/ui/tooling/preview/Device.android.kt
30. プリセットのデバイスを利用する @Preview(device = "id:pixel_4") @Preview(device = "id:pixel_7_pro") @Composable
31. リファレンスデバイスを利用する object Devices { .. // Reference devices const val PHONE = "spec:id=reference_phone,shape=Normal,width=411,height=891,unit=dp,dpi=420" 　　 const val FOLDABLE = "spec:id=reference_foldable,shape=Normal,width=673,height=841,unit=dp,dpi=420" const val TABLET = "spec:id=reference_tablet,shape=Normal,width=1280,height=800,unit=dp,dpi=240" const val DESKTOP = "spec:id=reference_desktop,shape=Normal,width=1920,height=1080,unit=dp,dpi=160" .. }
32. リファレンスデバイスを利用する object Devices { .. // Reference devices const val PHONE = "spec:id=reference_phone,shape=Normal,width=411,height=891,unit=dp,dpi=420" 　　 const val FOLDABLE = "spec:id=reference_foldable,shape=Normal,width=673,height=841,unit=dp,dpi=420" const val TABLET = "spec:id=reference_tablet,shape=Normal,width=1280,height=800,unit=dp,dpi=240" const val DESKTOP = "spec:id=reference_desktop,shape=Normal,width=1920,height=1080,unit=dp,dpi=160" .. } 様々なデバイスに対応したアプリを開発するのを サポートするために定義されたデバイスのセット
33. リファレンスデバイスを利用する @Retention(AnnotationRetention.BINARY) @Target( AnnotationTarget.ANNOTATION_CLASS, AnnotationTarget.FUNCTION ) @Preview(name = "Phone", device = PHONE, showSystemUi = true) @Preview(name = "Phone - Landscape", device = "spec:width = 411dp, height = 891dp, orientation = landscape, dpi = 420", showSystemUi = true) @Preview(name = "Unfolded Foldable", device = FOLDABLE, showSystemUi = true) @Preview(name = "Tablet", device = TABLET, showSystemUi = true) @Preview(name = "Desktop", device = DESKTOP, showSystemUi = true) annotation class PreviewScreenSizes https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/ui/ui-tooling-preview/sr c/androidMain/kotlin/androidx/compose/ui/tooling/preview/MultiPreviews.android.kt
34. リファレンスデバイスを利用する @Retention(AnnotationRetention.BINARY) @Target( AnnotationTarget.ANNOTATION_CLASS, AnnotationTarget.FUNCTION ) @Preview(name = "Phone", device = PHONE, showSystemUi = true) @Preview(name = "Phone - Landscape", device = "spec:width = 411dp, height = 891dp, orientation = landscape, dpi = 420", showSystemUi = true) @Preview(name = "Unfolded Foldable", device = FOLDABLE, showSystemUi = true) @Preview(name = "Tablet", device = TABLET, showSystemUi = true) @Preview(name = "Desktop", device = DESKTOP, showSystemUi = true) annotation class PreviewScreenSizes https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/ui/ui-tooling-preview/sr c/androidMain/kotlin/androidx/compose/ui/tooling/preview/MultiPreviews.android.kt リファレンスデバイスのPreviewをまとめた マルチプレビューテンプレート
35. リファレンスデバイスを利用する @PreviewScreenSizes @Composable
36. カスタムのデバイスを作成する object Devices { .. // Reference devices const val PHONE = "spec:id=reference_phone,shape=Normal,width=411,height=891,unit=dp,dpi=420" 　　 const val FOLDABLE = "spec:id=reference_foldable,shape=Normal,width=673,height=841,unit=dp,dpi=420" const val TABLET = "spec:id=reference_tablet,shape=Normal,width=1280,height=800,unit=dp,dpi=240" const val DESKTOP = "spec:id=reference_desktop,shape=Normal,width=1920,height=1080,unit=dp,dpi=160" .. } リファレンスデバイスに追加して 画面サイズが小さい端末も欲しいなあ
37. カスタムのデバイスを作成する
38. カスタムのデバイスを作成する
39. カスタムのデバイスを作成する @PreviewScreenSizes @Preview(device = "spec:width=320dp,height=426dp,dpi=420") @Composable
40. 画面の向き
41. 画面の向き @Preview(device = "id:pixel_4") @Preview(device = "spec:parent=pixel_4,orientation=landscape") @Composable
42. フォントスケール @Repeatable annotation class Preview( val name: String = "", val group: String = "", @IntRange(from = 1) val apiLevel: Int = -1, val widthDp: Int = -1, val heightDp: Int = -1, val locale: String = "", @FloatRange(from = 0.01) val fontScale: Float = 1f, val showSystemUi: Boolean = false, val showBackground: Boolean = false, val backgroundColor: Long = 0, @UiMode val uiMode: Int = 0, @Device val device: String = Devices.DEFAULT, @Wallpaper val wallpaper: Int = Wallpapers.NONE, )
43. フォントスケール
44. フォントスケール @Preview( device = "id:pixel_4", fontScale = 2.0f ) @Preview( device = "id:pixel_4", fontScale = 1.0f ) @Preview( device = "id:pixel_4", fontScale = 0.85f ) @Composable
45. フォントスケール @Retention(AnnotationRetention.BINARY) @Target( AnnotationTarget.ANNOTATION_CLASS, AnnotationTarget.FUNCTION ) @Preview(name = "85%", fontScale = 0.85f) @Preview(name = "100%", fontScale = 1.0f) @Preview(name = "115%", fontScale = 1.15f) @Preview(name = "130%", fontScale = 1.3f) @Preview(name = "150%", fontScale = 1.5f) @Preview(name = "180%", fontScale = 1.8f) @Preview(name = "200%", fontScale = 2f) annotation class PreviewFontScale https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/ui/ui-tooling-preview/sr c/androidMain/kotlin/androidx/compose/ui/tooling/preview/MultiPreviews.android.kt 設定可能なfontScaleのパターンを まとめたマルチプレビューテンプレート
46. 言語・地域 @Repeatable annotation class Preview( val name: String = "", val group: String = "", @IntRange(from = 1) val apiLevel: Int = -1, val widthDp: Int = -1, val heightDp: Int = -1, val locale: String = "", @FloatRange(from = 0.01) val fontScale: Float = 1f, val showSystemUi: Boolean = false, val showBackground: Boolean = false, val backgroundColor: Long = 0, @UiMode val uiMode: Int = 0, @Device val device: String = Devices.DEFAULT, @Wallpaper val wallpaper: Int = Wallpapers.NONE, )
47. 言語・地域 アプリのロケールディレクトリ(例:values-ja)から 選択肢を出してくれる
48. 言語・地域 @Preview( device = "id:pixel_4", locale = "en" ) @Preview( device = "id:pixel_4", locale = "ja" ) @Preview( device = "id:pixel_4", locale = "ar" ) @Composable
49. @Preview( device = "id:pixel_4", locale = "en" ) @Preview( device = "id:pixel_4", locale = "ja" ) @Preview( device = "id:pixel_4", locale = "ar" ) @Composable 言語・地域 RTLレイアウトを確認したい場合は RTL言語を指定する
50. ダークモード @Preview(uiMode = Configuration.UI_MODE_NIGHT_YES) @Composable
51. ダークモード @Preview(uiMode = Configuration.UI_MODE_NIGHT_YES) @Composable isSystemInDarkThemeがtrueになる
52. UI Check Mode • Preview右上「Start UI Check Mode」から起動 • マルチプレビューテンプレートのPreview全種類を自動で作成 ◦ PreviewScreenSizes・PreviewFontScale・PreviewLightDark・Previ ewDynamicColors • 作成したPreviewに対してユーザー補助検証ツールとVisual Lintを実 行した結果を教えてくれる
53. UI Check Mode TextField( modifier = Modifier.fillMaxWidth(), value = value, placeholder = { Text("Input you name") }, ) Button(modifier = Modifier .fillMaxWidth()) { Text(text = "Button") }
54. UI Check Mode TextField( modifier = Modifier.fillMaxWidth(), value = value, placeholder = { Text("Input you name") }, ) Button(modifier = Modifier .fillMaxWidth()) { Text(text = "Button") }
55. UI Check Mode
56. UI Check Mode
57. UI Check Mode ユーザー補助検証ツールで検出された問題
58. UI Check Mode Visual Lintで検出された問題
59. ユーザー補助検証ツール • 画面をスキャンし、ユーザー補助機能を改善するための提案をする ◦ コンテンツサイズ ◦ タップターゲットのサイズ ◦ クリック可能アイテム ◦ テキストと画像のコントラスト https://support.google.com/accessibility/android/faq/6 376582
60. Visual Linting • ドキュメントはないが、VisualLintServiceのソースコードから チェック項目を確認できる ◦ Android Code Search > VisualLintService.kt • さきほどの例だとButtonSizeAnalyzerで引っかかった ◦ 実装されているチェック項目の数は多くはないが、Material Designの推奨にそっているかを見ているものが半分ほど
61. Compose Previewで確認する • 画面サイズ・画面密度 • 画面の向き • フォントスケール • 言語・地域 • ダークテーマ • UI Check Mode
62. デバイスで確認する
63. デバイスで確認する • デバイスの確認はComposeのPreviewほど楽に環境のバリエーションを 作成できないが、デバイスでないと確認が難しいものも多々ある ◦ マルチウィンドウモードの時の動作等 • できるだけ1つのデバイスでバリエーションを確認できたり、設定の 変更を少ない手順でできると嬉しい
64. デバイスで確認する • Resizable Emulator • 画面サイズ・画面密度 • Device setting shortcut • 画面の状態 • 言語・地域
65. Resizable Emulator • Phone・Foldable・Tabletの3つのリファレンスデバイスに切替可能な エミュレーター • Foldable選択時に開閉状態を変更することも可 • システムイメージはAPIレベル34以降のみ
66. 画面サイズ・画面密度の変更 • Resizable Emulatorは便利だが、次のデメリットもある ◦ 利用できるAPIレベルが限定される ◦ 小さい画面がない ◦ まだExperimentalで、動作が不安定な場合がある
67. 画面サイズ・画面密度の変更 • Resizable Emulatorは便利だが、次のデメリットもある ◦ 利用できるAPIレベルが限定される ◦ 小さい画面がない ◦ まだExperimentalで、動作が不安定な場合がある adbコマンドで任意の値に変更可
68. 画面サイズ・画面密度の変更 // 現在のサイズを取得する $ adb shell wm size // サイズを変更する(dp指定) $ adb shell wm size 320dpx480dp // サイズを変更する(ピクセル指定) $ adb shell wm size 840x1260 // 設定をもとに戻す $ adb shell wm size reset
69. 画面サイズ・画面密度の変更 // 現在の画面密度を取得する $ adb shell wm density // 画面密度を変更する $ adb shell wm density 480 // 設定をもとに戻す $ adb shell wm density reset
70. 画面サイズ・画面密度の変更 $ adb shell wm size -> Physical size: 1080x2400 $ adb shell wm size -> Physical density: 420 $ adb shell wm size 320dpx480dp
71. Device setting shortcut • ダークテーマ・フォントスケール・表示サイズをAndroid Studioから 変更できる • デバイスミラーリングをした実機でも使用可能。実機の場合はさらに 次の機能のON/OFFも変更可 ◦ トークバック ◦ Select to speak
72. Device setting shortcut
73. Device setting shortcut
74. Device setting shortcut
75. 画面の状態 • 画面回転・Foldable端末の折りたたみ状態はメニューから変更可能 • Foldable端末はVisual Sensorsからさらに柔軟な設定が可能
76. 言語・地域 • エミュレーターなどadb rootができる場合はadbコマンドで変更可で きるが、利用できるシーンが限られる • そうでない場合はAppiumの設定アプリ経由でadbコマンドから変更で きるが、やや手間 • 一部のエミュレーターはDevice setting shortcutにも設定項目があ るが、利用できる条件は不明 • RTLレイアウトへの変更は開発者オプションから変更可
77. adbコマンドでの言語変更 $ adb root $ adb shell // 言語タグを指定 $ setprop persist.sys.locale ja-JP;stop;sleep 5;start https://developer.android.com/guide/topics/resources/localization #emulator
78. Appiumの設定アプリからの変更 github.com/appium/io.appium.settingsのリリースからapkをダウンロー ドし端末にインストール後、次のコマンドを実行 // Appiumの設定アプリにパーミッション付与 $ adb shell pm grant io.appium.settings android.permission.CHANGE_CONFIGURATION // API Level34以上の場合、非 SDK インターフェースへのアクセスを有効にする $ adb shell settings put global hidden_api_policy 1 // Appiumの設定アプリにBroadcastを送信して言語と地域を変更 $ adb shell am broadcast -a io.appium.settings.locale \ -n io.appium.settings/.receivers.LocaleSettingReceiver \ --es lang ja --es country JP
79. RTLレイアウトへの変更 • 「開発者向けオプション > RTLレイアウト方向を使用」から変更可能 ◦ RTL言語への変更でも可能だが、読めない言語にすると端末が 使いづらくなるため • クイック設定開発者用タイルから、ショートカットの追加も可
80. クイック設定開発者用タイル 開発者向けオプション > クイック設定開発者用タイル
81. デバイスで確認する • Resizable Emulator • 画面サイズ・画面密度 • Device setting shortcut • 画面の状態 • 言語・地域
82. 自動テストで確認する
83. UIバリエーションを確認する自動テストの種類 • UIテスト • スクリーンショットテスト • Compose Previewのスクリーンショットテスト
84. UIバリエーションを確認する自動テストの種類 • UIテスト • スクリーンショットテスト • Compose Previewのスクリーンショットテスト テストコード上でUIを表示・操作した後、 UIの要素に対してAssertionをする
85. UIバリエーションを確認する自動テストの種類 • UIテスト • スクリーンショットテスト • Compose Previewのスクリーンショットテスト テストコード上でUIを表示・操作した後、ス クリーンショットを取得する また、コードの変更前と変更後のスクリーン ショット同士を比較してVisual Regression Testをする UIテストとの組み合わせも可
86. UIバリエーションを確認する自動テストの種類 • UIテスト • スクリーンショットテスト • Compose Previewのスクリーンショットテスト スクリーンショットテストの1種 Compose Previewの実装を利用すること でテストコードの実装するコストを 大きく下げることができる
87. UIバリエーションを確認する自動テストの種類 • UIテスト • スクリーンショットテスト • Compose Previewのスクリーンショットテスト 今回は主に2つのテストで利用できる 環境のバリエーションを作成するため のツールを紹介
88. Compose Previewのスクリーンショットテスト 「仕組みから理解する！Composeプレビューを様々なバリエーションで スクリーンショットテストしよう」 https://2024.droidkaigi.jp/timetable/692264/
89. 自動テストで確認する • DeviceConfigurationOverride • Window Testing Library • StateRestorationTester • RobolectricのQualitifier
90. 自動テストで確認する • DeviceConfigurationOverride • Window Testing Library • StateRestorationTester • RobolectricのQualitifier
91. DeviceConfigurationOverride • Composeを様々なConfigurationでテストできるように環境をエミュ レートしてくれる ◦ 元TestHarness library • Local Test(Robolectric)とInstrumentation Testどちらでも利用可 • テスト開始前にsetContent済みのActivityを起動する場合は利用不可 • Compose 1.7.0-alpha03以上
92. DeviceConfigurationOverride DeviceConfigurationOverride.ForcedSize 画面サイズ DeviceConfigurationOverride.FontScale フォントスケール DeviceConfigurationOverride.FontWeightAdjustment フォントの太さ DeviceConfigurationOverride.DarkMode ダークモード DeviceConfigurationOverride.Locales 言語・地域 DeviceConfigurationOverride.LayoutDirection レイアウト方向(LTR or RTL) DeviceConfigurationOverride.WindowInsets ウィンドウインセット
93. Composeの自動テストの雛形 @RunWith(AndroidJUnit4::class) class ComposeUITest { @get:Rule val composeTestRule = createComposeRule() @Test fun testYourCompose() { composeTestRule.setContent { // set your composable function } } }
94. DeviceConfigurationOverride @Test fun testYourCompose() { composeTestRule.setContent { DeviceConfigurationOverride( DeviceConfigurationOverride.ForcedSize( DpSize(480.dp, 320.dp) ) ) { MyCompose() } } }
95. DeviceConfigurationOverride @Test fun testYourCompose() { composeTestRule.setContent { DeviceConfigurationOverride( DeviceConfigurationOverride.ForcedSize( DpSize(480.dp, 320.dp) ) ) { MyCompose() } } } テスト対象のCompose関数を DeviceConfigurationOverrideで囲む そのため、テストコードから setContentできる必要がある
96. DeviceConfigurationOverride DeviceConfigurationOverride( DeviceConfigurationOverride.ForcedSize(DpSize(480.dp, 320.dp)) then DeviceConfigurationOverride.FontScale(2f) then DeviceConfigurationOverride.Locales(LocaleList("ja")) ) { MyCompose() }
97. DeviceConfigurationOverride DeviceConfigurationOverride( DeviceConfigurationOverride.ForcedSize(DpSize(480.dp, 320.dp)) then DeviceConfigurationOverride.FontScale(2f) then DeviceConfigurationOverride.Locales(LocaleList("ja")) ) { MyCompose() } thenで連結可能
98. DeviceConfigurationOverride
99. Window Testing library • 折りたたみ機能などウインドウ管理に関連する機能のテストをできる ようする • 任意のFoldingFeatureインスタンスを作成できるAPIがあり、Preview にも使用可能 • Local TestとInstrumentaion Test両方で使用可
100. Window Testing library ブックモード テーブルトップモード ヒンジ ヒンジ
101. Window Testing library @RunWith(AndroidJUnit4::class) class ComposeUITest { @get:Rule(order = 1) val composeTestRule = createAndroidComposeRule<ComponentActivity>() @get:Rule(order = 2) val windowLayoutInfoPublisherRule = WindowLayoutInfoPublisherRule() .. }　
102. Window Testing library @RunWith(AndroidJUnit4::class) class ComposeUITest { @get:Rule(order = 1) val composeTestRule = createAndroidComposeRule<ComponentActivity>() @get:Rule(order = 2) val windowLayoutInfoPublisherRule = WindowLayoutInfoPublisherRule() .. }　
103. Window Testing library @RunWith(AndroidJUnit4::class) class ComposeUITest { @get:Rule(order = 1) val composeTestRule = createAndroidComposeRule<ComponentActivity>() @get:Rule(order = 2) val windowLayoutInfoPublisherRule = WindowLayoutInfoPublisherRule() .. }　 Activityのインスタンスを 利用したいので
104. Window Testing library @RunWith(AndroidJUnit4::class) class ComposeUITest { @get:Rule(order = 1) val composeTestRule = createAndroidComposeRule<ComponentActivity>() @get:Rule(order = 2) val windowLayoutInfoPublisherRule = WindowLayoutInfoPublisherRule() .. }　
105. Window Testing library @Test fun foldingFeature() { composeTestRule.setContent { MainContent() } val foldingFeature = FoldingFeature( activity = composeTestRule.activity, state = HALF_OPENED, orientation = HORIZONTAL, ) val info = TestWindowLayoutInfo(listOf(foldingFeature)) windowLayoutInfoPublisherRule.overrideWindowLayoutInfo(info) composeTestRule.waitForIdle() }
106. Window Testing library @Test fun foldingFeature() { composeTestRule.setContent { MainContent() } val foldingFeature = FoldingFeature( activity = composeTestRule.activity, state = HALF_OPENED, orientation = HORIZONTAL, ) val info = TestWindowLayoutInfo(listOf(foldingFeature)) windowLayoutInfoPublisherRule.overrideWindowLayoutInfo(info) composeTestRule.waitForIdle() } テーブルトップモード
107. Window Testing library @Test fun foldingFeature() { composeTestRule.setContent { MainContent() } val foldingFeature = FoldingFeature( activity = composeTestRule.activity, state = HALF_OPENED, orientation = HORIZONTAL, ) val info = TestWindowLayoutInfo(listOf(foldingFeature)) windowLayoutInfoPublisherRule.overrideWindowLayoutInfo(info) composeTestRule.waitForIdle() } DisplayFeatureの上書き
108. Window Testing library @Test fun foldingFeature() { composeTestRule.setContent { MainContent() } val foldingFeature = FoldingFeature( activity = composeTestRule.activity, state = HALF_OPENED, orientation = HORIZONTAL, ) val info = TestWindowLayoutInfo(listOf(foldingFeature)) windowLayoutInfoPublisherRule.overrideWindowLayoutInfo(info) composeTestRule.waitForIdle() } 再描画終わるまで待機 Instrumentation Testでは必要
109. Window Testing library HALF_OPEND & VERTICAL HALF_OPEND & HORIZONTAL
110. Window Testing library - Previewでの利用 @Preview(device = "spec:width=480dp,height=480dp,dpi=160") @Composable fun PreviewTwoPaneLayoutHorizontal() { TwoPaneLayout( displayFeatures = listOf( FoldingFeature( Rect(0, 240, 480, 240), orientation = FoldingFeature.Orientation.HORIZONTAL, state = FoldingFeature.State.HALF_OPENED, ) ) ) }
111. Window Testing library - Previewでの利用 @Preview(device = "spec:width=480dp,height=480dp,dpi=160") @Composable fun PreviewTwoPaneLayoutHorizontal() { TwoPaneLayout( displayFeatures = listOf( FoldingFeature( Rect(0, 240, 480, 240), orientation = FoldingFeature.Orientation.HORIZONTAL, state = FoldingFeature.State.HALF_OPENED, ) ) ) } 画面サイズが480dpの正方形 計算しやすいようにdpiは160(倍率1.0)
112. Window Testing library - Previewでの利用 @Preview(device = "spec:width=480dp,height=480dp,dpi=160") @Composable fun PreviewTwoPaneLayoutHorizontal() { TwoPaneLayout( displayFeatures = listOf( FoldingFeature( Rect(0, 240, 480, 240), orientation = FoldingFeature.Orientation.HORIZONTAL, state = FoldingFeature.State.HALF_OPENED, ) ) ) } ヒンジの位置が Left: 0, top: 240 right: 480 bottom: 240
113. Window Testing library - Previewでの利用 @Preview(device = "spec:width=480dp,height=480dp,dpi=160") @Composable fun PreviewTwoPaneLayoutHorizontal() { TwoPaneLayout( displayFeatures = listOf( FoldingFeature( Rect(0, 240, 480, 240), orientation = FoldingFeature.Orientation.HORIZONTAL, state = FoldingFeature.State.HALF_OPENED, ) ) ) } テーブルトップモード
114. Window Testing library - Previewでの利用 @Preview(device = "spec:width=480dp,height=480dp,dpi=160") @Composable fun PreviewTwoPaneLayoutHorizontal() { TwoPaneLayout( displayFeatures = listOf( FoldingFeature( Rect(0, 240, 480, 240), orientation = FoldingFeature.Orientation.HORIZONTAL, state = FoldingFeature.State.HALF_OPENED, ) ) ) } テーブルトップモード
115. StateRestorationTester • Configuration Changeをシミュレートして、Configuration Change時 にUIの状態が復元できるかをテストする • Activityのrecreateをするよりも高速で安定するらしい • Local TestとInstrumentaion Test両方で使用可
116. StateRestorationTester @Test fun savedState() { val stateRestorationTester = StateRestorationTester(composeTestRule) stateRestorationTester.setContent { Counter() } composeTestRule.onNodeWithText("increment").performClick() composeTestRule.onNodeWithTag("counter").assertTextEquals("1") stateRestorationTester.emulateSavedInstanceStateRestore() composeTestRule.onNodeWithTag("counter").assertTextEquals("1") }
117. StateRestorationTester @Test fun savedState() { val stateRestorationTester = StateRestorationTester(composeTestRule) stateRestorationTester.setContent { Counter() } composeTestRule.onNodeWithText("increment").performClick() composeTestRule.onNodeWithTag("counter").assertTextEquals("1") stateRestorationTester.emulateSavedInstanceStateRestore() composeTestRule.onNodeWithTag("counter").assertTextEquals("1") }
118. StateRestorationTester @Test fun savedState() { val stateRestorationTester = StateRestorationTester(composeTestRule) stateRestorationTester.setContent { Counter() } composeTestRule.onNodeWithText("increment").performClick() composeTestRule.onNodeWithTag("counter").assertTextEquals("1") stateRestorationTester.emulateSavedInstanceStateRestore() composeTestRule.onNodeWithTag("counter").assertTextEquals("1") } StateRestorationTesterの インスタンスを作成して setContentする
119. StateRestorationTester @Test fun savedState() { val stateRestorationTester = StateRestorationTester(composeTestRule) stateRestorationTester.setContent { Counter() } composeTestRule.onNodeWithText("increment").performClick() composeTestRule.onNodeWithTag("counter").assertTextEquals("1") stateRestorationTester.emulateSavedInstanceStateRestore() composeTestRule.onNodeWithTag("counter").assertTextEquals("1") } Composeに対して操作し 初期状態から変更
120. StateRestorationTester @Test fun savedState() { val stateRestorationTester = StateRestorationTester(composeTestRule) stateRestorationTester.setContent { Counter() } composeTestRule.onNodeWithText("increment").performClick() composeTestRule.onNodeWithTag("counter").assertTextEquals("1") stateRestorationTester.emulateSavedInstanceStateRestore() composeTestRule.onNodeWithTag("counter").assertTextEquals("1") } Configuration Changeの エミュレート
121. StateRestorationTester @Test fun savedState() { val stateRestorationTester = StateRestorationTester(composeTestRule) stateRestorationTester.setContent { Counter() } composeTestRule.onNodeWithText("increment").performClick() composeTestRule.onNodeWithTag("counter").assertTextEquals("1") stateRestorationTester.emulateSavedInstanceStateRestore() composeTestRule.onNodeWithTag("counter").assertTextEquals("1") } 状態が復元できているかを確認する 例えば値をrememberしていると テストが失敗する
122. おすすめのドキュメント Libraries and tools to test different screen sizes https://developer.android.com/training/testing/different-screens/ tools
123. 自動テストで確認する • DeviceConfigurationOverride • Window Testing Library • StateRestorationTester
124. まとめ
125. 今日話したこと • 環境のバリエーションを整理する • Compose Previewで確認する • デバイスで確認する • 自動テストで確認する
126. 参考 • App resources overview ◦ https://developer.android.com/guide/topics/resources/providing-resources.html • Support different pixel densities ◦ https://developer.android.com/training/multiscreen/screendensities • Distribution Dashboard ◦ https://developer.android.com/about/dashboards/index.html • Window size classes ◦ https://developer.android.com/develop/ui/compose/layouts/adaptive/window-size-cla sses • ユーザー補助検証ツール ◦ https://support.google.com/accessibility/android/faq/6376582 • Localize your app ◦ https://developer.android.com/guide/topics/resources/localization#emulator • Io.appium.settings ◦ https://github.com/appium/io.appium.settings • Libraries and tools to test different screen sizes ◦ https://developer.android.com/training/testing/different-screens/tools
127. ご清聴ありがとうございました！