Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Android Qにおける Gestural Navigation and Dark Theme

1 580 vues

Publié le

GDG Kyoto IO Extended 2019 2019/05/18

Publié dans : Technologie
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Android Qにおける Gestural Navigation and Dark Theme

  1. 1. Android Q対応 Gestural Navigation Dark Theme GDG Kyoto 2019/05/17 @furusin_oriver
  2. 2. Android Q で対応が必要なこと ● Gestural Navigation ● Dark Theme ● SYSTEM_ALERT_WINDOW deprecated ● android.preference deprecated ● バックグラウンドでロケーションが必要な場合、追加のPermissionが必要 ● Share Sheet ● Bubbles ● etc...
  3. 3. Android Q で対応が必要なこと ● Gestural Navigation ● Dark Theme ● SYSTEM_ALERT_WINDOW deprecated ● android.preference deprecated ● バックグラウンドでロケーションが必要な場合、追加のPermissionが必要 ● Share Sheet ● Bubble ● etc... 今日はここ
  4. 4. Gestural Navigation
  5. 5. Gestural Navigation? 画面遷移などのジェスチャーのこと。 Navigation Barの設定によって変わる
  6. 6. Navigation Barのタイプ 3-button Navigation 2-button Navigation Full Gestural Navigation
  7. 7. Navigationの動き
  8. 8. なぜ生まれたか? Navigation Barはメーカーによってデザインは異なるため、 アプリ開発は難しくなってきている そのため、ベースを統一したかった
  9. 9. Gestural Navigation ● Gestureは2種類 ○ 画面左右からスワイプで「戻る」挙動 ○ 画面下部からスワイプでアプリ切り替え ● 将来的には2種類のNav Modeをサポート ○ 3-button Navigation ○ Full Nav Gesture Mode ● Gestureは奪うことも可能
  10. 10. Gestureの種類 ● 画面左右からスワイプ ○ 「戻る」挙動(右も!)
  11. 11. Gestureの種類 ● 画面下部からスワイプ:アプリ切り替え ○ 必須。殺せない ○ 指を離したらonPause→onStopが呼ばれる ○ 戻ってきたらonRestart→onResumeが呼ばれる
  12. 12. Gestural Navigation対応へのロードマップ 1. UIを “edge-to-edge” にする 2. 端にあるWidgetでGestureと競合するものをいい感じにする 例)DrawerLayoutやImageCropのポイント
  13. 13. UIを “edge-to-edge” にする ● Step1. Status Barの後ろにも描画する(推奨)
  14. 14. UIを “edge-to-edge” にする ● Step2. Navigation Barの後ろにも描画する(強く推奨)
  15. 15. UIを “edge-to-edge” にする ● Step2. Navigation Barの後ろにも描画する(強く推奨) a. 古いOSバージョンの場合はNavigation Barを半透明にすること b. ScrollViewとかは一番下に「Navigation Barの分の余白」を追加する必要 がある c. Bottom SheetsはNavigation Barの領域も含めたサイズにする
  16. 16. UIを “edge-to-edge” にする ● 備考 Navigation Barの裏に色の濃いものが来た場合、システムボタンは色が自動で 変わる
  17. 17. UIを “edge-to-edge” にする ● Step3. Insets a. System Window Inset(Navigation Barとか) i. クリック可能なViewは避けて配置する(例:FAB) ii. 3 Button Navigation Barの場合は、更に上に設置することになる
  18. 18. Gestureと競合するものをいい感じにする ● 画面の端に ドラッグできるものを 置きたい
  19. 19. Gestureと競合するものをいい感じにする View.setSystemGestureExclusionRects() で競合を奪うことが可能
  20. 20. Gestureと競合するものをいい感じにする override fun onDraw(canvas: Canvas?) { //.. ViewCompat.setSystemGestureExclusionRects(this, rects) } ● setSystemGestureExclusionRectsは onLayout もしくは onDraw で呼ぶ(onDrawの方がいいかも?)
  21. 21. Gestureと競合するものをいい感じにする override fun onDraw(canvas: Canvas?) { //.. val isSupplyGestureExclusion = BuildCompat.isAtLeastQ() if (isSupplyGestureExclusion) { ViewCompat.setSystemGestureExclusionRects(this, rects) } } ● ちゃんとやるならこう?
  22. 22. Gestureと競合するものをいい感じにする ・DrawerLayoutとSeekBarは別途AndroidXで対応される https://developer.android.com/jetpack/androidx/releases/drawerlayout#1.1.0-alpha01 ちゃんと中で ViewCompat.setSystemGestureExclusionRects(this, rects); が呼ばれてる (けど…Javaなんやな…)
  23. 23. DrawerLayoutはまだ検討中なのかも
  24. 24. Dark Theme
  25. 25. なぜ生まれたか? ● アプリをより暗い環境でも使いやすくす るするため ○ 暗い部屋や暗い環境でも使えるように。アプリ を使えるシチュエーションを広げる ● バッテリーを守る ○ 最大60%は削減できる ● 目の保養
  26. 26. 適用方法 ● Force Dark ○ アプリへ自動的にダークモードを適用する (これだけでイケるかもしれない:Android Qだけで適用される) ● Custom Dark ○ 「ダークモードの時は何色にする」と独自に指定 ○ こっちのほうがデザインとして圧倒的に良い(工数はかかる)
  27. 27. Force Dark ● 適用方法 ○ <item name="android:forceDarkAllowed">true</item> ○ DayNight Themeを使う(Material Componentでもいいです) <style name="AppTheme" parent="Theme.AppCompat.DayNight"> <style name="AppTheme" parent="Theme.MaterialComponents.DayNight">
  28. 28. Custom Dark ● Dark Modeのときに使う -nightリソースも作ることができる ○ 通常:values/themes.xml ○ Dark Mode:values-night/themes.xml
  29. 29. AppCompatへ「どのモード?」を伝える ● モードの種別:Int(AppCompatDelegete) ○ MODE_NIGHT_AUTO_BATTERY:バッテリーセーバーがONでナイトモード ○ MODE_NIGHT_NO:ナイトモードを使わない ○ MODE_NIGHT_YES:ナイトモードを常に使う ○ MODE_NIGHT_FOLLOW_SYSTEM:端末の設定に従う ○ MODE_NIGHT_AUTO_TIME:deprecated AppCompatDelegate.setDefaultNightMode(mode:Int); getDelegate().setLocalNightMode(mode:Int);
  30. 30. 画像もダークテーマ対応が必要 values-night/colors.xml values/colors.xml
  31. 31. アプリではテーマを選べるようにすべき
  32. 32. ちなみに ● アプリ起動中にDark ThemeのON/OFFを切り替えると、ア プリが再起動されます ○ onPause ○ onStop ○ onDestroy ○ ↓ ○ onCreate ○ onStart ○ onResume
  33. 33. まとめ ● Gestural Navigation ○ アプリは画面全体に表示 ○ 左右はあける。ただしDrawerLayoutはAndroidXでいい感じにしてくれる ○ どうしても左右にモノを置きたい場合は View.setSystemGestureExclusionRects(listOf(Rect(a,a,a,a))を使う ● Dark Theme ○ Force Darkで意外となんとかなる けどなんとかならない所もあるのでThemeでちゃんとやろう ○ アプリでテーマを選べるようにすべき ○ 画像もダークテーマ対応が必要 ○ 「対応しないという選択肢」はない
  34. 34. ご清聴ありがとうございました

×