2022 Compose Camp Pathway 1-2: State and Theming in Jetpack Compose

Transcript

1. This work is licensed under the Apache 2.0 License State and Theming in Jetpack Compose Pathway 1-2
2. Speaker skydoves @github_skydoves Android Developer Advocate @ Stream 엄재웅 (Jaewoong Eum)
4. Codelab Guidelines
5. This work is licensed under the Apache 2.0 License https://github.com/gdgand/ComposeCamp2022 Codelab Guidelines Fork the project on GitHub
6. This work is licensed under the Apache 2.0 License Codelab Guidelines • Clone the project • Checkout to a new branch
7. Compose Phases
8. This work is licensed under the Apache 2.0 License Compose Phases Which UI to draw Where to place UI. Measurement and placement How it renders
9. This work is licensed under the Apache 2.0 License Recomposition Update UI (Click the Checkbox)
10. This work is licensed under the Apache 2.0 License @Composable private fun WellnessTaskItem(..) { Text() Checkbox() IconButton() } Recomposition
11. This work is licensed under the Apache 2.0 License Recomposition @Composable private fun WellnessTaskItem(..) { Text() Checkbox() IconButton() } Update UI (Click the Checkbox) @Composable private fun WellnessTaskItem(..) { Text() Checkbox() IconButton() } Recomposition
12. This work is licensed under the Apache 2.0 License Recomposition @Composable private fun WellnessTaskItem(..) { Text() Checkbox() IconButton() } Smart Recomposition Update UI (Click the Checkbox) @Composable private fun WellnessTaskItem(..) { Text() Checkbox() IconButton() } Skip Skip Recomposition
13. This work is licensed under the Apache 2.0 License Recomposition and Performance https://getstream.io/blog/jetpack-compose-guidelines/ https://youtu.be/EOQB8PTLkpY
14. State in Compose
15. This work is licensed under the Apache 2.0 License What's the State? State An interface that has a value property during the execution of a Composable function. MutableState A mutable value holder where reads to the value property during the execution of a Composable function. Any changes to value will schedule recomposition of any composable functions that read value.
16. This work is licensed under the Apache 2.0 License State and Recomposition Composition Display UI User Event Update State @Composable
17. This work is licensed under the Apache 2.0 License State and Recomposition Composition Display UI User Event Update State @Composable
18. This work is licensed under the Apache 2.0 License State and Recomposition Composition Display UI User Event Update State @Composable
19. This work is licensed under the Apache 2.0 License State and Recomposition Composition Updated UI User Event Update State Recomposition @Composable
20. This work is licensed under the Apache 2.0 License What's the State? Value Holder A value holder where reads to the value property during the execution of a Composable function. Recomposition Trigger When the value property is written to and changed, recomposition of any subscribed Recompose scopes will be scheduled. Observable The current Recompose scope will observe states and be subscribed to changes of that value.
21. This work is licensed under the Apache 2.0 License State in Composable @Composable fun WaterCounter(modifier: Modifier = Modifier) { Column(modifier = modifier.padding(16.dp)) { // Changes to count are now tracked by Compose val count: MutableState<Int> = mutableStateOf(0) Text("You've had ${count.value} glasses.") Button(onClick = { count.value++ }, Modifier.padding(top = 8.dp)) { Text("Add one") } } }
22. This work is licensed under the Apache 2.0 License @Composable fun WaterCounter(modifier: Modifier = Modifier) { Column(modifier = modifier.padding(16.dp)) { // Changes to count are now tracked by Compose val count: MutableState<Int> = mutableStateOf(0) Text("You've had ${count.value} glasses.") Button(onClick = { count.value++ }, Modifier.padding(top = 8.dp)) { Text("Add one") } } } State in Composable Compilation error!
23. This work is licensed under the Apache 2.0 License State in Composable @Composable fun WaterCounter(modifier: Modifier = Modifier) { val count: MutableState<Int> = mutableStateOf(0) .. } Initialize states
24. This work is licensed under the Apache 2.0 License @Composable fun WaterCounter(modifier: Modifier = Modifier) { Column(modifier = modifier.padding(16.dp)) { var count by remember { mutableStateOf(0) } Text("You've had $count glasses.") Button(onClick = { count++ }, Modifier.padding(top = 8.dp)) { Text("Add one") } } } State and Remember Remember Composable functions can use the remember API to store an object in memory.
25. This work is licensed under the Apache 2.0 License RemeberSaveable @Composable fun WaterCounter(modifier: Modifier = Modifier) { val count: MutableState<Int> by rememberSaveable { mutableStateOf(0) } .. } RememberSaveable It behaves similarly to remember, but the stored value will survive the activity or process recreation using the saved instance state mechanism. • Configuration changes • Switch between dark and light mode • Change language settings
26. This work is licensed under the Apache 2.0 License Remember and Recomposition @Composable fun ContactList( contacts: List<Contact>, comparator: Comparator<Contact> ) { LazyColumn(Modifier) { items(contacts.sortedWith(comparator)) { contact -> // ... } } }
27. This work is licensed under the Apache 2.0 License Remember and Recomposition @Composable fun ContactList( contacts: List<Contact>, comparator: Comparator<Contact> ) { LazyColumn(Modifier) { // DON'T DO THIS items(contacts.sortedWith(comparator)) { contact -> // ... } } }
28. This work is licensed under the Apache 2.0 License Remember and Recomposition @Composable fun ContactList( contacts: List<Contact>, comparator: Comparator<Contact>, ) { val sortedContacts = remember(contacts, sortComparator) { contacts.sortedWith(sortComparator) } LazyColumn { items(sortedContacts) { // ... } …
29. This work is licensed under the Apache 2.0 License Stateful vs Stateless @Composable fun WaterCounter(modifier: Modifier = Modifier) { val count: MutableState<Int> by remember { mutableStateOf(0) } .. } Stateful
30. This work is licensed under the Apache 2.0 License Stateful vs Stateless @Composable fun WaterCounter(modifier: Modifier = Modifier) { val count: MutableState<Int> by remember { mutableStateOf(0) } .. } @Composable fun WaterCounter( modifier: Modifier = Modifier, count: Int = 0 ) { ... } Stateful Stateless
31. This work is licensed under the Apache 2.0 License Why Stateless? Single source of truth By moving state instead of duplicating it, we're ensuring there's only one source of truth. This helps avoid bugs. Decoupled The state for the stateless Composable may be stored anywhere. It increases the reusability of the stateless Composable. Encapsulated Only stateful composables will be able to modify their state. It's completely internal.
32. This work is licensed under the Apache 2.0 License State Hoisting @Composable fun WaterCounter(modifier: Modifier = Modifier) { Column(modifier = modifier.padding(16.dp)) { var count by remember { mutableStateOf(0) } Text("You've had $count glasses.") Button(onClick = { count++ }, Modifier.padding(top = 8.dp)) { Text("Add one") } } }
33. This work is licensed under the Apache 2.0 License State Hoisting @Composable fun WaterCounter(modifier: Modifier = Modifier) { Column(modifier = modifier.padding(16.dp)) { var count by remember { mutableStateOf(0) } Text("You've had $count glasses.") Button(onClick = { count++ }, Modifier.padding(top = 8.dp)) { Text("Add one") } } } State Read state Write state
34. This work is licensed under the Apache 2.0 License State Hoisting @Composable fun WaterCounter(modifier: Modifier = Modifier) { Column(modifier = modifier.padding(16.dp)) { var count by remember { mutableStateOf(0) } Text("You've had $count glasses.") Button(onClick = { count++ }, Modifier.padding(top = 8.dp)) { Text("Add one") } } } @Composable fun StatelessCounter( count: Int, onIncrement: () -> Unit, modifier: Modifier = Modifier ) { Column(modifier = modifier.padding(16.dp)) { Text("You've had $count glasses.") Button(onClick = onIncrement, Modifier.padding(top = 8.dp)) { Text("Add one") } } }
35. This work is licensed under the Apache 2.0 License State Hoisting @Composable fun StatefulCounter() { var waterCount by remember { mutableStateOf(0) } StatelessCounter(waterCount, { waterCount++ }) } State State @Composable fun StatelessCounter(count: Int, onIncrement: () -> Unit) { Text("You've had $count glasses.") Button(onClick = onIncrement, Modifier.padding(top = 8.dp)) { .. } Stateful Stateless
36. CompositionLocal
37. This work is licensed under the Apache 2.0 License CompositionLocal Composable A Composable B Composable C @Composable fun ComposableA() { ComposableB(Color.White) } @Composable fun ComposableB(color: Color) { ComposableC(Color.White) } @Composable fun ComposableC(color: Color) { .. }
38. This work is licensed under the Apache 2.0 License CompositionLocal Composable A Composable B Composable C @Composable fun ComposableA() { ComposableB(Color.White) } @Composable fun ComposableB(color: Color) { ComposableC(Color.White) } @Composable fun ComposableC(color: Color) { .. }
39. This work is licensed under the Apache 2.0 License CompositionLocal Composable A Composable B Composable C @Composable fun ComposableA() { ComposableB(Color.White) } @Composable fun ComposableB(color: Color) { ComposableC(Color.White) } @Composable fun ComposableC(color: Color) { .. } Dependency
40. This work is licensed under the Apache 2.0 License CompositionLocal Composable A Composable B Composable C @Composable fun ComposableA() { CompositionLocalProvider(LocalColor provides color) { .. } @Composable fun ComposableB() { ComposableC() } @Composable fun ComposableC() { val color = LocalColor.current }
41. This work is licensed under the Apache 2.0 License CompositionLocal By Elye
42. This work is licensed under the Apache 2.0 License CompositionLocal https://developer.android.com/jetpack/compose/compositionlocal val ColorCompositionLocal = staticCompositionLocalOf<Color> { error("No Color provided") } CompositionLocalProvider(ColorCompositionLocal provides color) { MyComposableFunction(...) } @Composable fun MyComposableFunction() { val color = ColorCompositionLocal.current }
43. Compose Theming
44. This work is licensed under the Apache 2.0 License Material Design
45. This work is licensed under the Apache 2.0 License Material Design in Compose Color Typography Shape
46. This work is licensed under the Apache 2.0 License MaterialTheme @Composable fun JetnewsTheme(content: @Composable () -> Unit) { MaterialTheme( colorScheme = myColorScheme, shapes = MyShapes, typography = MyTypography, content = content ) }
47. This work is licensed under the Apache 2.0 License MaterialTheme @Composable fun MaterialTheme(..) { CompositionLocalProvider( LocalColorScheme provides rememberedColorScheme, LocalIndication provides rippleIndication, LocalRippleTheme provides MaterialRippleTheme, LocalShapes provides shapes, LocalTextSelectionColors provides selectionColors, LocalTypography provides typography, ) { ProvideTextStyle(value = typography.bodyLarge, content = content) } }
48. This work is licensed under the Apache 2.0 License MaterialTheme @Composable fun MyMaterialTheme(..) { val isDarkTheme = isSystemInDarkTheme() val colorScheme = if (isDarkTheme) { darkColorSceme } else { lightColorSceme } MaterialTheme(colorScheme = colorScheme) { MyScreen() } }
49. Thank you! This work is licensed under the Apache 2.0 License