Editing Introduction: Automatic layout is the key in any application, and it can achieve the effect of doing more with less. This article takes you to an in-depth understanding of automatic layout, help you master the advanced gameplay of automatic layout, let's take a look!
The initial gameplay of the automatic layout is more focused on the basics and the outside, and the real advanced gameplay I left here.
Understanding is more expensive, so I used some storytelling methods that I hope will make it easier for you to learn and master.
First, the essence of automatic layout (core)
The essence of automatic layout lies in the control of the dynamic relationship between father and son.
The Gorilla said to Sakuragi in episode SD12 that if you can control the rebounds, you can control the game. (Yes, I'm offering this picture again)
I think that by mastering the parent-child dynamics, you can control the automatic layout.
In automatic layout, the Resizing function can specifically implement this dynamic relationship.
You may be very confused when you see this, what is the parent-child dynamic relationship? What is Resiliency? Don't worry, we'll talk about it below.
What is Rezising (what)
If you create an automatic layout, you'll find that underneath the auto layout panel, there's one more thing, which is Resetting.
Its Chinese translation "resize" is difficult to say, the text is not expressive and easy to mislead, so I only call it English.
Let's take a look at the official description of it: when the parent or child of an object changes size, you can control how it adapts through Resizing.
It can be a bit obscure, so I'll make an analogy:
Now, the "Director Please Advise" column group has discovered your unparalleled talent as a director and invited you to perform in the program group (chao) (zuo), and the theme of this film is "father-son love".
Now you have a screenwriter like Resizing, who has written three scripts related to father-son relationships.
And what you have to do is to use your brilliant intellect to determine the right script to determine the direction of the relationship between father and son in different scenarios, so as to overthrow your opponent.
The direction of the relationship between father and son here is the dynamic relationship between father and son that I mentioned above.
And these three scripts are called Hug Contents, Fill Container, and Fixed size. You can find them in the two drop-down boxes on the right side of Resizing. These two drop-down boxes represent the landscape and portrait orientation of the child or parent, respectively.
What is the icon on the left?
Here to quote the Straw Hat Teacher's point of view, Resizing is easy to give you a big part of the reason, lies in the icon on the left. It looks intimidating, but in fact, the left icon and the right drop-down box implement a function.
Because the icons are very difficult to use, my advice is to just go through the drop-down box on the right to select the script.
Three plays by Rezising (juben)
Below, I will briefly explain these three scripts for you. Understand these three scripts, and your automatic layout is basically not a problem. (Note that the following involves the relationship between father and son, if you do not understand these concepts of the small partner, it is strongly recommended to read the [6000 words super dry goods] did not get this concept, figma is really useless!) In the two sections of object relationship and frame all-in-one advantages~)
1. Hug contents
The main line of the hug contents script is "the father listens to the son" - that is, the size of the parent changes with the size of the child. The protagonist of this script is the father.
For example, the button below is the parent, and the text inside the button is the child.
We set the protagonist's (parent's) Resizing as Hug contents, and the next plot follows this script - no matter what the length of the child, the size of the parent of the button always changes with the child.
Because this script is used in the most scenarios, it is also the default script for all auto layouts.
Let's start with the conclusion: all parents and text children. (The following analysis process is somewhat winding, which can be skipped directly, and does not affect the mastery of Resizing)
Hug contents are parents follow children, so the object we selected must have children for us to follow. It's like the protagonist wants to listen to his son, provided he has to have a son.
Therefore, as the only child without sons, the button text should not appear in the Hug contents script when choosing it.
But to my surprise, it has this option when it is a child. It doesn't appear when we replace the text with another layer (such as shapes).
In fact, this is because the type layer itself has properties similar to Resizing, so the type sub-level is allowed to have the Hug contents function.
The Resizing of text, which is also known as the three properties of text boxes: automatic width, automatic height and fixed size.
These three properties are similar to Resizing in automatic layout, and there is also a one-to-one or one-to-many correspondence between them.
For example, if you define its attribute as automatic width, you will find that the horizontal and vertical scripts use Hug contents, but if you change the landscape to Fixed width, you will find that the text box attribute becomes automatic height.
This characteristic of horizontal fixed width and longitudinal adaptation corresponds to this property.
2. Fill container
Fill container Is the complete opposite of the above script, its nickname is "Your Father or Your Father", the main line is "the son listens to the father", that is, the size of the child changes with the change of the parent. Its protagonist is the son.
Continuing with this button example, we have set the padding value (inner spacing) of 8px up and down and 24px left and right during the automatic layout.
Then, horizontally, set the child to Fill container. Then change the width of the parent, and you will find that regardless of the size of the parent, the width of the child will always be based on the set padding value, following the response change.
Let's start with the conclusion: as a child of the protagonist. The so-called child is the object wrapped by the parent (frame, group, etc.), because only in this way can the child follow.
So the object we selected, if it is not wrapped by the parent (such as the top frame artboard placed directly on the canvas), the Fill container script is not available.
3. Fixed size
In the above two scripts, one party must listen to the other.
Resizing felt that the character relationship was not antagonistic enough to attract attention, so he created a third screenplay Fixed size, the main line is "son and Lao Tzu are enemies, no one obeys anyone".
When we fix the horizontal or vertical dimensions of an element, none of its dimensions change with the parent or child. On the surface, it is still as intimate as before, but it has long been in the form of a strange road.
For example, for this button, we fix the width of the child, after changing the width of the parent (button container) or child, the width of the child will always remain fixed, and it does not follow the change like the fill container.
Then, we fix the height. The dimensions of the parent or child are changed, and the child height also does not follow the change.
After the child is done, let's try the next parent.
We go back to the original starting point and set the child hug contents, and the parent fixes its width and height. Then after adding the text, it can be found that no matter how the child changes, the width and height of the parent itself remains unchanged.
4. Fight
Here we continue to use the auto-layout cards we made in our previous article.
Our goal is to achieve the dynamic response of this card through the Function of Resizing. The final effect should look like this:
First, pushing back from the target, to achieve this effect, is to have the internal children follow the entire card parent. So we chose the son to listen to the father's script - Fill container, and applied it to our children - two nested auto-layout frames above and below.
After application, the dimensions of the author unit are stretched because they follow the parent.
But! We didn't react when we changed the card size.
This is because the Fill container can only decide that the child follows the parent of the current layer. If there are multiple nested layers, then the children of each layer have to apply the script and link with each other to take effect.
For example, for this card, we only apply the script to the two frames under the first-level split, so the child's rule of following the parent's change only takes effect at this level. However, the children under the more subdivision do not take effect, so the overall card will not respond normally.
It's like those gears in the dial, if the nozzle of any one gear is not connected, then the whole clock cannot run.
Therefore, we need to apply the script to all the embedded children in order to make the whole card respond dynamically.
Here I use a diagram to illustrate the process of this dismantling. We disassemble from the outermost top frame until we can't. As you can see, the objects at each layer are made up of nested frames and unique children (chidlren).
These are the objects to which the script can be applied. Of course, the script needs to be selected according to the scene. I want the avatar to stay fixed, so arrange the fix size to fix its width and height. For the other objects, I want to be able to follow the parent changes, so the Fill container is arranged uniformly.
Finally, put on a show, perfect.
Fifth, finally
Let's take stock of the knowledge points of this article together——
Automatically laid out Resizing helps you implement parent-child dynamic relationships, and it has three scripts: Hug contents, Fill container, and Fixed size;
Hug contents: Parent follows child. It is the default script for auto-layout;
Fill container: The child follows the parent. This feature enables dynamic responsive layout;
Fixed size: No one follows anyone. Commonly used for objects that need to be fixed in size (such as avatars)
The Fill container can only determine that the child follows the parent of the current layer, so when there is a multi-layer nested structure, each layer must be considered.
Original is not easy, if this article has helped you a little, welcome to click "in the look", support my original and let it help more friends.
I'm Andrew, a designer who thinks of writing as a career.
See you in the next issue.
This article was published by @Andrew Design Notes under license from Everyone is a Product Manager. Reproduction without permission is prohibited.
The title image is from Unsplash, based on the CC0 protocol.