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 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 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 Slide

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

    View 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 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 Slide

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

    View 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 Slide

  9. Recompose
    9
    padding
    Layout
    padding
    background
    Hello
    Clickable
    State

    View Slide

  10. Recompose
    10
    Recompose

    Modi
    fi
    er


    Clickable
    padding
    background
    Layout
    Hello
    pointerInput
    semantics
    Clickable

    View Slide

  11. Recompose
    11
    Entity


    Entity
    padding
    background
    Layout
    Hello
    pointerInput
    semantics
    Entity
    Entity
    Entity
    Entity

    View Slide

  12. Modi
    fi
    er.Node
    Modi
    fi
    er

    View Slide

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

    View 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 Slide

  15. Recompose
    15
    padding
    Layout
    padding
    background
    clickable
    Hello

    View Slide

  16. Modi
    fi
    er.Node
    16
    Node Recompose


    Node


    Node
    padding
    background
    clickable
    Layout
    Hello
    PaddingNode
    BackgroundNode
    ClickableNode
    State

    View 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 Slide