5分でわかるCompose Modifiers deep dive

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

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

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