Jetpack Compose

Transcript

1. 1.

   +FUQBDL
   $PNQPTF TakuSemba CyberAgent.Inc

2. 2.

   @takusemba https://github.com/TakuSemba

3. 3.

   +FUQBDL
   $PNQPTF

4. 4.

   +FUQBDL
   $PNQPTF https://www.youtube.com/watch?v=VsStyq4Lzxo

5. 5.

   @Composable fun Greeting(name: String) { Text ("Hello $name!") }

6. 6.

   @Composable fun Greeting(name: String) { Text ("Hello $name!") }

7. 7.

   None
8. 8.

   None
9. 9.

   What’s Composable

10. 10.

    What’s Composable ɾA new set of Jetpack UI widgets

11. 11.

    What’s Composable ɾA new set of Jetpack UI widgets ɾA

    kotlin compiler plugin
12. 12.

    What’s Composable ɾA new set of Jetpack UI widgets ɾA

    kotlin compiler plugin ɾFully compatible with your existing app/code
13. 13.

    What’s Composable ɾA new set of Jetpack UI widgets ɾA

    kotlin compiler plugin ɾFully compatible with your existing app/code ɾExperimental
14. 14.

    @Composable

15. 15.

    Text(“Hello world!”)

16. 16.

    @Composable fun Greeting(name: String) { Text("Hello $name!") }

17. 17.

    @Composable fun Greeting(name: String) { Text("Hello $name!") } class ComposeSampleActivity

    : Activity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) } }
18. 18.

    @Composable fun Greeting(name: String) { Text("Hello $name!") } class ComposeSampleActivity

    : Activity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { CraneWrapper { Greeting("takusemba") } } } }
19. 19.

    @Composable fun Greeting(name: String) { Text("Hello $name!") } class ComposeSampleActivity

    : Activity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { CraneWrapper { Greeting("takusemba") } } } }
20. 20.

    @Composable fun Greeting(name: String) { Text("Hello $name!") } class ComposeSampleActivity

    : Activity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { CraneWrapper { Greeting("takusemba") } } } }
21. 21.

    @Composable fun Greeting(name: String) { Text("Hello $name!") } class ComposeSampleActivity

    : Activity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { CraneWrapper { Greeting("takusemba") } } } }
22. 22.

    class ComposeSampleActivity : Activity() { override fun onCreate(savedInstanceState: Bundle?) {

    super.onCreate(savedInstanceState) setContent { CraneWrapper { MaterialTheme { Greeting("takusemba") } } } } } @Composable fun Greeting(name: String) { Text("Hello $name!") }
23. 23.

    @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") } } } } }
24. 24.

    @Composable fun <T> ScrollingList( data: List<T>, body: @Composable()(T) -> Unit

    ) { // ... body(item) // ... }
25. 25.

    @Composable fun <T> ScrollingList( data: List<T>, body: @Composable()(T) -> Unit

    ) { // ... body(item) // ... } @Composable fun NewsFeed(stories: List<Story>) { ScrollingList(stories) { story -> StoryWidget(story) } }
26. 26.

    @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) } } }
27. 27.

    @Model

28. 28.

    @Composable fun Greeting(name: String) { Text("Hello $name!") }

29. 29.

    @Composable fun Greeting(name: String) { val count = +state {

    0 } Column { Button(text = "greet", onClick = { count.value++ }) Text(text = "$name greeted ${count.value} times") } }
30. 30.

    @Composable fun Greeting(name: String) { val count = +state {

    0 } Column { Button(text = "greet", onClick = { count.value++ }) Text(text = "$name greeted ${count.value} times") } }
31. 31.

    @Composable fun Greeting(name: String) { val count = +state {

    0 } Column { Button(text = "greet", onClick = { count.value++ }) Text(text = "$name greeted ${count.value} times") } }
32. 32.

    @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") } }
33. 33.

    @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") } }
34. 34.

    @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-- } }
35. 35.

    @Model class LoginState(var username: String, var password: String) { val

    valid: Boolean get() = username.isNotEmpty() && password.isNotEmpty() }
36. 36.

    @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() }) }
37. 37.

    @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() }) }
38. 38.

    @GenerateView

39. 39.

    @Composable fun Greeting(name: String) { Text ("Hello $name!") }

40. 40.

    @Composable
 @GenerateView fun Greeting(name: String) { Text ("Hello $name!") }

41. 41.

    @Composable
 @GenerateView fun Greeting(name: String) { Text ("Hello $name!") }

    // In your existing xml <GreetingView app:name="takusemba" />
42. 42.

    @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)
43. 43.

    @Discussion

44. 44.

    None
45. 45.

    +FUQBDL
    $PNQPTF https://github.com/takusemba https://twitter.com/takusemba