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
27
Compose「急いで」キャッチアップする
Swimmy
April 12, 2022
Tweet
Share
More Decks by Swimmy
See All by Swimmy
Android16 Migration Stories ~Building a Pattern for Android OS upgrades~
reoandroider
0
120
違いがワカルKotlinプログラマーへの道
reoandroider
0
140
違いのワカル Kotlinプログラマーへの道
reoandroider
0
230
[Jetpack Compose] 原理から見るSkippable対応
reoandroider
1
340
Androdアプリ開発におけるネストスクロール問題と向き合うの説明用途
reoandroider
0
3k
Androdアプリ開発におけるネストスクロール問題と向き合うの説明用途
reoandroider
0
2.9k
Androdアプリ開発におけるネストスクロール問題と向き合うの説明用途~NestedScrollInteropConnectionは何してるの?編~
reoandroider
0
2.6k
Roborazziを最大限に活用する(導入編)
reoandroider
0
330
Master of NestedScroll
reoandroider
0
14k
Featured
See All Featured
The Cost Of JavaScript in 2023
addyosmani
55
9k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
230
22k
How STYLIGHT went responsive
nonsquared
100
5.8k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Visualization
eitanlees
149
16k
Balancing Empowerment & Direction
lara
5
690
Become a Pro
speakerdeck
PRO
29
5.6k
A designer walks into a library…
pauljervisheath
209
24k
Designing Experiences People Love
moore
142
24k
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