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
Compose「急いで」キャッチアップする
Search
Swimmy
April 12, 2022
0
10
Compose「急いで」キャッチアップする
Swimmy
April 12, 2022
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
Jetpack_Composeで_半円のプログレスバーを作った話
reoandroider
0
320
Featured
See All Featured
Happy Clients
brianwarren
94
6.6k
The Power of CSS Pseudo Elements
geoffreycrofte
64
5.2k
Web Components: a chance to create the future
zenorocha
307
41k
Designing for Performance
lara
604
67k
From Idea to $5000 a Month in 5 Months
shpigford
377
46k
BBQ
matthewcrist
82
9k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Teambox: Starting and Learning
jrom
130
8.6k
Clear Off the Table
cherdarchuk
89
320k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
[RailsConf 2023] Rails as a piece of cake
palkan
35
4.4k
How STYLIGHT went responsive
nonsquared
93
5k
Transcript
Compose 「急いで」キャッチアップする
名はすいみー 23卒な学生
個人アプリの Composeの移行作業 やってるよ
4 やっていること 既存のアプリで移行作業 やってみる
5 FragmentをまるっとCompose化 override fun onCreateView( inflater: LayoutInflater, container: ViewGroup?, savedInstanceState:
Bundle? ): View { return ComposeView(requireContext()).apply { setContent { // In Compose World
6 アノテーションを付けたもの/付いてるものであ れば、他のcomposable関数を呼び出せる。 Text(“テキスト”) @Compose fun TextView() { Text(“テキスト”) }
7 Viewの配置はどうやるん? 基本的にはColumn / Row / Boxで対応できる 困ったらConstraintLayout Column {
Row { Text(“1行目”) Text(“1列目”) Text(“2行目”) Text(“2列目”) Text(“3行目”) Text(“3列目”) } }
8 ネスト多くなっちゃうけど大丈夫なん? →Composeは複数測定を回避してくれるので 大丈夫! とはいえ、ネスト祭りになると可読性と保守性が 落ちる 素直にConstraintLayout使っていき!
9 マージンどうやって取るん? Modifierを引数に渡す → padding基調 → marginを取るには上の階層にpadding Column(Modifier.padding(16.dp)) { Text(“一行目”,
Modifier.padding(8.dp)) Text(“二行目”, Modifier.padding(8.dp)) Text(“三行目”, Modifier.padding(16.dp)) }
10 素朴な疑問 ファイル分けどうやってやるん?? →AndroidViewだと悩まなかった 共通化出来るからこそ気になった
11 わいのGithub参考にしたらええ 詳しい人
12 アトミックデザイン的な分け方していた -> HogeComponent.ktにUIパーツの 最小単位(ボタン、テキスト)を作る。 → HogeScreen.ktに画面のcomposable関数を 一つだけ定義する @HogeScreen() =
{ … } →別画面でも使えるものに対しては commonディレクトリに入れてる
13 Viewの状態はどうするん? val name = remember { mutableStateOf(“”) } TextField(
value = name, onValueChange = { name = it } ) なんか、ViewModel不要論あるけども どうなん??
14 状態を保持するクラスは関心の分離の観点で必 要 今はライフサイクルの同期と コルーチンとの相性の点など で結果論ViewModelを使っているだけ 別にViewModelじゃなくてもよい 詳しい人
15 liveDataをstateとして扱う // ViewModel private val _name = MutableLiveData(“”) val
name: LiveData<String> = _name // Compose val name by viewModel.hoge.observeAsState(“”)
16 かんそう Composeそんなに難しくないよ! 初学者はComposeから! とはいえ、AndroidViewは業務でまだ触る
thank you