Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Android Qにおける Gestural Navigation and Dark Theme

1,543 views

Published on

GDG Kyoto IO Extended 2019 2019/05/18

Published in: Technology
  • Be the first to comment

  • Be the first to like this

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. ご清聴ありがとうございました

×