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

Jetpack_Composeで_半円のプログレスバーを作った話

Swimmy
July 08, 2023
260

 Jetpack_Composeで_半円のプログレスバーを作った話

Swimmy

July 08, 2023
Tweet

Transcript

  1. Harada Reo
    DroidKaigi #名古屋
    .collect {}
    Jetpack Composeで
    半円のプログレスバーを作った話

    View full-size slide

  2. Harada Reo
    CyberAgent Inc.
    どすこい塾
    DroidKaigi Staff
    @RunningReo
    自己紹介 / Introduction

    View full-size slide

  3. LTの目的
    Jetpack Composeで
    半円のプログレスバーを
    作った時の経験談を話す
    ※誰かの役に立てるといいな🤩

    View full-size slide

  4. LTの目次
    1 半円のプログレスバーのデザイン
    2 Layout Composableを使ってみる
    3 端末依存をなくすために
    4 今回の経験談から得られる学び

    View full-size slide

  5. 半円のプログレスバーのデザイン

    View full-size slide

  6. 半円のプログレスバーのデザイン
    とあるプロダクト開発にて
    以下のようなデザインを実装することに。


    View full-size slide

  7. 半円のプログレスバーのデザイン
    どう実装する?


    半円ってどう実装するんだろう?
    画像のサイズはどうしよう?
    端末依存は起きない?
    テキストの位置が絶妙・・
    他のコンポーネントも配置予定・・

    View full-size slide

  8. Layout Composableについて

    View full-size slide

  9. Layout Composableについて


    Composeが画面に届くまでは以下のプロセスを踏んでいる
    多くの場合内部で行われているので意識することがない

    View full-size slide

  10. Layout Composableについて


    コンポーネントのサイズの計算と配置に踏み込んだのが
    Layout Composable(SubcomposeLayout)

    View full-size slide

  11. Layout Composableについて


    半円はCanvasを用いると簡単に実装できる
    ※ 高さを2倍にする必要あり
    描画エリアが埋まらない

    View full-size slide

  12. Layout Composableについて


    計測フェーズ
    ポイントは制約を決めること
    Constraintsに適切な値を。
    最大の幅と高さ
    最小の幅と高さ

    View full-size slide



  13. 配置フェーズ
    ポイントは
    エリアの確保とX座標の計算
    計測フェーズで得た幅を
    活用してX座標を決める
    Layout Composableについて

    View full-size slide



  14. Layout Composableの流れ
    contentに関わるコンポーネントを全て渡す

    画面幅や他のコンポーネントのサイズから制約を定義

    measurePolicy内でコンポーネントの計測

    計測値などからX座標を定義して配置
    L a y o u t C o m p o s a b l e に つ い て

    View full-size slide



  15. Layout Composableのメリデメの話
    メリット
    計測と配置に踏み込むことで殆どのレイアウトが可能
    デメリット
    どうしても可読性が落ちる
    宣言的UIによるコードの簡略化の旨みがなくなる
    新卒が多いチームだと使うのは避けたほうが良いかも
    Layout Composableについて

    View full-size slide

  16. 端末依存をなくすために

    View full-size slide



  17. 端末依存をなくすために
    タブレット 小さな端末
    全ての端末で同じデザインを再現するのは難しい
    しかし、ちょうど良いラインを探す
    ※ もっと最適なやり方があれば教えてください(Modifierのカスタムなど)

    View full-size slide



  18. 端末依存をなくすために
    画面サイズに応じて
    Canvasのstroke値や
    サイズを微調整する

    View full-size slide



  19. 端末依存をなくすために
    タブレット 小さな端末
    どの端末でも同じレイアウトを描画するのは難しいが
    よい調整ラインを見つけることができた
    ※ タブレットの使用率が低いアプリ

    View full-size slide

  20. 今回の経験談から得られる学び

    View full-size slide

  21. 今回の経験から得られる学び


    Layout Composableの
    使い方について!!

    View full-size slide

  22. 今回の経験から得られる学び


    ではなく・・・

    View full-size slide

  23. 今回の経験から得られる学び


    エンジニアの意地と
    全体最適化について

    View full-size slide

  24. 今回の経験から得られる学び


    エンジニアとして任された実装を完璧にこなすことは大事。
    =エンジニアの意地
    しかし、限られた時間の中で優先度順位をつけて重要なものを
    クリアにして損切りできることも大事にしたい。
    =全体最適化

    View full-size slide

  25. 今回の経験から得られる学び


    今回のケースだと・・
    完璧な実装はできていない
    95%の現状から残り5%をやり切るには1日かかる
    それに対して投資コストに対する効果を天秤にかける
    考え方もエンジニアにとって重要
    エンジニアの意地を暴走させない(自戒)

    View full-size slide