Fragments in Compose

Transcript

1. ¿Fragments in Compose? Dinorah Tovar Google Developer Expert Android @ddinorahtovar @ddinorahtovar
2. Left Aligned Title Compose is a new cool way to write UI First let’s talk about compose @Composable fun view(data: Int) data: Int Composition emit
3. Simple quote or statement goes here. Ideally limit to four or five lines max. Composable functions Kotlin 100% @Composable fun SomeTextView( text: String ) { Text( text = text, style = DesignTheme.typography.body4, color = DesignTheme.colors.onSurface, textAlign = TextAlign.Start ) }
4. So - for a View We use Activity class HomeActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { ComposableHolder() } } }
5. Left Aligned Title Today - some of us has this structure Second, let’s talk about fragments Activity Fragment ViewModel Simples flow
6. Left Aligned Title Activity Fragment ViewModel Activity Fragment ViewModel Fragment ViewModel Full App Today - some of us has this structure Second, let’s talk about fragments
7. Fragments with compose does not have setContent{} class OtherFragment : Fragment() { override fun onCreateView( inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle? ): View { return ComposeView(requireContext()).apply { setViewCompositionStrategy( DisposeOnViewTreeLifecycleDestroyed ) setContent { // View } } } }
8. The lifecycle is one of the most complex aspects of developing applications and has always been a source of bugs, and difficult to understand for developers.
9. Many different ideas Many task to handle Many blog post
14. Fragments are not bad - but they probably can be better
15. Left Aligned Title Compose solve probably one of the hardest task in Android Compose to the rescue First Interaction Composition Insert “A” Insert “B” Second Interaction Re-composition
16. Left Aligned Title Compose is designed for State Hoisting - decoupling everything Compose to the rescue @Composable fun View() @Composable fun View() @Composable fun ViewContent()
17. This is also know As Uni- directional Data flow Left Aligned Title @Composable fun View() @Composable fun View() @Composable fun ViewContent() State Event
18. Left Aligned Title Compose is designed for State Hoisting Compose to the rescue @Composable State Holder ViewModel/ Presenters Access to 
 Logic UI component state UI component Composition
19. Left Aligned Title Example - State Hoisting @Composable fun View(){ var variable by remember { mutableStateOf("") } val onValueChange = { text -> variable = text } Component( name= variable, onValueChange= onValueChange ) } @Composable fun ViewContent( name : String, onValueChange : (String) -> Unit ){ // Your view }
20. Composable function Can access ViewModel @Composable private fun ComposableHolder( viewModel: MyViewModel = viewModel() ) { val uiState by viewModel.uiState.collectAsState() when { uiState.isLoading -> { /* ... */ } uiState.isSuccess -> { /* ... */ } uiState.isError -> { /* ... */ } } }
21. Does not requiere Fragments At the end of the day - using Compose AT ALL
22. Compose offers something different to everything we have seen - Give it a try (and decide if your fragments worth the effort)
23. ¿Fragments in Compose? Dinorah Tovar Google Developer Expert Android @ddinorahtovar @ddinorahtovar