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
5分でざっくり理解する Jetpack Compose
Search
yuki anzai
March 05, 2021
0
210
5分でざっくり理解する Jetpack Compose
yuki anzai
March 05, 2021
Tweet
Share
More Decks by yuki anzai
See All by yuki anzai
try-catchからrunCatchingに_移行した話.pdf
kuromame
6
3.1k
Flux + Repositoryへリアーキテクチャ後にテストを書き始めて1ヶ月経った話
kuromame
4
340
Featured
See All Featured
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.1k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
665
120k
A Philosophy of Restraint
colly
203
16k
The Power of CSS Pseudo Elements
geoffreycrofte
73
5.3k
Practical Orchestrator
shlominoach
186
10k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
25
1.8k
Done Done
chrislema
181
16k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
506
140k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
109
49k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
Transcript
5分でざっくり理解する Jetpack Compose 2021/03/05
自己紹介 安齋祐紀(あんざいゆうき) Twitter :@off2white Connpass: @kuromame 趣味 -
リアル脱出ゲーム、ボードゲーム - 締め切り駆動登壇 所属:株式会社Mobility Technologies - タクシー配車アプリ「GO」 - 乗務員様向け車載システム(Android)の開発 - 基本機能+ナビとか配車システムのgRPC連携とか - 車や位置情報チップからの情報をByteで受け取って解析したりとかとか
Vol.2 車載Androidシステムの技術と開発チーム 3/9(火) 19:00〜19:50
https://android-developers.googleblog.com/2021/02/announcing-jetpack-compose-beta.html
https://developer.android.com/dev-challenge?hl=ur
今日話すこと - Jetpack Composeは何がいいのか - 実際にはどんな風に使うのか - 現状使ってみた感想
Jetpack Composeは何が良いのか
今までの方法①state(data)をxmlにbindする XML Fragment/Activity state TextView Layout state TextView Layout binding
今までの方法②viewをFragmentから参照してアクセス XML Fragment/Activity TextView Layout state TextView Layout change
幾多の Androider の時間が吸われてい くやつ① (lifecycleOwner つけ忘れ問題 ) val binding =
FragmentLoginBinding.bind(view) binding.lifecycleOwner = viewLifecycleOwner
幾多の Androider の時間が吸われてい くやつ② (databind し忘れ問題 ) val binding =
FragmentLoginBinding.bind(view) binding.lifecycleOwner = viewLifecycleOwner binding.viewModel = viewModel
幾多の Androider の時間が吸われてい くやつ③ ( 状態によって View の表示を切り替え るとき、一生懸命 View
の状態管理をす る ) // いったんクリアする binding.text.visible = View.GONE binding.img.visible = View.GONE binding.progressBar.visible = View.GONE . . . when (state){ AState -> {...} BState -> {...} CState -> {...} DState -> {...} }
何が問題なのか - View に状態を Sync する必要がある - 状態の二重管理はやっぱり辛い - View
が mutable である - 状態ごとに View を変化させるということは、前の View の状態を常に考慮しないといけない ここら辺で我々は疲弊してきた
宣言的UI Compose コードでUIをimmutableに宣言する
@Composable fun AdoptedChildCard( adoptedChild: List<AdoptedChild>, navHostController: NavHostController ) { Column(
Modifier .fillMaxWidth() .verticalScroll(rememberScrollState()) ) { adoptedChild.forEach { Card( elevation = 8.dp, modifier = Modifier.padding(16.dp)) { Stateを変更されたら
@Composable fun AdoptedChildCard( adoptedChild: List<AdoptedChild>, navHostController: NavHostController ) { Column(
Modifier .fillMaxWidth() .verticalScroll(rememberScrollState()) ) { adoptedChild.forEach { Card( elevation = 8.dp, modifier = Modifier.padding(16.dp)) { UI定義が一回実行される (ソースコード)
@Composable fun AdoptedChildCard( adoptedChild: List<AdoptedChild>, // state1 navHostController: NavHostController )
{ Column( Modifier .fillMaxWidth() .verticalScroll(rememberScrollState()) ) { adoptedChild.forEach { Card( elevation = 8.dp, modifier = Modifier.padding(16.dp)) { State1 View1
@Composable fun AdoptedChildCard( adoptedChild: List<AdoptedChild>, // state2 navHostController: NavHostController )
{ Column( Modifier .fillMaxWidth() .verticalScroll(rememberScrollState()) ) { adoptedChild.forEach { Card( elevation = 8.dp, modifier = Modifier.padding(16.dp)) { State2 View2 Stateに対してViewがimmutable
宣言的UI(Compose)のまとめ - 今まで View と Model 間でデータの Sync を行っていたし、途中で状態を切り替えてた -
これがすごいバグを生みがちだった - Compose を使うことで、データにつき一つの View を生成する - View が immutable になることで上記の問題が解決される - 世界的に宣言的 UI への移行が進んでいる(って Google さんは言ってる) - Flutter - SwiftUI
実際にどんな風に使うのか
class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState) setContent { } } } MainActivityなどにsetContent {} を追加する
class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState) setContent { Text (text = "Hello World!") } } } TextなどのUIのコンポーネントを記述する
class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState) setContent { Greeting (name = "YUKI") } } } @Composable fun Greeting(name: String) { Text (text = "Hello $name!") } @Composableアノテーションをつけることで Composableメソッドを作成することができる。 (これらはActivityではなく、別ファイルに記載できる)
これだけ!
詳しい使い方は Zenn.devに書いたので 見てね! https://zenn.dev/96mame/articles/9 e2a761ba57656
現状使ってみた感想
使ってみた感想 よかったこと - 個人的には使いやすい - View の状態がすごい多い箇所で使いたい - Navigation も使えるし便利。
Fragment いらないかも。 - Flutter と使い心地が似ているらしい(同僚談 - Flutter やることになった時にスムーズに移行できるかも( UI 周りだけだけど) よくなかったこと - プレビュー機能がとても遅い - プレビューを見るだけでビルド一回必要 - 実機にインストールした方が確認が早いまである - これが改善されないと xml の方が良いかもと思うくらい
認識間違ってたら ご連絡ください!!