Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Fragments in Compose

Fragments in Compose

Dinorah Tovar

January 25, 2022
Tweet

More Decks by Dinorah Tovar

Other Decks in Technology

Transcript

  1. 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
  2. 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 ) }
  3. So - for a View We use Activity class HomeActivity

    : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { ComposableHolder() } } }
  4. Left Aligned Title Today - some of us has this

    structure Second, let’s talk about fragments Activity Fragment ViewModel Simples flow
  5. 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
  6. 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 } } } }
  7. 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.
  8. 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
  9. Left Aligned Title Compose is designed for State Hoisting -

    decoupling everything Compose to the rescue @Composable fun View() @Composable fun View() @Composable fun ViewContent()
  10. This is also know As Uni- directional Data flow Left

    Aligned Title @Composable fun View() @Composable fun View() @Composable fun ViewContent() State Event
  11. 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
  12. 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 }
  13. 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 -> { /* ... */ } } }
  14. Compose offers something different to everything we have seen -

    Give it a try (and decide if your fragments worth the effort)