Chaining Compose modifiers beyond intuition

Transcript

1. Chaining Compose modi iers beyond intuition Meike Felicia Hammer @feliciaf_aye Android Lead @ adesso mobile solutions GmbH
2. 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.
3. Chaining all at once? Does the order matter? Photo by Mae Mu on Unsplash
4. Beyond intuition 2 Borders, 1 Padding, 1 Size
5. Modi iers 2 Borders, 1 Padding, 1 Size
6. Beyond intuition 2 Size Modi iers
8. What would happen, when we use size and requiredSize modi iers chained? Force Required Size?
9. The layout node is still illing max size. Also respecting the requiredSize of 50.dp. Force Required Size?
10. How to tackle this? Learn about constraints and the layout phase.
11. 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
12. Layout phase 3 steps to remember • Measure children • Decide own size • Place children Constraints help inding the right size in the irst two steps.
13. Constraints are the min and max bounds for the size of a node. H W ( x , y ) De inition
14. What kind of constraints do we have?
15. Bounded constraints Layout node has to choose a width between 100 and 400 and a height between 100 and 400. 100 - 400 100 - 400
16. Unbounded constraints The node is not constraint to any size. The maximum width and height bounds are set to in inity. 0 - ∞ 0 - ∞
17. Exact constraints Layout node should have an exact size. The minimum and maximum bounds have the same size. 300 - 300 200 - 200
18. Combined constraints Bounding width, providing an unbounded maximum height. Exact width, providing a bounded height. 600 - 600 0 - 400 100 - 400 100 - ∞
19. 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.
20. UI Tree SIZE CONSTRAINTS IMAGE ROTATE (90) SIZE (46) COLUMN PADDING (start = 16) BUTTON ROW PADDING (top = 16) BUTTON
21. 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
22. 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.
23. Constraints affect the size of composables. Modi iers affect constraints. What is the relation between constraints and modi iers? Constraint vs Modi ier
24. Padding - Background - Border Intuitive Sample
25. Padding - Background - Border
26. Beyond intuition Scale - Offset
27. Sample Scale - Offset Scaled and then moved to the right. Moves to the right before scaling.
28. Sample Scale - Offset
29. Beyond intuition Custom Modi ier
30. Custom Modi ier Custom Modi ier + Clip Clip + Custom Modi ier
31. Custom Modi ier Custom Modi ier + Clip Clip + Custom Modi ier
32. 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
33. Meike F. Hammer @feliciaf_aye Chaining Compose modi iers beyond intuition Android Lead @ adesso mobile solutions GmbH THANK YOU WE ARE HIRING