Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
WindowInsets 2022 feat. Jetpack Compose #ca_aab
Search
Mori Atsushi
August 18, 2022
Technology
1
1.3k
WindowInsets 2022 feat. Jetpack Compose #ca_aab
https://cyberagent.connpass.com/event/255932/
Mori Atsushi
August 18, 2022
Tweet
Share
More Decks by Mori Atsushi
See All by Mori Atsushi
Kotlin Coroutinesで共有リソースに正しくアクセスする
moriatsushi
5
2.4k
Jetpack Composeで Reduxっぽいアーキテクチャを試す
moriatsushi
2
660
Kotlin MultiplatformでもKSPを使う
moriatsushi
1
520
実例から学ぶJetpack Composeのパフォーマンス改善
moriatsushi
2
5.7k
Jetpack Composeで UI Catalog Libraryを 作っている話 #android_meetup
moriatsushi
1
960
良いコードとは何か - エンジニア新卒研修 スライド公開
moriatsushi
84
140k
AndroidでKotlin Coroutineを使うときの注意点 | CA BASE NEXT
moriatsushi
4
2.7k
新卒1年目で Androidアプリの アーキテクチャ移行を主導した話
moriatsushi
1
390
マルチモジュールでandroidアプリを救う | Scramble Tech #0
moriatsushi
1
960
Other Decks in Technology
See All in Technology
個人開発でLIFFとMessagingAPIを使ってわかった5つのこと
diggymo
0
280
リモートワーク時代の守護神 PHP開発者のためのセキュリティ強化術
pyama86
2
740
GA technologiesの経営戦略から駆動するデータ基盤構築
pacocat
0
480
実践チームトポロジー: プラットフォーム性とイネイブリング性の戦略 / Practical Team Topologies in Timee
go0517go
7
2.3k
アジャイルの灯火を絶やさない! 社内アジャイルコミュニティ運営
hacomono
PRO
1
130
Copilot for Security を使った MDE / Sentinel のログ調査
sophiakunii
2
190
Next.js の fetch 拡張とキャッシュ機構の違いを理解する
ryo_manba
3
560
Bring your app’s core features to users with App Intents とか App Intents 関連の要約
ryomm
1
210
新常識! Javascript×AWS Lambdaがアツい!!
watany
3
250
プロダクト拡大フェーズでプロダクト検証サイクル効率化を目指す過程で見えたもの / Streamlining Product Validation in Growth Phase
kakehashi
4
2.9k
フィーチャー開発から ホールプロダクト開発へ ~ 顧客価値へ向き合い続ける挑戦 ~ @itohiro73 #開発生産性con_findy
itohiro73
8
3.3k
爆速開発文化を支えるProduct Engineerの 開発生産性向上の取り組み
shnjtk
6
2.1k
Featured
See All Featured
Typedesign – Prime Four
hannesfritz
36
2.2k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
222
21k
Agile that works and the tools we love
rasmusluckow
325
20k
Music & Morning Musume
bryan
42
5.8k
The Straight Up "How To Draw Better" Workshop
denniskardys
228
130k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
27
2.4k
Product Roadmaps are Hard
iamctodd
PRO
46
10k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
23
2k
Automating Front-end Workflow
addyosmani
1360
200k
Fantastic passwords and where to find them - at NoRuKo
philnash
40
2.6k
Writing Fast Ruby
sferik
623
60k
Speed Design
sergeychernyshev
3
170
Transcript
WindowInsets 2022 feat. Jetpack Compose Mori Atsushi 20 22 -
08 - 18 #ca_aab
森 篤史 2019年度 新卒⼊社 Androidアプリエンジニア Next Experts (Android) Jetpack Composeゼミ代表
2019年度 未踏スーパークリエータ @at_sushi_at Mori-Atsushi
Jetpack Composeゼミ • CAゼミ制度の1つ • 特定のテーマに沿って技術者が⾃主的に集まり、 技術⼒の向上を⽬指して活動 • Jetpack
Composeゼミの活動(メンバー7⼈) • 隔週の勉強会で最新情報キャッチアップ • プロダクション導⼊の情報共有 • OSSの公開 / 技術記事の執筆
IUUQTDZCFSBHFOU[FNJHJUIVCJPLBUBMPH Katalog • UIίϯ ポ ʔωϯτ ペ ʔ ジ Λొ͢Δ
σόοά༻Ξ プ Ϧέʔγϣϯ • DSLͰهड़Ͱ͖Δ • Jetpack ComposeͷଞɺAndroid View DataBinding / ViewBindingʹରԠ A UI Catalog Library made with Jetpack Compose
• ⾼画質かつ業界最⾼⽔準の低遅延なライブ配信 • サブスク / PPV • 様々なジャンルの配信(eスポーツ⼤会、声優、⾳楽ライブ 他) ゲーム実況やプレイ動画が楽しめるライブ動画プラットフォーム
OPENREC.tvとJetapck Compose 10画⾯以上を完全移⾏ コンポーネントを移⾏ 新機能はComposeで
過去の登壇 https://ca-base-next.cyberagent.co.jp/ 202 2 /sessions/jetpack-compose-openrec/
Jetpack Compose 1 . 2 • LazyHorizontalGrid, LazyVerticalGridͷstableԽ • WindowInsets
APIͷՃ • Android ViewͱComposeͷnested scrollαϙʔτ • Compose + RecyclerViewͷύϑΥʔϚϯεվળ • μϯϩʔυϑΥϯτͷαϙʔτʢexperimentalʣ • includeFontPaddingͷαϙʔτʢexperimentalʣ 2022年7⽉ stable release 🎉
Jetpack Compose 1 . 2 2022年7⽉ stable release 今⽇はここの話 •
LazyHorizontalGrid, LazyVerticalGridͷstableԽ • WindowInsets APIͷՃ • Android ViewͱComposeͷnested scrollαϙʔτ • Compose + RecyclerViewͷύϑΥʔϚϯεվળ • μϯϩʔυϑΥϯτͷαϙʔτʢexperimentalʣ • includeFontPaddingͷαϙʔτʢexperimentalʣ
1 .WindowInsetsとは 2 .Edge-to-Edgeにチャレンジ 3 .スクロールに対応する 4 .ソフトウェアキーボードを避ける
WindowInsetsとは
WindowInsets • Status bar • Navigation bar • Software keyboard(IME)
• Display cutout(ノッチ) システムによって描画される領域 Status bar Navigation bar Software Keyboard Display cutout 重要なコンテンツが重ならないように 避ける必要がある
ジェスチャーナビゲーションと Edge-to-Edge対応 • Android 10 からジェスチャーナビゲー ションが追加された • ナビゲーション
バーの背後にもコンテン ツを描画することが推奨されている • アプリに対する没⼊感が増す https://developer.android.com/training/gestures/edge-to-edge
OPENREC.tvでの対応 主要画⾯、新規画⾯で随時対応中
Edge-to-Edgeにチャレンジ
None
windowを広げる Android 10 未満ではnavigation barの ⾃動着⾊が無いなど制約があるので、分岐が必要 重なってしまう 重なってしまう 描画領域を広げる
navigation bar / status barを透明に
背景⾊つける Status barの⾼さ確保 影が間に⼊ってしまうので消す Status barを避ける
背景⾊つける Navigation barの⾼さ確保 影が間に⼊ってしまうので消す Navigation barを避ける
Android View版との違い Insetsに変更があれば⾃動で反映される Jetpack Compose Android View + Compat
3ボタン + 横画⾯に注意! 重なっている
systemBar = statusBar + navigationBar 左右のpaddingを外側でつける 上のpaddingだけ 下のpaddingだけ
個別につけるとキレイ 上と左右にpaddingをつける 外側のpaddingは削除
Display Cutout領域にも描画する カメラと重なってしまう Display cutoutにも注意! Android 9 以降
safeDrawing = systemBars + displayCutout + ime imeは含みたくない場合 Display cutoutを避ける
スクロールに対応する
最後までスクロールできるように verticalScrollの後にpaddingを⼊れる スクロールに対応する
contentPaddingに指定 LazyColumnの場合 Bottomのサイズを取得
ソフトウェア キーボードを避ける
キーボードを避ける adjustResizeにしないと⼆重にpaddingがつく imePaddingはキーボード⾮表⽰のとき0になる Android 11 以降は アニメーションがつく
スクロール内のTextFieldに注意 Column + Modi fi er.verticalScroll LazyColumn キーボードに隠れてしまう Compose 1
. 3 alpha 02 で修正済み キーボードが閉じてしまう IssueTracker:# 1 7920 3700
ime Insetsは外側につける ime insetsはマージンとして設定 ime分はconsumeされている Compose 1 . 3 alpha
0 2 以降
スクロールとキーボードを連動する (android 1 1 以降 / experimental) Modifier.imeNestedScroll OptInが必要 逆順にする(必須)
Nested scrollを指定
まとめ • Jetpack Composeを使うと AndroidViewより⽐較的簡単に WindowInsetsを扱える • 横画⾯やdisplay cutoutに注意 •
ソフトウェアキーボードの 操作も⾏える 余談:DialogやMaterial 3 でWindowInsets対応が 進んでいるみたいです🎉