Skip to content

Commit

Permalink
grammar are difficult
Browse files Browse the repository at this point in the history
  • Loading branch information
Buildkite committed Jun 18, 2019
1 parent 789048c commit 7c5f8e3
Showing 1 changed file with 6 additions and 8 deletions.
14 changes: 6 additions & 8 deletions docs/_docs/development/layout-specs.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,9 @@ A layout describes how nodes should be dimensioned for display. This information

There are two types of layout engines you can choose from in Texture: default ASLayoutSpec system and Yoga. Here we will be covering the default Texture layout spec system.

The best way to learn this is to look at the Texture example projects and breakpoint and various functions in the subclassed `ASDisplayNode` to see how Texture expects its consumers to interact with its API and the paused call stacks.
The best way to learn this is to look at the Texture example projects and breakpoint at various functions in the subclassed `ASDisplayNode` to see how Texture expects its consumers to interact with its API and to step through the paused call stacks.

To create complex views, you would continually create nested layout specs.

Here is an example from the project `LayoutSpecExamples` where an `ASDisplayNode` subclass is created with subnodes, and a distinct layout function is used to describe the placement of those subnodes.
Here is an example from the project `LayoutSpecExamples` where an `ASDisplayNode` subclass is created with subnodes, and a layout function is used to describe the placement of those subnodes.

```
- (instancetype)init
Expand Down Expand Up @@ -56,7 +54,7 @@ Here is an example from the project `LayoutSpecExamples` where an `ASDisplayNode

## Layout flow

Layout calculations are done recursively with a few starting triggers. One of the starting triggers for the layout flattening is done when the traitCollection of a node changes, which typically happens anytime the frame of the view controller has changed.
Layout calculations are done recursively with a few starting triggers. One of the starting triggers for the layout flattening is done when the frame of a parent node changes. This also happens the first time a node tree is created.

Looking at the example project:

Expand All @@ -71,7 +69,7 @@ This is the function that will recursively call through its underlying tree of n

![layoutcallstack1](/docs/static/images/development/layoutspecs1.png)

This is what a typical call stack will look like for the layout of an `ASViewController` with a simple view hierarchy. Here we clicked on the "Photo with outset icon overlay" in the Layout Specs Examples project. Breakpointing on the `-[PhotoWithOutsetIconOverlay layoutSpecThatFits:]` reveals this call stack.
This is what a typical call stack will look like for the layout of an `ASViewController` with a simple view hierarchy. Here we clicked on the "Photo with outset icon overlay" in the Layout Specs Examples project. Breakpointing on the `-[PhotoWithOutsetIconOverlay layoutSpecThatFits:]` reveals that call stack.

The first significant branch of logic is the top level `-[ASDisplayNode calculateLayoutThatFits]` where it will choose between the Texture Layout and the Yoga engine.

Expand Down Expand Up @@ -100,7 +98,7 @@ The first significant branch of logic is the top level `-[ASDisplayNode calculat
}
```

This falls through the various callers to reach the node tree. This stack is relying on `ASDisplayNode` subclasses to implement the `-[ASDisplaynode(LayoutSpec) layoutSpecThatFits:]` method to return a *non-empty layout spec*.
This falls through the various callers to reach the nodes in the node tree. This stack is relying on `ASDisplayNode` subclasses to implement the `-[ASDisplaynode(LayoutSpec) layoutSpecThatFits:]` method to return a *non-empty layout spec*.

Notice in the `ASDisplayNode` base class:

Expand All @@ -118,7 +116,7 @@ The layout specs at this point in time are contributed toward a data store calle

Now at this point, no drawing is occurring. The drawing is where the layout specs become instructions for the rendering operation.

However, at this point between the above call stack and the below call stack, the backing UIKit objects of the `ASDisplayNode` have been put into a UIKit hierarchy. This is the intermediate step between preparing Texture layout specs and to when they are actually used to size UIKit objects.
However, at this point between the above call stack and the below call stack, the backing UIKit objects of the `ASDisplayNode` have been put into a UIKit hierarchy as either UIViews or "collapsed" as CALayers. This is the intermediate step between preparing Texture layout specs to when they are actually used to size UIKit objects.

Where these layout specs are used in the rendering operation is during the UIKit `layoutIfNeeded` phase. See `-[ASDisplayNode(UIViewBridge) layoutIfNeeded]`.

Expand Down

0 comments on commit 7c5f8e3

Please sign in to comment.