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
Jetpack_Composeで_半円のプログレスバーを作った話
Search
Swimmy
July 08, 2023
0
410
Jetpack_Composeで_半円のプログレスバーを作った話
Swimmy
July 08, 2023
Tweet
Share
More Decks by Swimmy
See All by Swimmy
違いがワカルKotlinプログラマーへの道
reoandroider
0
140
違いのワカル Kotlinプログラマーへの道
reoandroider
0
220
[Jetpack Compose] 原理から見るSkippable対応
reoandroider
1
330
Androdアプリ開発におけるネストスクロール問題と向き合うの説明用途
reoandroider
0
2.8k
Androdアプリ開発におけるネストスクロール問題と向き合うの説明用途
reoandroider
0
2.7k
Androdアプリ開発におけるネストスクロール問題と向き合うの説明用途~NestedScrollInteropConnectionは何してるの?編~
reoandroider
0
2.5k
Roborazziを最大限に活用する(導入編)
reoandroider
0
300
Master of NestedScroll
reoandroider
0
14k
Compose「急いで」キャッチアップする
reoandroider
0
24
Featured
See All Featured
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
740
Practical Orchestrator
shlominoach
189
11k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
For a Future-Friendly Web
brad_frost
179
9.8k
GitHub's CSS Performance
jonrohan
1031
460k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
Navigating Team Friction
lara
187
15k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Scaling GitHub
holman
460
140k
How GitHub (no longer) Works
holman
314
140k
Transcript
Harada Reo DroidKaigi #名古屋 .collect {} Jetpack Composeで 半円のプログレスバーを作った話
Harada Reo CyberAgent Inc. どすこい塾 DroidKaigi Staff @RunningReo 自己紹介 /
Introduction
LTの目的 Jetpack Composeで 半円のプログレスバーを 作った時の経験談を話す ※誰かの役に立てるといいな🤩
LTの目次 1 半円のプログレスバーのデザイン 2 Layout Composableを使ってみる 3 端末依存をなくすために 4 今回の経験談から得られる学び
半円のプログレスバーのデザイン 1
半円のプログレスバーのデザイン とあるプロダクト開発にて 以下のようなデザインを実装することに。
半円のプログレスバーのデザイン どう実装する? 半円ってどう実装するんだろう? 画像のサイズはどうしよう? 端末依存は起きない? テキストの位置が絶妙・・ 他のコンポーネントも配置予定・・
Layout Composableについて 2
Layout Composableについて Composeが画面に届くまでは以下のプロセスを踏んでいる 多くの場合内部で行われているので意識することがない
Layout Composableについて コンポーネントのサイズの計算と配置に踏み込んだのが Layout Composable(SubcomposeLayout)
Layout Composableについて 半円はCanvasを用いると簡単に実装できる ※ 高さを2倍にする必要あり 描画エリアが埋まらない
Layout Composableについて 計測フェーズ ポイントは制約を決めること Constraintsに適切な値を。 最大の幅と高さ 最小の幅と高さ
配置フェーズ ポイントは エリアの確保とX座標の計算 計測フェーズで得た幅を 活用してX座標を決める Layout Composableについて
Layout Composableの流れ contentに関わるコンポーネントを全て渡す ↓ 画面幅や他のコンポーネントのサイズから制約を定義 ↓ measurePolicy内でコンポーネントの計測 ↓ 計測値などからX座標を定義して配置 L
a y o u t C o m p o s a b l e に つ い て
Layout Composableのメリデメの話 メリット 計測と配置に踏み込むことで殆どのレイアウトが可能 デメリット どうしても可読性が落ちる 宣言的UIによるコードの簡略化の旨みがなくなる 新卒が多いチームだと使うのは避けたほうが良いかも Layout Composableについて
端末依存をなくすために 3
端末依存をなくすために タブレット 小さな端末 全ての端末で同じデザインを再現するのは難しい しかし、ちょうど良いラインを探す ※ もっと最適なやり方があれば教えてください(Modifierのカスタムなど)
端末依存をなくすために 画面サイズに応じて Canvasのstroke値や サイズを微調整する
端末依存をなくすために タブレット 小さな端末 どの端末でも同じレイアウトを描画するのは難しいが よい調整ラインを見つけることができた ※ タブレットの使用率が低いアプリ
今回の経験談から得られる学び 4
今回の経験から得られる学び Layout Composableの 使い方について!!
今回の経験から得られる学び ではなく・・・
今回の経験から得られる学び エンジニアの意地と 全体最適化について
今回の経験から得られる学び エンジニアとして任された実装を完璧にこなすことは大事。 =エンジニアの意地 しかし、限られた時間の中で優先度順位をつけて重要なものを クリアにして損切りできることも大事にしたい。 =全体最適化
今回の経験から得られる学び 今回のケースだと・・ 完璧な実装はできていない 95%の現状から残り5%をやり切るには1日かかる それに対して投資コストに対する効果を天秤にかける 考え方もエンジニアにとって重要 エンジニアの意地を暴走させない(自戒)
Thank you