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
230
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.2k
Flux + Repositoryへリアーキテクチャ後にテストを書き始めて1ヶ月経った話
kuromame
4
350
Featured
See All Featured
Code Review Best Practice
trishagee
68
18k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.3k
The Straight Up "How To Draw Better" Workshop
denniskardys
233
140k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
137
34k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
123
52k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
43
2.4k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.3k
Docker and Python
trallard
44
3.4k
Making Projects Easy
brettharned
116
6.2k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
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 の方が良いかもと思うくらい
認識間違ってたら ご連絡ください!!