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.5k
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
4.5k
Jetpack Composeで Reduxっぽいアーキテクチャを試す
moriatsushi
2
1k
Kotlin MultiplatformでもKSPを使う
moriatsushi
1
750
実例から学ぶJetpack Composeのパフォーマンス改善
moriatsushi
3
6.9k
Jetpack Composeで UI Catalog Libraryを 作っている話 #android_meetup
moriatsushi
1
1.2k
良いコードとは何か - エンジニア新卒研修 スライド公開
moriatsushi
92
150k
AndroidでKotlin Coroutineを使うときの注意点 | CA BASE NEXT
moriatsushi
4
3.2k
新卒1年目で Androidアプリの アーキテクチャ移行を主導した話
moriatsushi
1
480
マルチモジュールでandroidアプリを救う | Scramble Tech #0
moriatsushi
1
1.1k
Other Decks in Technology
See All in Technology
生成AIによるCloud Native基盤構築の可能性と実践的ガードレールの敷設について
nwiizo
5
450
YOLOv10~v12
tenten0727
4
940
似たような課題が何度も蘇ってくるゾンビふりかえりを撲滅するため、ふりかえりのテーマをフォーカスしてもらった話 / focusing on the theme
naitosatoshi
0
450
Road to Go Gem #rubykaigi
sue445
0
390
LLM とプロンプトエンジニアリング/チューターをビルドする / LLM, Prompt Engineering and Building Tutors
ks91
PRO
1
250
[2025年4月版] Databricks Academy ラボ環境 利用開始手順 / Databricks Academy Labs Onboarding
databricksjapan
0
130
日経電子版 for Android の技術的課題と取り組み(令和最新版)/android-20250423
nikkei_engineer_recruiting
0
110
Spring Bootで実装とインフラをこれでもかと分離するための試み
shintanimoto
7
800
ソフトウェア開発現代史: "LeanとDevOpsの科学"の「科学」とは何か? - DORA Report 10年の変遷を追って - #DevOpsDaysTokyo
takabow
0
370
クラウド開発環境Cloud Workstationsの紹介
yunosukey
0
130
サーバレス、コンテナ、データベース特化型機能をご紹介。CloudWatch をもっと使いこなそう!
o11yfes2023
0
160
CBになったのでEKSのこともっと知ってもらいたい!
daitak
1
160
Featured
See All Featured
Testing 201, or: Great Expectations
jmmastey
42
7.5k
For a Future-Friendly Web
brad_frost
176
9.7k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.2k
StorybookのUI Testing Handbookを読んだ
zakiyama
29
5.6k
Faster Mobile Websites
deanohume
306
31k
Building an army of robots
kneath
304
45k
How GitHub (no longer) Works
holman
314
140k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
41
2.2k
How to Ace a Technical Interview
jacobian
276
23k
GitHub's CSS Performance
jonrohan
1030
460k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
19
1.1k
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対応が 進んでいるみたいです🎉