Litho uses the Yoga library, which is an implementation of Flexbox, to measure and layout on-screen components. If you have used Flexbox on the web before then this should be very familiar. If you are more familiar with how Android normally performs Layout then Flexbox will remind you of
This section shows how various attributes of Flexbox are used for on-screen layout.
Flexbox is a one-dimensional layout model, which means all elements are placed along one line.
The following information may help you decide whether to layout your elements horizontally or vertically.
The primary axis of layout is called the Main Axis, and the direction perpendicular to it is called the Cross Axis. For example, if you wanted your children to be laid out left to right, then the Main Axis would be the horizontal axis, and the Cross Axis would be the vertical axis.
Litho uses special container components to define the direction of the layout, as shown in the following table.
|Component||Main Axis||Child Elements Layout||If Wrapping is Enabled|
|horizontal||left to right||Next line will start under the first item on the left of the container.|
|horizontal||right to left||Next line will start under the first item on the right of the container.|
|vertical||top to bottom||Next line will start to the right of the first item on the top of the container.|
|vertical||bottom to top||Next line will start to the right of the first item on the bottom of the container.|
The above container components are illustrated in the following diagram.
(reverse) option is available through the
.reverse(boolean) method on
Distribution along the main axis
If your container has more space than is necessary along the Main Axis then the way children are positioned across that axis needs to be considered.
justifyContent method specifies how the child elements are distributed across the Main Axis. It takes a
YogaJustify enum input, which has the following possible values:
FLEX_START(default) - position children at the start of the container, along the main axis.
FLEX_END- position children at the end of the container, along the main axis.
CENTER- position children in the centre of the container, along the main axis.
SPACE_BETWEEN- distribute extra space evenly between children.
SPACE_AROUND- distribute space evenly around each child. Note that adjacent children will have '2x' space between them (because each child has its own 'padding').
SPACE_EVENLY- distribute space evenly around all children.
YogaJustify values are illustrated below.
Distribution along the cross axis
If the elements in your line have different heights, then the way they are positioned along the line needs to be considered.
alignItems method specifies how the container's children are distributed across the Cross Axis. It takes a
YogaAlign enum input, which has the following possible values:
STRETCH(default) - stretch the size of all elements to completely fill the line.
FLEX_START- align elements with the start of the cross axis.
FLEX_END- align elements with the end of the cross axis.
CENTER- align elements with the centre of the line.
BASELINE- align elements with respect to their baselines.
YogaAlign values are illustrated below.
Wrapping to multiple lines
In addition to the one-dimensional Flexbox laying out its children in one line, Flexboxes can also wrap their children onto multiple lines, much like text wraps. You specify wrapping behavior with the
Wrap method, which takes a
YogaWrap enum value that has the following possible values:
NO_WRAP(default) - there is no wrapping. Children are forced into a single line; if they cannot fit, they will overflow.
WRAP- elements that overflow a single line will be moved to the next line. If the main axis is horizontal, then the next line will be below the previous line.
WRAP_REVERSE- similar to
WRAPexcept the order of lines is reversed. If the main axis is horizontal, then the next line will be above the previous line.
YogaWrap values are illustrated below.
If your container has extra space in the Cross Axis direction, then the way lines are distributed in that space needs to be considered.
alignContent method specifies how lines are distributed along the Cross Axis. It takes a
YogaAlign enum value, which has the following possible values:
STRETCH(default) - lines are stretched evenly to fill the available space in the cross axis.
FLEX_START- lines are placed at the start of the cross axis.
FLEX_END- lines are placed at the end of the cross axis.
CENTER- lines are placed in the centre of the cross axis.
SPACE_BETWEEN- evenly distributes extra space between all lines.
SPACE_AROUND- pads lines above and below with extra space.
YogaAlign values, for Lines, are illustrated below.
For more information on specific Flexbox properties, refer to the Yoga documentation or explore any web resource on how Flexbox functions.