Compose phases. Episode 2 of MAD Abilities —  Compose… | by Jolanda Verhoef | Android Builders | Feb, 2023

With Compose being a declarative toolkit, we all know on the primary degree that it transforms information into UI. The three phases on this transformation course of are:

1. Composition: What to point out
2. Structure: The place to put it
3. Drawing: render it

These three phases are executed one after the other:

Through the composition section, the Compose runtime executes your composable features. It outputs a tree information construction that represents your UI. This UI tree consists of structure nodes. Collectively, these structure nodes maintain all the knowledge wanted to finish the subsequent phases.

Then, through the structure section, every aspect within the tree measures its youngsters, if any, and locations them within the obtainable 2D house:

Lastly, within the drawing section, every node within the tree attracts its pixels on the display:

Composition section

Let’s zoom in and focus solely on the underside a part of the display, the place you see the creator of the article, the publication date, and the studying time:

Through the composition section, we reworked composable features right into a UI tree. As we’re wanting solely on the creator aspect, we are able to zoom in on a subsection of our code and UI tree:

On this case, every composable perform in our code maps to a single structure node within the UI tree. It is a fairly easy instance, however your composables can comprise logic and management stream, producing a special tree given totally different states.

Structure section

After we transfer to the structure section, we use this UI tree as enter. The gathering of structure nodes comprise all the knowledge wanted to finally determine on every node’s dimension and site in 2D house.

Through the Structure section, the tree is traversed utilizing the next 3 step algorithm:

1. Measure youngsters: A node measures its youngsters, if any.
2. Determine personal dimension: Primarily based on these measurements, a node decides by itself dimension.
3. Place youngsters: Every baby node is positioned relative to a node’s personal place.

On the finish of the section, every structure node may have an assigned width and top, and an x, y coordinate the place it needs to be drawn.

So for our composable, this could work as follows:

1. The Row measures its youngsters.
2. First, the Picture is measured. It doesn’t have any youngsters so it decides its personal dimension and reviews it again to the Row.
3. Second, the Column is measured. It must measure its personal youngsters first.
4. The primary Textual content is measured. It doesn’t have any youngsters so it decides its personal dimension and reviews it again to the Column.
5. The second Textual content is measured. It doesn’t have any youngsters so it decides its personal dimension and reviews it again to the Column.
6. The Column makes use of the kid measurements to determine its personal dimension. It makes use of the most baby width and the sum of the peak of its youngsters.
7. The Column locations its youngsters relative to itself, placing them beneath one another vertically.
8. The Row makes use of the kid measurements to determine its personal dimension. It makes use of the most baby top and the sum of the widths of its youngsters. It then locations its youngsters.

One key take-away right here is that we visited every node solely as soon as. With a single move by way of the UI tree we have been in a position to measure and place all of the nodes. That is nice for efficiency. When the variety of nodes within the tree will increase, the time spent traversing it will increase in a linear vogue. In distinction, if we have been to go to every node a number of instances, the traversal time would enhance exponentially.

Drawing section

Now that we all know the sizes and x, y coordinates of all our structure nodes, we are able to proceed to the drawing section. The tree is traversed once more, from high to backside and every node attracts itself on the display in flip. So in our case, first the Row will draw any content material it might need, akin to a background colour. Then the Picture will draw itself, then the Column, after which the primary and the second Textual content:

Nice! We’ve seen how the three phases are executed for our composable. However we took some shortcuts.

If we return to the composition section, we mentioned we execute the code and construct the UI tree.

However wanting nearer on the code, we are able to see that it truly makes use of modifiers to vary the feel and appear of a few of our composables. In our UI tree, we are able to visualize these as wrapper nodes for our structure nodes:

After we chain a number of modifiers, every modifier node wraps the remainder of the chain and the structure node inside. For instance, after we chain a clip and a dimension modifier, the clip modifier node wraps the dimension modifier node, which then wraps the Picture structure node.

Within the structure section, the algorithm we use to stroll the tree stays the identical, however every modifier node is visited as effectively. This fashion, a modifier can change the dimensions necessities and placement of the modifier or structure node that it wraps.

Now, curiously, if we’d have a look at the implementation of the Picture composable, we are able to truly see that it itself consists of a sequence of modifiers wrapping a single structure node. Equally, a Textual content composable is carried out with a sequence of modifiers wrapping a structure node as effectively. And eventually, the implementations of our Row and Column are merely structure nodes that describe lay out their youngsters:

We’ll get again to this in a later weblog submit, however for now it’s good to consider a modifier as wrapping a single modifier or structure node, whereas a structure node can lay out a number of baby nodes.

So, with this psychological mannequin you now have a greater understanding of how the totally different phases in Compose work.

Within the subsequent submit we’ll dive a bit deeper into the structure section, and be taught to cause about how precisely layouts and modifiers affect the measurement and placement of their youngsters.

Received any questions? Go away a remark beneath or use the #MADCompose hashtag on Twitter and we’ll handle your questions in our upcoming dwell Q&A for the collection on March ninth. Keep tuned!