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
モバイルアプリ開発のためのDesign Doc実践ガイド
moriatsushi
2
510
原則から考える保守しやすいComposable関数設計
moriatsushi
3
720
Kotlin Coroutinesで共有リソースに正しくアクセスする
moriatsushi
6
5k
Jetpack Composeで Reduxっぽいアーキテクチャを試す
moriatsushi
2
1.1k
Kotlin MultiplatformでもKSPを使う
moriatsushi
2
840
実例から学ぶJetpack Composeのパフォーマンス改善
moriatsushi
3
7.3k
Jetpack Composeで UI Catalog Libraryを 作っている話 #android_meetup
moriatsushi
1
1.3k
良いコードとは何か - エンジニア新卒研修 スライド公開
moriatsushi
93
160k
AndroidでKotlin Coroutineを使うときの注意点 | CA BASE NEXT
moriatsushi
4
3.3k
Other Decks in Technology
See All in Technology
Azure Well-Architected Framework入門
tomokusaba
0
200
組織観点からIAM Identity CenterとIAMの設計を考える
nrinetcom
PRO
1
150
Oracle Cloud Infrastructure:2025年9月度サービス・アップデート
oracle4engineer
PRO
0
360
GC25 Recap+: Advancing Go Garbage Collection with Green Tea
logica0419
1
350
Escaping_the_Kraken_-_October_2025.pdf
mdalmijn
0
110
実装で解き明かす並行処理の歴史
zozotech
PRO
1
260
動画データのポテンシャルを引き出す! Databricks と AI活用への奮闘記(現在進行形)
databricksjapan
0
130
フルカイテン株式会社 エンジニア向け採用資料
fullkaiten
0
9k
空間を設計する力を考える / 20251004 Naoki Takahashi
shift_evolve
PRO
3
250
Geospatialの世界最前線を探る [2025年版]
dayjournal
3
470
SwiftUIのGeometryReaderとScrollViewを基礎から応用まで学び直す:設計と活用事例
fumiyasac0921
0
120
Trust as Infrastructure
bcantrill
0
290
Featured
See All Featured
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
What's in a price? How to price your products and services
michaelherold
246
12k
KATA
mclloyd
32
14k
Done Done
chrislema
185
16k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
53k
Producing Creativity
orderedlist
PRO
347
40k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
How to train your dragon (web standard)
notwaldorf
96
6.3k
The Pragmatic Product Professional
lauravandoore
36
6.9k
Mobile First: as difficult as doing things right
swwweet
224
9.9k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
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対応が 進んでいるみたいです🎉