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
320
Jetpack_Composeで_半円のプログレスバーを作った話
Swimmy
July 08, 2023
Tweet
Share
More Decks by Swimmy
See All by Swimmy
違いがワカルKotlinプログラマーへの道
reoandroider
0
84
違いのワカル Kotlinプログラマーへの道
reoandroider
0
170
[Jetpack Compose] 原理から見るSkippable対応
reoandroider
0
200
Androdアプリ開発におけるネストスクロール問題と向き合うの説明用途
reoandroider
0
1.8k
Androdアプリ開発におけるネストスクロール問題と向き合うの説明用途
reoandroider
0
1.8k
Androdアプリ開発におけるネストスクロール問題と向き合うの説明用途~NestedScrollInteropConnectionは何してるの?編~
reoandroider
0
1.6k
Roborazziを最大限に活用する(導入編)
reoandroider
0
200
Master of NestedScroll
reoandroider
0
9.5k
Compose「急いで」キャッチアップする
reoandroider
0
10
Featured
See All Featured
Gamification - CAS2011
davidbonilla
78
4.9k
How GitHub (no longer) Works
holman
305
140k
What's in a price? How to price your products and services
michaelherold
239
11k
How GitHub Uses GitHub to Build GitHub
holman
471
290k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
20
7.2k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
26
1.8k
Clear Off the Table
cherdarchuk
89
320k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
52k
BBQ
matthewcrist
82
9k
Music & Morning Musume
bryan
43
5.9k
No one is an island. Learnings from fostering a developers community.
thoeni
17
2.8k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
23
1.9k
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