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

Transcript

1. Harada Reo DroidKaigi #名古屋 .collect {} Jetpack Composeで 半円のプログレスバーを作った話
2. Harada Reo CyberAgent Inc. どすこい塾 DroidKaigi Staff @RunningReo 自己紹介 / Introduction
3. LTの目的 Jetpack Composeで 半円のプログレスバーを 作った時の経験談を話す ※誰かの役に立てるといいな🤩
4. LTの目次 1 半円のプログレスバーのデザイン 2 Layout Composableを使ってみる 3 端末依存をなくすために 4 今回の経験談から得られる学び
5. 半円のプログレスバーのデザイン １
6. 半円のプログレスバーのデザイン とあるプロダクト開発にて 以下のようなデザインを実装することに。
7. 半円のプログレスバーのデザイン どう実装する？ 半円ってどう実装するんだろう？ 画像のサイズはどうしよう？ 端末依存は起きない？ テキストの位置が絶妙・・ 他のコンポーネントも配置予定・・
8. Layout Composableについて ２
9. Layout Composableについて Composeが画面に届くまでは以下のプロセスを踏んでいる 多くの場合内部で行われているので意識することがない
10. Layout Composableについて コンポーネントのサイズの計算と配置に踏み込んだのが Layout Composable(SubcomposeLayout)
11. Layout Composableについて 半円はCanvasを用いると簡単に実装できる ※ 高さを２倍にする必要あり 描画エリアが埋まらない
12. Layout Composableについて 計測フェーズ ポイントは制約を決めること Constraintsに適切な値を。 最大の幅と高さ 最小の幅と高さ
13. 配置フェーズ ポイントは エリアの確保とX座標の計算 計測フェーズで得た幅を 活用してX座標を決める Layout Composableについて
14. Layout Composableの流れ contentに関わるコンポーネントを全て渡す ↓ 画面幅や他のコンポーネントのサイズから制約を定義 ↓ measurePolicy内でコンポーネントの計測 ↓ 計測値などからX座標を定義して配置 L a y o u t C o m p o s a b l e に つ い て
15. Layout Composableのメリデメの話 メリット 計測と配置に踏み込むことで殆どのレイアウトが可能 デメリット どうしても可読性が落ちる 宣言的UIによるコードの簡略化の旨みがなくなる 新卒が多いチームだと使うのは避けたほうが良いかも Layout Composableについて
16. 端末依存をなくすために ３
17. 端末依存をなくすために タブレット 小さな端末 全ての端末で同じデザインを再現するのは難しい しかし、ちょうど良いラインを探す ※ もっと最適なやり方があれば教えてください（Modifierのカスタムなど）
18. 端末依存をなくすために 画面サイズに応じて Canvasのstroke値や サイズを微調整する
19. 端末依存をなくすために タブレット 小さな端末 どの端末でも同じレイアウトを描画するのは難しいが よい調整ラインを見つけることができた ※ タブレットの使用率が低いアプリ
20. 今回の経験談から得られる学び ４
21. 今回の経験から得られる学び Layout Composableの 使い方について！！
22. 今回の経験から得られる学び ではなく・・・
23. 今回の経験から得られる学び エンジニアの意地と 全体最適化について
24. 今回の経験から得られる学び エンジニアとして任された実装を完璧にこなすことは大事。 ＝エンジニアの意地 しかし、限られた時間の中で優先度順位をつけて重要なものを クリアにして損切りできることも大事にしたい。 ＝全体最適化
25. 今回の経験から得られる学び 今回のケースだと・・ 完璧な実装はできていない 95％の現状から残り5％をやり切るには1日かかる それに対して投資コストに対する効果を天秤にかける 考え方もエンジニアにとって重要 エンジニアの意地を暴走させない（自戒）
26. Thank you