Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Jetpack Compose
TakuSemba
May 21, 2019
Technology
3
2.6k
Jetpack Compose
TakuSemba
May 21, 2019
Tweet
Share
More Decks by TakuSemba
See All by TakuSemba
Customize & Debug ExoPlayer @droidkaigi 2020
takusemba
0
1.4k
Protobuf in Kotlin
takusemba
2
1.3k
Single Activity with MVVM
takusemba
4
940
KotlinConf Report @ca.kt#7
takusemba
2
310
Request in a QUIC way @shibuya.apk#28
takusemba
2
670
Lint for Kotlin @R.kt#3
takusemba
3
1.1k
Auto Release @potatochips#48
takusemba
1
980
Media streaming on Android @droidkaigi 2018
takusemba
6
7.6k
gRPC on Android @DroidconSF Report
takusemba
1
430
Other Decks in Technology
See All in Technology
Optimizing your Swift code
kateinoigakukun
0
1.3k
立ち止まっても、寄り道しても / even if I stop, even if I take a detour
katoaz
0
160
日経電子版だけじゃない! 日経の新規Webメディアの開発 - NIKKEI Tech Talk #3
sztm
0
150
20230121_データ分析系コミュニティ_サテライト企画
doradora09
0
520
FlexScan HD2452Wの 後継を探して
tring
0
5.6k
S3とCloudWatch Logsの見直しから始めるコスト削減 / Cost saving S3 and CloudWatch Logs
shonansurvivors
0
190
AI Builderについて
miyakemito
0
840
Startup Studio Sereal / Culture Deck
sereal
0
640
OCIコンテナサービス関連の技術詳細 /oke-ocir-details
oracle4engineer
PRO
0
760
経営統合をきっかけに会社をエンジニアリングした話 / btconjp-2023
carta_engineering
0
140
ROS_Japan_UG_#49_LT
maeharakeisuke
0
210
cdk deployに必要な権限ってなんだ?
kinyok
0
150
Featured
See All Featured
Build your cross-platform service in a week with App Engine
jlugia
221
17k
The Language of Interfaces
destraynor
149
21k
A Tale of Four Properties
chriscoyier
149
21k
What’s in a name? Adding method to the madness
productmarketing
12
1.9k
10 Git Anti Patterns You Should be Aware of
lemiorhan
643
54k
Rails Girls Zürich Keynote
gr2m
87
12k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
500
130k
Support Driven Design
roundedbygravity
88
8.9k
GraphQLとの向き合い方2022年版
quramy
20
9.8k
The Straight Up "How To Draw Better" Workshop
denniskardys
226
130k
Principles of Awesome APIs and How to Build Them.
keavy
117
15k
What's new in Ruby 2.0
geeforr
336
30k
Transcript
+FUQBDL$PNQPTF TakuSemba CyberAgent.Inc
@takusemba https://github.com/TakuSemba
+FUQBDL$PNQPTF
+FUQBDL$PNQPTF https://www.youtube.com/watch?v=VsStyq4Lzxo
@Composable fun Greeting(name: String) { Text ("Hello $name!") }
@Composable fun Greeting(name: String) { Text ("Hello $name!") }
None
None
What’s Composable
What’s Composable ɾA new set of Jetpack UI widgets
What’s Composable ɾA new set of Jetpack UI widgets ɾA
kotlin compiler plugin
What’s Composable ɾA new set of Jetpack UI widgets ɾA
kotlin compiler plugin ɾFully compatible with your existing app/code
What’s Composable ɾA new set of Jetpack UI widgets ɾA
kotlin compiler plugin ɾFully compatible with your existing app/code ɾExperimental
@Composable
Text(“Hello world!”)
@Composable fun Greeting(name: String) { Text("Hello $name!") }
@Composable fun Greeting(name: String) { Text("Hello $name!") } class ComposeSampleActivity
: Activity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) } }
@Composable fun Greeting(name: String) { Text("Hello $name!") } class ComposeSampleActivity
: Activity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { CraneWrapper { Greeting("takusemba") } } } }
@Composable fun Greeting(name: String) { Text("Hello $name!") } class ComposeSampleActivity
: Activity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { CraneWrapper { Greeting("takusemba") } } } }
@Composable fun Greeting(name: String) { Text("Hello $name!") } class ComposeSampleActivity
: Activity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { CraneWrapper { Greeting("takusemba") } } } }
@Composable fun Greeting(name: String) { Text("Hello $name!") } class ComposeSampleActivity
: Activity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { CraneWrapper { Greeting("takusemba") } } } }
class ComposeSampleActivity : Activity() { override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState) setContent { CraneWrapper { MaterialTheme { Greeting("takusemba") } } } } } @Composable fun Greeting(name: String) { Text("Hello $name!") }
@Composable fun Greeting(name: String) { Text(text = "Hello $name!", style
= +themeTextStyle { h5 }) } class ComposeSampleActivity : Activity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { CraneWrapper { MaterialTheme { Greeting("takusemba") } } } } }
@Composable fun <T> ScrollingList( data: List<T>, body: @Composable()(T) -> Unit
) { // ... body(item) // ... }
@Composable fun <T> ScrollingList( data: List<T>, body: @Composable()(T) -> Unit
) { // ... body(item) // ... } @Composable fun NewsFeed(stories: List<Story>) { ScrollingList(stories) { story -> StoryWidget(story) } }
@Composable fun <T> ScrollingList( data: List<T>, body: @Composable()(T) -> Unit
) { // ... body(item) // ... } @Composable fun MenuList(items: List<Item>) { ScrollingList(items) { item -> when (item) { is FoodItem -> FoodWidget(item) is DrinkItem -> DrinkWidget(item) } } }
@Model
@Composable fun Greeting(name: String) { Text("Hello $name!") }
@Composable fun Greeting(name: String) { val count = +state {
0 } Column { Button(text = "greet", onClick = { count.value++ }) Text(text = "$name greeted ${count.value} times") } }
@Composable fun Greeting(name: String) { val count = +state {
0 } Column { Button(text = "greet", onClick = { count.value++ }) Text(text = "$name greeted ${count.value} times") } }
@Composable fun Greeting(name: String) { val count = +state {
0 } Column { Button(text = "greet", onClick = { count.value++ }) Text(text = "$name greeted ${count.value} times") } }
@Model class GreetCounter(var count: Int) { fun add() { count++
} fun substract() { count-- } } @Composable fun Greeting(name: String) { val count = +state { 0 } Column { Button(text = "greet", onClick = { count.value++ }) Text(text = "$name greeted ${count.value} times") } }
@Model class GreetCounter(var count: Int) { fun add() { count++
} fun substract() { count-- } } @Composable fun Greeting(name: String) { val counter = +memo { GreetCounter(0) } Column { Button(text = "greet", onClick = { count.add() }) Text(text = "$name greeted ${count.count} times") } }
@Composable fun Greeting(name: String) { val counter = +memo {
GreetCounter(0) } Column { Button(text = "greet", onClick = { count.add() }) Text(text = "$name greeted ${count.count} times") } } @Model class GreetCounter(var count: Int) { fun add() { count++ } fun substract() { count-- } }
@Model class LoginState(var username: String, var password: String) { val
valid: Boolean get() = username.isNotEmpty() && password.isNotEmpty() }
@Model class LoginState(var username: String, var password: String) { val
valid: Boolean get() = username.isNotEmpty() && password.isNotEmpty() } @Composable fun LoginScreen(onClick: () -> Unit) { val model = +memo { LoginState() } EditText( text=model.username, onTextChange={ text -> model.username = text } ) EditText( text=model.password, onTextChange={ text -> model.password = text } ) Button(text="Login", enabled=model.valid, onClick={ onClick() }) }
@Model class LoginState(var username: String, var password: String) { val
valid: Boolean get() = username.isNotEmpty() && password.isNotEmpty() } @Composable fun LoginScreen(onClick: () -> Unit) { val model = +memo { LoginState() } EditText( text=model.username, onTextChange={ text -> model.username = text } ) EditText( text=model.password, onTextChange={ text -> model.password = text } ) Button(text="Login", enabled=model.valid, onClick={ onClick() }) }
@GenerateView
@Composable fun Greeting(name: String) { Text ("Hello $name!") }
@Composable @GenerateView fun Greeting(name: String) { Text ("Hello $name!") }
@Composable @GenerateView fun Greeting(name: String) { Text ("Hello $name!") }
// In your existing xml <GreetingView app:name="takusemba" />
@Composable @GenerateView fun Greeting(name: String) { Text ("Hello $name!") }
// In your existing xml <GreetingView app:name="takusemba" /> // find view by Id val greeting = findViewById(R.id.greeting)
@Discussion
None
+FUQBDL$PNQPTF https://github.com/takusemba https://twitter.com/takusemba