Upgrade to Pro — share decks privately, control downloads, hide ads and more …

WindowInsets 2022 feat. Jetpack Compose #ca_aab

WindowInsets 2022 feat. Jetpack Compose #ca_aab

Mori Atsushi

August 18, 2022
Tweet

More Decks by Mori Atsushi

Other Decks in Technology

Transcript

  1. WindowInsets
    2022

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

    View full-size slide

  2. 森 篤史
    2019年度 新卒⼊社


    Androidアプリエンジニア


    Next Experts (Android)


    Jetpack Composeゼミ代表

    2019年度 未踏スーパークリエータ


    @at_sushi_at Mori-Atsushi

    View full-size slide

  3. Jetpack Composeゼミ
    • CAゼミ制度の1つ


    • 特定のテーマに沿って技術者が⾃主的に集まり、

    技術⼒の向上を⽬指して活動


    • Jetpack Composeゼミの活動(メンバー7⼈)


    • 隔週の勉強会で最新情報キャッチアップ


    • プロダクション導⼊の情報共有


    • OSSの公開 / 技術記事の執筆

    View full-size slide

  4. IUUQTDZCFSBHFOU[FNJHJUIVCJPLBUBMPH
    Katalog
    • UIίϯ
    ポ
    ʔωϯτ΍
    ペ
    ʔ
    ジ
    Λొ࿥͢Δ

    σόοά༻Ξ
    プ
    Ϧέʔγϣϯ
    • DSLͰهड़Ͱ͖Δ
    • Jetpack ComposeͷଞɺAndroid View΍
    DataBinding / ViewBindingʹରԠ
    A UI Catalog Library made with Jetpack Compose

    View full-size slide

  5. • ⾼画質かつ業界最⾼⽔準の低遅延なライブ配信


    • サブスク / PPV


    • 様々なジャンルの配信(eスポーツ⼤会、声優、⾳楽ライブ 他)
    ゲーム実況やプレイ動画が楽しめるライブ動画プラットフォーム

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  10. 1
    .WindowInsetsとは


    2
    .Edge-to-Edgeにチャレンジ


    3
    .スクロールに対応する


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

    View full-size slide

  11. WindowInsetsとは

    View full-size slide

  12. WindowInsets
    • Status bar


    • Navigation bar


    • Software keyboard(IME)


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

    避ける必要がある

    View full-size slide

  13. ジェスチャーナビゲーションと

    Edge-to-Edge対応
    • Android
    10
    からジェスチャーナビゲー
    ションが追加された


    • ナビゲーション バーの背後にもコンテン
    ツを描画することが推奨されている


    • アプリに対する没⼊感が増す
    https://developer.android.com/training/gestures/edge-to-edge

    View full-size slide

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

    View full-size slide

  15. Edge-to-Edgeにチャレンジ

    View full-size slide

  16. windowを広げる
    Android
    10
    未満ではnavigation barの

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  25. スクロールに対応する

    View full-size slide

  26. 最後までスクロールできるように


    verticalScrollの後にpaddingを⼊れる
    スクロールに対応する

    View full-size slide

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

    View full-size slide

  28. ソフトウェア

    キーボードを避ける

    View full-size slide

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


    アニメーションがつく

    View full-size slide

  30. スクロール内のTextFieldに注意
    Column + Modi
    fi
    er.verticalScroll LazyColumn
    キーボードに隠れてしまう


    Compose
    1
    .
    3
    alpha
    02
    で修正済み
    キーボードが閉じてしまう


    IssueTracker:#
    1 7920 3700

    View full-size slide

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

    View full-size slide

  32. スクロールとキーボードを連動する


    (android
    1 1
    以降 / experimental)
    Modifier.imeNestedScroll
    OptInが必要
    逆順にする(必須)
    Nested scrollを指定

    View full-size slide

  33. まとめ
    • Jetpack Composeを使うと
    AndroidViewより⽐較的簡単に
    WindowInsetsを扱える


    • 横画⾯やdisplay cutoutに注意


    • ソフトウェアキーボードの

    操作も⾏える
    余談:DialogやMaterial
    3
    でWindowInsets対応が

    進んでいるみたいです🎉

    View full-size slide