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
6
3.8k
Jetpack Composeで Reduxっぽいアーキテクチャを試す
moriatsushi
2
820
Kotlin MultiplatformでもKSPを使う
moriatsushi
1
650
実例から学ぶJetpack Composeのパフォーマンス改善
moriatsushi
2
6.3k
Jetpack Composeで UI Catalog Libraryを 作っている話 #android_meetup
moriatsushi
1
1k
良いコードとは何か - エンジニア新卒研修 スライド公開
moriatsushi
86
140k
AndroidでKotlin Coroutineを使うときの注意点 | CA BASE NEXT
moriatsushi
4
2.9k
新卒1年目で Androidアプリの アーキテクチャ移行を主導した話
moriatsushi
1
410
マルチモジュールでandroidアプリを救う | Scramble Tech #0
moriatsushi
1
1k
Other Decks in Technology
See All in Technology
エンジニア向け会社紹介資料
caddi_eng
14
270k
Brakeman を欺く - Kashiwa.rb #4
kozy4324
1
100
LLMOps : ΔMLOps
shuntaito
13
2.1k
JAWS-UG 事務局 の「これまで」から みんなで「ここから」を考えよう
miu_crescent
2
140
Nuxt × Vue Router の力を最大限に引き出す機能を紹介
ytr0903
2
330
外部カンファレンスで登壇しよう! 〜「強い」エンジニアへの一歩を踏み出す〜
logica0419
4
140
AIとともに歩んだライブラリアップデートの道のり/ vue-fes-japan-2024-link-and-motivation
lmi
2
2.1k
Bluesky 2019〜2022
yamarten
1
120
WebRTC と AI の組み合わせ
tnoho
0
100
Azure AI servicesと歯のおはなし/AzureTravelers_Fukuoka2024_baba
nina01
1
110
ゼロからはじめる生成AI〜AWS認定とハンズオンで学ぶ初心者の道〜
kenichinakamura
0
140
LeSS Yoake 2024 スポンサーセッション
riki_hiraoka
0
160
Featured
See All Featured
Scaling GitHub
holman
458
140k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
Practical Orchestrator
shlominoach
186
10k
Optimising Largest Contentful Paint
csswizardry
31
2.9k
Embracing the Ebb and Flow
colly
84
4.4k
Building Adaptive Systems
keathley
38
2.2k
Git: the NoSQL Database
bkeepers
PRO
425
64k
The Pragmatic Product Professional
lauravandoore
31
6.2k
4 Signs Your Business is Dying
shpigford
180
21k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
3
340
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.8k
Happy Clients
brianwarren
97
6.7k
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対応が 進んでいるみたいです🎉