diff --git a/Chapters/bloc/layout.md b/Chapters/bloc/layout.md index 5e07112..98486be 100644 --- a/Chapters/bloc/layout.md +++ b/Chapters/bloc/layout.md @@ -367,49 +367,124 @@ Stef should continue down here. ### Linear layout - BlLinearLayout -Children can use dynamic size with constraints. The number of element will then fit -its parents available space. If you specify their size, and the total is -over its parents, they will be hidden. need to specify their size. If they use -constraint, the last one will hide previous one. They will fit available space + -move to next line if necessary +A linear layout is used when you need to display a multiple children elements next to each others. +A linear layout can diplay the children elements horizontaly or verticaly. +The size of a child element depends of the child's constraints. +The constraints are: -#### Parent definition +- `BlLayoutCommonConstraintsAxis exact:` to define an exact size for the child. +- `BlLayoutCommonConstraintsAxis fitContent` to define a size that will match the content of the child. +- `BlLinearLayoutConstraints weight:` to define a proportional size of the child compare to its siblings' weigths (only available if matchParent is set as the BlLayoutCommonConstraintsAxis). By default the weight equals 1. -- horizontal -- vertical +#### Example + +In this example the childA has a weight of 3, the childB has a default weight of 1 and the childC has a weight of 200. +But the weight of the childC will not be considered because its horizontal size is defined has an exact value. + +- The childA will take `3 / (3 + 1) = 3 / 4` of the available space. +- The childB will take `1 / (3 + 1) = 1 / 4` of the available space. + +```smalltalk +root := BlElement new + border: (BlBorder paint: Color red width: 1); + background: (Color red alpha: 0.2); + layout: BlLinearLayout horizontal; + constraintsDo: [ :c | + c horizontal matchParent. + c vertical fitContent ]; + yourself. + +childA := BlElement new + border: (BlBorder paint: Color blue width: 1); + background: (Color blue alpha: 0.2); + margin: (BlInsets all: 10); + constraintsDo: [ :c | + c horizontal matchParent. + c vertical exact: 50. + c linear weight: 3 ]; + yourself. + +childB := BlElement new + border: (BlBorder paint: Color blue width: 1); + background: (Color blue alpha: 0.2); + margin: (BlInsets all: 10); + constraintsDo: [ :c | + c horizontal matchParent. + c vertical exact: 50 ]; + yourself. + +childC := BlElement new + border: (BlBorder paint: Color blue width: 1); + background: (Color blue alpha: 0.2); + margin: (BlInsets all: 10); + constraintsDo: [ :c | + c horizontal exact: 50. + c vertical exact: 50. + c linear weight: 20 ]; + yourself. + +root addChildren: { childA . childB . childC }. +root openInNewSpace. +``` #### Child constraints -- horizontal +Constraints can be added on the children relative position. + +If the layout is vertical: - alignCenter - alignLeft - alignRight -- vertical + +If the layout is horizontal: - alignBottom - alignCenter - alignTop -#### Example - -```smalltalk +```st root := BlElement new border: (BlBorder paint: Color red width: 1); background: (Color red alpha: 0.2); - layout: BlLinearLayout horizontal ; + layout: BlLinearLayout horizontal; constraintsDo: [ :c | - c horizontal fitContent. - c vertical fitContent ]. - - 50 timesRepeat: [ |elt| elt := BlElement new border: (BlBorder paint: Color blue width: 1); - size: 40@80; - background: (Color blue alpha: 0.2); - margin: (BlInsets all: 5); - padding: (BlInsets all: 5). + c horizontal matchParent. + c vertical exact: 80 ]; + yourself. + +childA := BlElement new + border: (BlBorder paint: Color blue width: 1); + background: (Color blue alpha: 0.2); + margin: (BlInsets all: 10); + constraintsDo: [ :c | + c horizontal matchParent. + c vertical exact: 20. + c linear vertical alignBottom ]; + yourself. + +childB := BlElement new + border: (BlBorder paint: Color blue width: 1); + background: (Color blue alpha: 0.2); + margin: (BlInsets all: 10); + constraintsDo: [ :c | + c horizontal matchParent. + c vertical exact: 20. + c linear vertical alignCenter ]; + yourself. + +childC := BlElement new + border: (BlBorder paint: Color blue width: 1); + background: (Color blue alpha: 0.2); + margin: (BlInsets all: 10); + constraintsDo: [ :c | + c horizontal matchParent. + c vertical exact: 20. + c linear vertical alignTop ]; + yourself. - root addChild: elt. ]. +root addChildren: { childA . childB . childC }. +root openInNewSpace. ``` -![Linear layout.](figures/linearlayout.png width=70) ### Flow layout - BlFlowLayout