Soumettre la recherche
Mettre en ligne
Android Qにおける Gestural Navigation and Dark Theme
•
0 j'aime
•
2,613 vues
furusin
Suivre
GDG Kyoto IO Extended 2019 2019/05/18
Lire moins
Lire la suite
Technologie
Signaler
Partager
Signaler
Partager
1 sur 34
Télécharger maintenant
Télécharger pour lire hors ligne
Recommandé
UE4 HUD作成
UE4 HUD作成
Tatsuya Iwama
App Makerってなんぞ
App Makerってなんぞ
Hayato Ito
Difficulty of managing iOS Engineers as an Android Engineer.pdf
Difficulty of managing iOS Engineers as an Android Engineer.pdf
furusin
Google Play In-App Review API 改めて調べてみた
Google Play In-App Review API 改めて調べてみた
furusin
Google I_O 2022 Sign-in関連
Google I_O 2022 Sign-in関連
furusin
Sansan androidチームが取り組む コードレビューを早くまわす工夫
Sansan androidチームが取り組む コードレビューを早くまわす工夫
furusin
Google I/O 2021 Recap
Google I/O 2021 Recap
furusin
Paging Libraryの利用をやめたいお気持ち表明
Paging Libraryの利用をやめたいお気持ち表明
furusin
Recommandé
UE4 HUD作成
UE4 HUD作成
Tatsuya Iwama
App Makerってなんぞ
App Makerってなんぞ
Hayato Ito
Difficulty of managing iOS Engineers as an Android Engineer.pdf
Difficulty of managing iOS Engineers as an Android Engineer.pdf
furusin
Google Play In-App Review API 改めて調べてみた
Google Play In-App Review API 改めて調べてみた
furusin
Google I_O 2022 Sign-in関連
Google I_O 2022 Sign-in関連
furusin
Sansan androidチームが取り組む コードレビューを早くまわす工夫
Sansan androidチームが取り組む コードレビューを早くまわす工夫
furusin
Google I/O 2021 Recap
Google I/O 2021 Recap
furusin
Paging Libraryの利用をやめたいお気持ち表明
Paging Libraryの利用をやめたいお気持ち表明
furusin
Jetpack datastore入門
Jetpack datastore入門
furusin
コロナ禍でコミュニティ運営はこう変わった
コロナ禍でコミュニティ運営はこう変わった
furusin
Android dev summit 2019 recap
Android dev summit 2019 recap
furusin
Android billing library 2.0 recap
Android billing library 2.0 recap
furusin
社内システムにおける 「使いやすさ」の重要性
社内システムにおける 「使いやすさ」の重要性
furusin
デザインフローについて考え直す
デザインフローについて考え直す
furusin
Build your first wear app
Build your first wear app
furusin
ネイティブAndroidエンジニアがVueNativeでiOSアプリを作ってみた
ネイティブAndroidエンジニアがVueNativeでiOSアプリを作ってみた
furusin
Pray for hokkaido from osaka
Pray for hokkaido from osaka
furusin
Google Codelabsをやってみた
Google Codelabsをやってみた
furusin
個人開発アプリの紹介と実装内容の概要
個人開発アプリの紹介と実装内容の概要
furusin
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
UEHARA, Tetsutaro
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
akihisamiyanaga1
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
Yuki Kikuchi
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
FumieNakayama
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NTT DATA Technology & Innovation
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
sugiuralab
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
Hiroshi Tomioka
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
博三 太田
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
FumieNakayama
Contenu connexe
Plus de furusin
Jetpack datastore入門
Jetpack datastore入門
furusin
コロナ禍でコミュニティ運営はこう変わった
コロナ禍でコミュニティ運営はこう変わった
furusin
Android dev summit 2019 recap
Android dev summit 2019 recap
furusin
Android billing library 2.0 recap
Android billing library 2.0 recap
furusin
社内システムにおける 「使いやすさ」の重要性
社内システムにおける 「使いやすさ」の重要性
furusin
デザインフローについて考え直す
デザインフローについて考え直す
furusin
Build your first wear app
Build your first wear app
furusin
ネイティブAndroidエンジニアがVueNativeでiOSアプリを作ってみた
ネイティブAndroidエンジニアがVueNativeでiOSアプリを作ってみた
furusin
Pray for hokkaido from osaka
Pray for hokkaido from osaka
furusin
Google Codelabsをやってみた
Google Codelabsをやってみた
furusin
個人開発アプリの紹介と実装内容の概要
個人開発アプリの紹介と実装内容の概要
furusin
Plus de furusin
(11)
Jetpack datastore入門
Jetpack datastore入門
コロナ禍でコミュニティ運営はこう変わった
コロナ禍でコミュニティ運営はこう変わった
Android dev summit 2019 recap
Android dev summit 2019 recap
Android billing library 2.0 recap
Android billing library 2.0 recap
社内システムにおける 「使いやすさ」の重要性
社内システムにおける 「使いやすさ」の重要性
デザインフローについて考え直す
デザインフローについて考え直す
Build your first wear app
Build your first wear app
ネイティブAndroidエンジニアがVueNativeでiOSアプリを作ってみた
ネイティブAndroidエンジニアがVueNativeでiOSアプリを作ってみた
Pray for hokkaido from osaka
Pray for hokkaido from osaka
Google Codelabsをやってみた
Google Codelabsをやってみた
個人開発アプリの紹介と実装内容の概要
個人開発アプリの紹介と実装内容の概要
Dernier
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
UEHARA, Tetsutaro
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
akihisamiyanaga1
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
Yuki Kikuchi
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
FumieNakayama
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NTT DATA Technology & Innovation
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
sugiuralab
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
Hiroshi Tomioka
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
博三 太田
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
FumieNakayama
Dernier
(9)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
Android Qにおける Gestural Navigation and Dark Theme
1.
Android Q対応 Gestural Navigation Dark
Theme GDG Kyoto 2019/05/17 @furusin_oriver
2.
Android Q で対応が必要なこと ●
Gestural Navigation ● Dark Theme ● SYSTEM_ALERT_WINDOW deprecated ● android.preference deprecated ● バックグラウンドでロケーションが必要な場合、追加のPermissionが必要 ● Share Sheet ● Bubbles ● etc...
3.
Android Q で対応が必要なこと ●
Gestural Navigation ● Dark Theme ● SYSTEM_ALERT_WINDOW deprecated ● android.preference deprecated ● バックグラウンドでロケーションが必要な場合、追加のPermissionが必要 ● Share Sheet ● Bubble ● etc... 今日はここ
4.
Gestural Navigation
5.
Gestural Navigation? 画面遷移などのジェスチャーのこと。 Navigation Barの設定によって変わる
6.
Navigation Barのタイプ 3-button Navigation 2-button
Navigation Full Gestural Navigation
7.
Navigationの動き
8.
なぜ生まれたか? Navigation Barはメーカーによってデザインは異なるため、 アプリ開発は難しくなってきている そのため、ベースを統一したかった
9.
Gestural Navigation ● Gestureは2種類 ○
画面左右からスワイプで「戻る」挙動 ○ 画面下部からスワイプでアプリ切り替え ● 将来的には2種類のNav Modeをサポート ○ 3-button Navigation ○ Full Nav Gesture Mode ● Gestureは奪うことも可能
10.
Gestureの種類 ● 画面左右からスワイプ ○ 「戻る」挙動(右も!)
11.
Gestureの種類 ● 画面下部からスワイプ:アプリ切り替え ○ 必須。殺せない ○
指を離したらonPause→onStopが呼ばれる ○ 戻ってきたらonRestart→onResumeが呼ばれる
12.
Gestural Navigation対応へのロードマップ 1. UIを
“edge-to-edge” にする 2. 端にあるWidgetでGestureと競合するものをいい感じにする 例)DrawerLayoutやImageCropのポイント
13.
UIを “edge-to-edge” にする ●
Step1. Status Barの後ろにも描画する(推奨)
14.
UIを “edge-to-edge” にする ●
Step2. Navigation Barの後ろにも描画する(強く推奨)
15.
UIを “edge-to-edge” にする ●
Step2. Navigation Barの後ろにも描画する(強く推奨) a. 古いOSバージョンの場合はNavigation Barを半透明にすること b. ScrollViewとかは一番下に「Navigation Barの分の余白」を追加する必要 がある c. Bottom SheetsはNavigation Barの領域も含めたサイズにする
16.
UIを “edge-to-edge” にする ●
備考 Navigation Barの裏に色の濃いものが来た場合、システムボタンは色が自動で 変わる
17.
UIを “edge-to-edge” にする ●
Step3. Insets a. System Window Inset(Navigation Barとか) i. クリック可能なViewは避けて配置する(例:FAB) ii. 3 Button Navigation Barの場合は、更に上に設置することになる
18.
Gestureと競合するものをいい感じにする ● 画面の端に ドラッグできるものを 置きたい
19.
Gestureと競合するものをいい感じにする View.setSystemGestureExclusionRects() で競合を奪うことが可能
20.
Gestureと競合するものをいい感じにする override fun onDraw(canvas:
Canvas?) { //.. ViewCompat.setSystemGestureExclusionRects(this, rects) } ● setSystemGestureExclusionRectsは onLayout もしくは onDraw で呼ぶ(onDrawの方がいいかも?)
21.
Gestureと競合するものをいい感じにする override fun onDraw(canvas:
Canvas?) { //.. val isSupplyGestureExclusion = BuildCompat.isAtLeastQ() if (isSupplyGestureExclusion) { ViewCompat.setSystemGestureExclusionRects(this, rects) } } ● ちゃんとやるならこう?
22.
Gestureと競合するものをいい感じにする ・DrawerLayoutとSeekBarは別途AndroidXで対応される https://developer.android.com/jetpack/androidx/releases/drawerlayout#1.1.0-alpha01 ちゃんと中で ViewCompat.setSystemGestureExclusionRects(this, rects); が呼ばれてる (けど…Javaなんやな…)
23.
DrawerLayoutはまだ検討中なのかも
24.
Dark Theme
25.
なぜ生まれたか? ● アプリをより暗い環境でも使いやすくす るするため ○ 暗い部屋や暗い環境でも使えるように。アプリ を使えるシチュエーションを広げる ●
バッテリーを守る ○ 最大60%は削減できる ● 目の保養
26.
適用方法 ● Force Dark ○
アプリへ自動的にダークモードを適用する (これだけでイケるかもしれない:Android Qだけで適用される) ● Custom Dark ○ 「ダークモードの時は何色にする」と独自に指定 ○ こっちのほうがデザインとして圧倒的に良い(工数はかかる)
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.
Custom Dark ● Dark
Modeのときに使う -nightリソースも作ることができる ○ 通常:values/themes.xml ○ Dark Mode:values-night/themes.xml
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.
画像もダークテーマ対応が必要 values-night/colors.xml values/colors.xml
31.
アプリではテーマを選べるようにすべき
32.
ちなみに ● アプリ起動中にDark ThemeのON/OFFを切り替えると、ア プリが再起動されます ○
onPause ○ onStop ○ onDestroy ○ ↓ ○ onCreate ○ onStart ○ onResume
33.
まとめ ● Gestural Navigation ○
アプリは画面全体に表示 ○ 左右はあける。ただしDrawerLayoutはAndroidXでいい感じにしてくれる ○ どうしても左右にモノを置きたい場合は View.setSystemGestureExclusionRects(listOf(Rect(a,a,a,a))を使う ● Dark Theme ○ Force Darkで意外となんとかなる けどなんとかならない所もあるのでThemeでちゃんとやろう ○ アプリでテーマを選べるようにすべき ○ 画像もダークテーマ対応が必要 ○ 「対応しないという選択肢」はない
34.
ご清聴ありがとうございました
Télécharger maintenant