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

5分でわかるCompose Modifiers deep dive

mkeeda
November 22, 2022

5分でわかるCompose Modifiers deep dive

サイボウズ社内勉強会 Android Dev Summit報告LT会の資料です

元動画
Compose Modifiers deep dive
https://youtu.be/BjGX2RftXsU

mkeeda

November 22, 2022
Tweet

More Decks by mkeeda

Other Decks in Programming

Transcript

  1. 5


    Compose Modi
    fi
    ers
    deep dive
    Android Dev Summit LT




    (@mr_mkeeda)
    IUUQTZPVUVCF#K(93GU9T6

    View full-size slide

  2. Modi
    fi
    er
    Modi
    fi
    er API


    Modi
    fi
    er ( Compose
    1
    .
    2
    ) ⭐


    Recompose


    Modi
    fi
    er (Compose
    1
    .
    3
    ) ⭐


    (Memory Allocation )


    compose


    UI
    2

    View full-size slide

  3. Modi
    fi
    er
    3
    @Composable
    fun Screen() {
    val modifier = Modifier
    .padding(10.dp)
    .background(Color.Blue)
    .clickable { }
    Row {
    Text("Hello", modifier)
    Text("World", modifier)
    }
    }
    API





    View full-size slide

  4. Modi
    fi
    er
    4
    Text
    Text(
    text = "Hello",
    modifier = Modifier
    .padding(10.dp)
    .background(Color.Blue)
    .clickable { }
    )
    padding
    background
    clickable

    View full-size slide

  5. Modi
    fi
    er
    5
    Layout
    Text(
    text = "Hello",
    modifier = Modifier
    .padding(10.dp)
    .background(Color.Blue)
    .clickable { }
    )
    padding
    background
    clickable
    Hello
    Modi
    fi
    er.Element
    LayoutNode


    (ComposeNode)
    Modi
    fi
    er.Element

    View full-size slide

  6. Stateful Modi
    fi
    er
    6
    Layout
    padding
    background
    Hello
    Clickable
    State
    clickable


    Recompose Modi
    fi
    er

    Modi
    fi
    er
    fun Composer.materialize(modifier: Modifier): Modifier
    fun Modifier.composed(
    /*…*/
    factory: @Composable Modifier.() -> Modifier
    ): Modifier

    View full-size slide

  7. Modi
    fi
    er.composed Element
    7
    padding
    background
    Layout
    Hello
    pointerInput
    semantics
    Clickable (
    1 6
    Elements)
    IUUQTZPVUVCF#K(93GU9T6 U

    View full-size slide

  8. Modi
    fi
    er
    8
    padding
    background
    Layout
    Hello
    pointerInput
    semantics
    Entity
    Entity
    Entity
    Entity
    Entity Modi
    fi
    er.Element


    Modi
    fi
    er.Element

    Entity

    View full-size slide

  9. Recompose
    9
    padding
    Layout
    padding
    background
    Hello
    Clickable
    State

    View full-size slide

  10. Recompose
    10
    Recompose

    Modi
    fi
    er


    Clickable
    padding
    background
    Layout
    Hello
    pointerInput
    semantics
    Clickable

    View full-size slide

  11. Recompose
    11
    Entity


    Entity
    padding
    background
    Layout
    Hello
    pointerInput
    semantics
    Entity
    Entity
    Entity
    Entity

    View full-size slide

  12. Modi
    fi
    er.Node
    Modi
    fi
    er

    View full-size slide

  13. Node
    13
    Layout
    Text(
    text = "Hello",
    modifier = Modifier
    .padding(10.dp)
    .background(Color.Blue)
    .clickable { }
    )
    padding
    background
    clickable
    Hello

    View full-size slide

  14. Modi
    fi
    er.Node
    14
    Modi
    fi
    er.Node
    LayoutNode


    composed/materialize

    Composition Modi
    fi
    er


    Stateful State Node

    padding
    background
    clickable
    Layout
    Hello
    PaddingNode
    BackgroundNode
    ClickableNode
    State

    View full-size slide

  15. Recompose
    15
    padding
    Layout
    padding
    background
    clickable
    Hello

    View full-size slide

  16. Modi
    fi
    er.Node
    16
    Node Recompose


    Node


    Node
    padding
    background
    clickable
    Layout
    Hello
    PaddingNode
    BackgroundNode
    ClickableNode
    State

    View full-size slide

  17. Compose Modi
    fi
    ers deep dive
    Modi
    fi
    er


    Compose
    1
    .
    3
    .
    0

    Modi
    fi
    er 頻


    Modi
    fi
    er.Node


    Compose

    17

    View full-size slide