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. ¿Fragments in
    Compose?
    Dinorah Tovar

    Google Developer Expert Android
    @ddinorahtovar
    @ddinorahtovar

    View full-size slide

  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

    View full-size slide

  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


    )


    }

    View full-size slide

  4. So - for a View
    We use
    Activity
    class HomeActivity : AppCompatActivity() {


    override fun onCreate(savedInstanceState: Bundle?) {


    super.onCreate(savedInstanceState)


    setContent {


    ComposableHolder()


    }


    }


    }

    View full-size slide

  5. Left Aligned Title
    Today - some of us has this structure
    Second, let’s talk about fragments
    Activity Fragment ViewModel
    Simples flow

    View full-size slide

  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

    View full-size slide

  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


    }


    }


    }


    }

    View full-size slide

  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.

    View full-size slide

  9. Many different
    ideas
    Many task to handle
    Many blog post

    View full-size slide

  10. Fragments are not bad - but they probably
    can be better

    View full-size slide

  11. 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

    View full-size slide

  12. Left Aligned Title
    Compose is designed for State Hoisting - decoupling everything
    Compose to the rescue
    @Composable

    fun View()
    @Composable

    fun View()
    @Composable

    fun ViewContent()

    View full-size slide

  13. This is also know
    As Uni-
    directional
    Data flow
    Left Aligned Title
    @Composable

    fun View()
    @Composable

    fun View()
    @Composable

    fun ViewContent()
    State Event

    View full-size slide

  14. 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

    View full-size slide

  15. 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


    }


    View full-size slide

  16. 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 -> { /* ... */ }


    }


    }

    View full-size slide

  17. Does not requiere
    Fragments
    At the end of the day - using Compose
    AT ALL

    View full-size slide

  18. Compose offers something different to
    everything we have seen - Give it a try
    (and decide if your fragments worth the
    effort)

    View full-size slide

  19. ¿Fragments in
    Compose?
    Dinorah Tovar

    Google Developer Expert Android
    @ddinorahtovar
    @ddinorahtovar

    View full-size slide