How to Layout on Texture

Photo by Marvin Meyer on Unsplash

Note: This is a series about Texture, To fully understand this chapter, you can first read this chapter Onboard to “Asynchronus” Layout API — Texture.

As you know, Texture is not using Auto Layout to layout its view. Texture using its own layout mechanism called LayoutSpec.

LayoutSpec is basically an API/Rules to manage how Node/View placement.

There are several LayoutSpec you can utilize to create your desired view.

ASWrapperLayoutSpec

ASWrapperLayoutSpec is a simple ASLayoutSpec subclass that can wrap a node and calculate the layout of the child based on the size set on the layout element.

ASWrapperLayoutSpec Example

ASStackLayoutSpec

ASStackLayoutSpec Example

Of all the layoutSpecs in Texture, ASStackLayoutSpec is the most useful and powerful. ASStackLayoutSpec uses the flexbox algorithm to determine the position and size of its children. Flexbox is designed to provide a consistent layout on different screen sizes. In a stack layout you align items in either a vertical or horizontal stack. A stack layout can be a child of another stack layout, which makes it possible to create almost any layout using a stack layout spec.

ASStackLayoutSpec has 7 properties in addition to its <ASLayoutElement> properties:

• direction. Specifies the direction children are stacked in. If horizontalAlignment and verticalAlignment were set, they will be resolved again, causing justifyContent and alignItems to be updated accordingly.
• spacing. The amount of space between each child.
• horizontalAlignment. Specifies how children are aligned horizontally. Depends on the stack direction, setting the alignment causes either justifyContent or alignItems to be updated. The alignment will remain valid after future direction changes. Thus, it is preferred to those properties.
• verticalAlignment. Specifies how children are aligned vertically. Depends on the stack direction, setting the alignment causes either justifyContent or alignItems to be updated. The alignment will remain valid after future direction changes. Thus, it is preferred to those properties.
• justifyContent. It defines the alignment along the main axis.
• alignItems. Orientation of children along cross axis.
• flexWrap. Whether children are stacked into a single or multiple lines. Defaults to single line.
• alignContent. Orientation of lines along cross axis if there are multiple lines.

With this configuration you can compose view based on CSS FlexBox.

ASInsetLayoutSpec

ASInsetLayoutSpec Example

You can use ASInsetLayoutSpec to set an Insets arround Node/View. Take a look at above example.

Hey, did you notice that we can chain LayoutSpec, Yes we can. The Beauty of LayoutSpec is you can create a complex composition from all LayoutSpec.

ASOverlayLayoutSpec

ASOverlayLayoutSpec Example

If you want to create an overlay loading view on top on your view, you can utilize ASOverlayLayoutSpec. Just determine which is child and the other one as overlay, and you will get overlaying view.

ASBackgroundLayoutSpec

ASBackgroundLayoutSpec Example

LayoutSpec to set the base background of a LayoutSpec. It’s quite similar to ASOverlayLayoutSpec, and the main difference is background spec’s size is calculated from the child’s size. Thus, it is important that the child (blue layer) must have an intrinsic size or a size set on it.

ASCenterLayoutSpec

ASCenterLayoutSpec Example

ASCenterLayoutSpec centers its child within its max constrainedSize.
If the center spec’s width or height is unconstrained, it shrinks to the size of the child.

ASCenterLayoutSpec has two properties:

• centeringOptions. Determines how the child is centered within the center spec. Options include: None, X, Y, XY.
• sizingOptions. Determines how much space the center spec will take up. Options include: Default, minimum X, minimum Y, minimum XY.

ASRatioLayoutSpec

ASRatioLayoutSpec Example

ASRatioLayoutSpec lays out a component at a fixed aspect ratio which can scale. This spec must have a width, or a height passed to it as a constrainedSize as it uses this value to scale itself.

ASRelativeLayoutSpec

ASRelativeLayoutSpec Example

Using Relative Layout, you can place view relatively to 9 positions based on 3x3, Horizontally start, center, end and Vertically start, center, end.

In the example above, you will put the view relatively to start at horizontal and start at vertical.

ASAbsoluteLayoutSpec

ASAbsoluteLayoutSpec Example

Absolute Layout Spec easily understandable when you imaging determine each view position manually, Texture support it too.

How we can implement it? Go to next series Let’s Get Our Hand Dirty with Texture