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

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

1. Composition: What to indicate
2. Provision: the place to place it
3. Drawing: methods to render it

These three phases are executed one after the other:

In the course of the composition part, the Compose runtime executes your composable features. Produces a tree knowledge construction that represents your person interface. This person interface tree consists of format nodes. Collectively these format nodes include all the data wanted to finish the following phases.

Then in the course of the design partevery tree component measures its kids, if any, and locations them within the out there 2D area:

Lastly, within the drawing partevery tree node attracts its pixels on the display screen:

composition part

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

In the course of the compose part, we rework the composable features right into a UI tree. Since we’re solely trying on the creator component, we will zoom in on a subsection of our code and UI tree:

On this case, every composable perform in our code maps to a single format node within the UI tree. This can be a pretty easy instance, however your composables can include logic and management movementproducing a special tree given totally different states.

Format part

After we transfer to the design part, we use this UI tree as enter. The gathering of format nodes comprises all the data essential to lastly resolve the dimensions and site of every node in 2D area.

In the course of the design part, the tree is traversed utilizing the next 3-step algorithm:

1. measure kids: A node measures its kids, if any.
2. Resolve your personal dimension: Based mostly on these measurements, a node decides its personal dimension.
3. Place the kids: Every little one node is positioned relative to the correct place of a node.

On the finish of the part, every design node will likely be assigned a broad and topand a x,y coordinate the place to attract

So, for our composable, this is able to work as follows:

1. He Row measures their kids
2. First the Picture it’s measured. He has no kids so resolve your personal dimension and studies it again to Row.
3. Second, the Column it’s measured. wants extent their very own kids first.
4. The primary Textual content it’s measured. He has no kids so resolve your personal dimension and studies it again to Column.
5. The second Textual content it’s measured. He has no kids so resolve your personal dimension and studies it again to Column.
6. He Column use the kid’s measurements to resolve your personal dimension. use the little one max width and the top sum of their kids.
7. He Column place your kids with respect to itself, inserting them one under the opposite vertically.
8. He Row use the kid’s measurements to resolve your personal dimension. use the kid’s most top and the sum of widths of their kids. so place your kids.

A key conclusion right here is that we go to every node solely as soon as. With a single step by means of the UI tree, we have been in a position to measure and place all of the nodes. that is nice for efficiency. Because the variety of nodes within the tree will increase, the time spent traversing the tree will increase linearly. Conversely, if we have been to go to every node a number of instances, the traversal time would improve exponentially.

drawing part

now that we all know the sizes and x,y coordinates of all our format nodes, we will proceed with the drawing part. The tree is traversed once more, from prime to backside and every node attracts itself on the display screen Successively. So in our case, first the Row it can draw no matter content material it might need, similar to a background coloration. So he Picture will draw itself, then the Columnafter which the primary and the second Textual content:

Glorious! We now have seen how the three phases are executed for our composable. However we take some shortcuts.

If we return to the compose part, we mentioned we run the code and create the UI tree.

However taking a more in-depth take a look at the code, we will see that it really makes use of modifiers to alter the looks of a few of our composables. In our UI tree, we will visualize them as wrapper nodes for our format nodes:

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

Within the design part, the algorithm we use to stroll the tree stays the identical, however every modifier node can also be visited. On this approach, a modifier can change the dimensions necessities and the situation of the modifier or the format node it wraps.

Now, apparently, if we take a look at the implementation of the Picture composable, we will really see that itself consists of a sequence of modifiers that wrap round a single format node. Equally, a Textual content composable is carried out with a sequence of modifiers that additionally wrap a format node. And eventually, the implementations of our Row and Column they’re merely format nodes that describe methods to format their kids:

We’ll come again to this in a later weblog submit, however for now it is good to consider a modifier like wrapping a single modifier or format nodewhereas a format node can format a number of little one nodes.

So with this thoughts mannequin You now have a greater understanding of how the totally different phases work in Compose.

Within the subsequent submit we are going to delve somewhat deeper into the design partand study to purpose about precisely how designs and modifiers affect the dimensions and placement of their kids.

Do you’ve gotten any query? Go away a remark under or use the hashtag #MADCompose on Twitter and we’ll reply your questions in our subsequent stay Q&A for the collection on March 9. Keep tuned!