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

Chaining Compose modifiers beyond intuition

Chaining Compose modifiers beyond intuition

Meike Felicia Hammer

July 05, 2023
Tweet

More Decks by Meike Felicia Hammer

Other Decks in Programming

Transcript

  1. Modi iers • size, layout, behaviour, appearance • additional information

    • user input • clickable, scrollable, draggable, zoomable Decorate and augment composables. Moulding them the way you need them.
  2. The layout node is still illing max size. Also respecting

    the requiredSize of 50.dp. Force Required Size?
  3. Compose Phases Composition What to show Layout Where to place

    it Drawing How to render it Data Composition Drawing UI Layout size requiredSize padding illMaxSize sizeIn wrapContentSize clip drawBehind rotate scale
  4. Layout phase 3 steps to remember • Measure children •

    Decide own size • Place children Constraints help inding the right size in the irst two steps.
  5. Constraints are the min and max bounds for the size

    of a node. H W ( x , y ) De inition
  6. Bounded constraints Layout node has to choose a width between

    100 and 400 and a height between 100 and 400. 100 - 400 100 - 400
  7. Unbounded constraints The node is not constraint to any size.

    The maximum width and height bounds are set to in inity. 0 - ∞ 0 - ∞
  8. Exact constraints Layout node should have an exact size. The

    minimum and maximum bounds have the same size. 300 - 300 200 - 200
  9. Combined constraints Bounding width, providing an unbounded maximum height. Exact

    width, providing a bounded height. 600 - 600 0 - 400 100 - 400 100 - ∞
  10. Constraints in Action Constraints are passed down from parent to

    child in the UI Tree during the layout phase. Parent measures it’s child. When a node has measured its own size, it communicates it’s size back up to the tree.
  11. UI Tree SIZE CONSTRAINTS IMAGE ROTATE (90) SIZE (46) COLUMN

    PADDING (start = 16) BUTTON ROW PADDING (top = 16) BUTTON
  12. 600 300 IMAGE ROTATE (90) SIZE (100) COLUMN PADDING (start

    = 16) BUTTON Text: 119*82 ROW PADDING (top = 16) BUTTON Text: 140*82 Traversing w: 0 - 600 h: 0 - 300 w: 0 - 600 h: 0 - 300 w: 0 - 584 h: 0 - 300 BUTTON w: 0 - 584 h: 0 - 202 BTN w: 0 - 444 h: 0 - 300 W: 256, H: 180 <— Max —> <— SUM —> w: 256 h: 180 w: 0 - 584 h: 0 - 300 w: 140 h: 98 w: 119 h: 82 w: 140 h: 180 w: 100 h: 100 w: 156 h: 180
  13. Too big Out of range IMAGE SIZE (600) IMAGE SIZE

    (80) Too small w: 100 - 200 h: 100 - 500 w: 100 - 200 h: 100 - 500 w: 200 - 200 h: 500 - 500 Adapting as closely as it can. w: 100 - 100 h: 100 - 100 Respecting the incoming bounds.
  14. Constraints affect the size of composables. Modi iers affect constraints.

    What is the relation between constraints and modi iers? Constraint vs Modi ier
  15. Sample Scale - Offset Scaled and then moved to the

    right. Moves to the right before scaling.
  16. In luencing size, shape and behaviour of composables • Usually

    read top to bottom • Counter-intuitive regarding some cases • Some modi iers are ineffective applied multiple times ORDER MATTERS
  17. Meike F. Hammer @feliciaf_aye Chaining Compose modi iers beyond intuition

    Android Lead @ adesso mobile solutions GmbH THANK YOU WE ARE HIRING