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.6k
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
原則から考える保守しやすいComposable関数設計
moriatsushi
3
710
Kotlin Coroutinesで共有リソースに正しくアクセスする
moriatsushi
6
4.9k
Jetpack Composeで Reduxっぽいアーキテクチャを試す
moriatsushi
2
1.1k
Kotlin MultiplatformでもKSPを使う
moriatsushi
2
830
実例から学ぶJetpack Composeのパフォーマンス改善
moriatsushi
3
7.2k
Jetpack Composeで UI Catalog Libraryを 作っている話 #android_meetup
moriatsushi
1
1.2k
良いコードとは何か - エンジニア新卒研修 スライド公開
moriatsushi
93
160k
AndroidでKotlin Coroutineを使うときの注意点 | CA BASE NEXT
moriatsushi
4
3.3k
新卒1年目で Androidアプリの アーキテクチャ移行を主導した話
moriatsushi
1
510
Other Decks in Technology
See All in Technology
企業の生成AIガバナンスにおけるエージェントとセキュリティ
lycorptech_jp
PRO
2
150
20250910_障害注入から効率的復旧へ_カオスエンジニアリング_生成AIで考えるAWS障害対応.pdf
sh_fk2
3
200
Rustから学ぶ 非同期処理の仕組み
skanehira
1
130
なぜSaaSがMCPサーバーをサービス提供するのか?
sansantech
PRO
8
2.7k
allow_retry と Arel.sql / allow_retry and Arel.sql
euglena1215
1
160
ガチな登山用デバイスからこんにちは
halka
1
230
COVESA VSSによる車両データモデルの標準化とAWS IoT FleetWiseの活用
osawa
1
260
落ちる 落ちるよ サーバーは落ちる
suehiromasatoshi
0
150
開発者を支える Internal Developer Portal のイマとコレカラ / To-day and To-morrow of Internal Developer Portals: Supporting Developers
aoto
PRO
1
440
dbt開発 with Claude Codeのためのガードレール設計
10xinc
2
1.1k
人工衛星のファームウェアをRustで書く理由
koba789
11
6.7k
未経験者・初心者に贈る!40分でわかるAndroidアプリ開発の今と大事なポイント
operando
3
310
Featured
See All Featured
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
A better future with KSS
kneath
239
17k
We Have a Design System, Now What?
morganepeng
53
7.8k
Music & Morning Musume
bryan
46
6.8k
Building Applications with DynamoDB
mza
96
6.6k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.8k
Scaling GitHub
holman
463
140k
Side Projects
sachag
455
43k
YesSQL, Process and Tooling at Scale
rocio
173
14k
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対応が 進んでいるみたいです🎉