Tweet
Tweet

Slide 1

Slide 1 text

WindowInsets 2022 feat. Jetpack Compose Mori Atsushi 20 22 - 08 - 18 #ca_aab

Slide 2

Slide 2 text

森 篤史 2019年度 新卒⼊社 Androidアプリエンジニア Next Experts (Android) Jetpack Composeゼミ代表 
 2019年度 未踏スーパークリエータ @at_sushi_at Mori-Atsushi

Slide 3

Slide 3 text

Jetpack Composeゼミ • CAゼミ制度の1つ • 特定のテーマに沿って技術者が⾃主的に集まり、 
 技術⼒の向上を⽬指して活動 • Jetpack Composeゼミの活動（メンバー7⼈） • 隔週の勉強会で最新情報キャッチアップ • プロダクション導⼊の情報共有 • OSSの公開 / 技術記事の執筆

Slide 4

Slide 4 text

IUUQTDZCFSBHFOU[FNJHJUIVCJPLBUBMPH Katalog • UIίϯ ポ ʔωϯτ΍ ペ ʔ ジ Λొ࿥͢Δ
 σόοά༻Ξ プ Ϧέʔγϣϯ • DSLͰهड़Ͱ͖Δ • Jetpack ComposeͷଞɺAndroid View΍ DataBinding / ViewBindingʹରԠ A UI Catalog Library made with Jetpack Compose

Slide 5

Slide 5 text

• ⾼画質かつ業界最⾼⽔準の低遅延なライブ配信 • サブスク / PPV • 様々なジャンルの配信（eスポーツ⼤会、声優、⾳楽ライブ 他） ゲーム実況やプレイ動画が楽しめるライブ動画プラットフォーム

Slide 6

Slide 6 text

OPENREC.tvとJetapck Compose 10画⾯以上を完全移⾏ コンポーネントを移⾏ 新機能はComposeで

Slide 7

Slide 7 text

過去の登壇 https://ca-base-next.cyberagent.co.jp/ 202 2 /sessions/jetpack-compose-openrec/

Slide 8

Slide 8 text

Jetpack Compose 1 . 2 • LazyHorizontalGrid, LazyVerticalGridͷstableԽ • WindowInsets APIͷ௥Ճ • Android ViewͱComposeͷnested scrollαϙʔτ • Compose + RecyclerViewͷύϑΥʔϚϯεվળ • μ΢ϯϩʔυϑΥϯτͷαϙʔτʢexperimentalʣ • includeFontPaddingͷαϙʔτʢexperimentalʣ 2022年7⽉ stable release 🎉

Slide 9

Slide 9 text

Jetpack Compose 1 . 2 2022年7⽉ stable release 今⽇はここの話 • LazyHorizontalGrid, LazyVerticalGridͷstableԽ • WindowInsets APIͷ௥Ճ • Android ViewͱComposeͷnested scrollαϙʔτ • Compose + RecyclerViewͷύϑΥʔϚϯεվળ • μ΢ϯϩʔυϑΥϯτͷαϙʔτʢexperimentalʣ • includeFontPaddingͷαϙʔτʢexperimentalʣ

Slide 10

Slide 10 text

1 .WindowInsetsとは 2 .Edge-to-Edgeにチャレンジ 3 .スクロールに対応する 4 .ソフトウェアキーボードを避ける

Slide 11

Slide 11 text

WindowInsetsとは

Slide 12

Slide 12 text

WindowInsets • Status bar • Navigation bar • Software keyboard(IME) • Display cutout(ノッチ) システムによって描画される領域 Status bar Navigation bar Software Keyboard Display cutout 重要なコンテンツが重ならないように 
 避ける必要がある

Slide 13

Slide 13 text

ジェスチャーナビゲーションと 
 Edge-to-Edge対応 • Android 10 からジェスチャーナビゲー ションが追加された • ナビゲーション バーの背後にもコンテン ツを描画することが推奨されている • アプリに対する没⼊感が増す https://developer.android.com/training/gestures/edge-to-edge

Slide 14

Slide 14 text

OPENREC.tvでの対応 主要画⾯、新規画⾯で随時対応中

Slide 15

Slide 15 text

Edge-to-Edgeにチャレンジ

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

windowを広げる Android 10 未満ではnavigation barの 
 ⾃動着⾊が無いなど制約があるので、分岐が必要 重なってしまう 重なってしまう 描画領域を広げる navigation bar / status barを透明に

Slide 18

Slide 18 text

背景⾊つける Status barの⾼さ確保 影が間に⼊ってしまうので消す Status barを避ける

Slide 19

Slide 19 text

背景⾊つける Navigation barの⾼さ確保 影が間に⼊ってしまうので消す Navigation barを避ける

Slide 20

Slide 20 text

Android View版との違い Insetsに変更があれば⾃動で反映される Jetpack Compose Android View + Compat

Slide 21

Slide 21 text

3ボタン + 横画⾯に注意！ 重なっている

Slide 22

Slide 22 text

systemBar = statusBar + navigationBar 左右のpaddingを外側でつける 上のpaddingだけ 下のpaddingだけ

Slide 23

Slide 23 text

個別につけるとキレイ 上と左右にpaddingをつける 外側のpaddingは削除

Slide 24

Slide 24 text

Display Cutout領域にも描画する カメラと重なってしまう Display cutoutにも注意！ Android 9 以降

Slide 25

Slide 25 text

safeDrawing = systemBars + displayCutout + ime imeは含みたくない場合 Display cutoutを避ける

Slide 26

Slide 26 text

スクロールに対応する

Slide 27

Slide 27 text

最後までスクロールできるように verticalScrollの後にpaddingを⼊れる スクロールに対応する

Slide 28

Slide 28 text

contentPaddingに指定 LazyColumnの場合 Bottomのサイズを取得

Slide 29

Slide 29 text

ソフトウェア 
 キーボードを避ける

Slide 30

Slide 30 text

キーボードを避ける adjustResizeにしないと⼆重にpaddingがつく imePaddingはキーボード⾮表⽰のとき0になる Android 11 以降は アニメーションがつく

Slide 31

Slide 31 text

スクロール内のTextFieldに注意 Column + Modi fi er.verticalScroll LazyColumn キーボードに隠れてしまう Compose 1 . 3 alpha 02 で修正済み キーボードが閉じてしまう IssueTracker：# 1 7920 3700

Slide 32

Slide 32 text

ime Insetsは外側につける ime insetsはマージンとして設定 ime分はconsumeされている Compose 1 . 3 alpha 0 2 以降

Slide 33

Slide 33 text

スクロールとキーボードを連動する (android 1 1 以降 / experimental) Modifier.imeNestedScroll OptInが必要 逆順にする(必須) Nested scrollを指定

Slide 34

Slide 34 text

まとめ • Jetpack Composeを使うと AndroidViewより⽐較的簡単に WindowInsetsを扱える • 横画⾯やdisplay cutoutに注意 • ソフトウェアキーボードの 
 操作も⾏える 余談：DialogやMaterial 3 でWindowInsets対応が 
 進んでいるみたいです🎉