iOS development (for all iOS devices)-autolayout Getting Started

As smartphones evolve today, the size of the screen becomes more and more, from the original 3.5-inch screen to the later 4-inch screen, until Apple launches the iphone 6 and iphone 6Plus, announcing that the Apple camp has been completely compromised into an era of screen-size fragmentation. Days that are designed for only one screen size are no longer present. In order to fit all screens, the designer must consider various screen sizes. But it's not possible to design each size again. So how do we face the dilemma of screen fragmentation?

Figure 1, image from: HTTP://WWW.PAINTCODEAPP.COM/NEWS/ULTIMATE-GUIDE-TO-IPHONE-RESOLUTIONS

The answer that Apple gives is AutoLayout. Allows you to use a design to fit all screens, theoretically from iPhone4 to ipad Pro. It wants you to forget about a specific size. You can actually drag out a canvas of any size to design, and you can give it to an engineer to develop it.

First, let's take a look at the Apple development software Xcode on how you make the page layout.

Figure 2,xcode. STORYBOARD

The middle of the white square is the canvas, if you are using storyboard layout (there are many kinds of layout of iOS, storyboard is just one of them, I will say later), you can put your design of the control on this canvas, Define their position relationships based on the dimensions you have labeled, and the next AutoLayout will automatically fit each screen. It sounds like magic.

Some people will have questions: I am based on the size of the iPhone6 design and labeling, how can be in a square according to the size of my mark to set their position relationship, put on this square, my label is not all messed up? The answer is, yes, it is not. If you design and label only for the IPhone6, and put the problem of adaptation to the engineer, it is likely that the final result is not what you want. Conversely, even if you are designing on a iPhone6, but you are not limiting your thinking to a certain size, your annotations will not be messy on a square.

To be exact, if you are designing an interface based on constraint (constraint-based), your design will follow suit regardless of how the screen changes.

I'll talk about how AutoLayout works, and how to design with the idea of restraint.

For iOS development, you typically use two layouts. One is to locate a frame that uses code to set each view. The other is to use AutoLayout for layout (which can be done on storyboard, or you can use code). Let's say we have two views, A and B, in the size of IPhone6 (375*667).

Tips: The units used in iOS development are point, which is the size under @1x. If you are designing in IPhone6 (750*1334px) size, the size of the inside is divided by 2. So we recommend that you design in a @1x environment. This article does not do special instructions, the label of non-standard units, the default units are point.

1.Frame positioning

The way to set up a frame for positioning is not the focus of this article, I'll just give you a brief introduction here. First, the coordinate system in iOS is a little different from what we usually use. Its coordinate origin is in the upper-left corner. Each view has its own independent coordinate system. See.

Figure 3, using frame for positioning

Usually we define a frame code (Swift) like this:

1	let frame = CGRectMake(x:CGFloat, y:CGFloat, width:CGFloat, height:CGFloat)

Of course you don't need to read it, just know it requires you to provide four parameters: X,y,width,height. X, y is the coordinates of the origin of the view you want to locate relative to the (superview) coordinate system of the view that contains it. Width,height is, of course, the width and height of the view you want to position.

To summarize, you will need to provide location information and dimension (size) information.

So the frame in a, and B should look like this:

12	let frameA = CGRectMake(60, 60, 255, 160)let frameB = CGRectMake(60, 280, 255, 160)

2.AutoLayout positioning

The logic behind the AutoLayout layout is completely different from the previous one. The same diagram, AutoLayout can be expressed in this way.

Figure 4,autolayout Layout

AutoLayout is usually positioned by defining a series of constraints (constrains). As with frame positioning, it also requires you to provide location and size information, but unlike frame, it does not allow you to provide x,y,width,height directly, but to infer the corresponding size and position by the constraints you give. You can only pass if you infer location and size information from the constraint relationships you give, and there is no conflict.

As in view a, we set its position by the upper and lower left and right four constraints. We have provided its height, but we have not given its width. As I said before, to determine the layout of a view, you need to provide location and dimension information. And here we are not providing width. The width should not be a fixed number, you need to autolayout yourself through the existing constraints to infer the width of view a = 375 (screen width)-60-60 = 255, so that when the width of the screen changes, the width of view a will vary.

AutoLayout can automatically calculate the position and size of the view you define based on the constraints you set on the corresponding view.

Figure 5, when the external environment (screen width) changes

When the surrounding environment changes, it also changes, this is the AutoLayout can adapt to different screens of the secret.

AutoLayout's application is not limited to dealing with changes in the external environment (screen size changes), even in the same screen, when the page content starts to change, AutoLayout can also make corresponding adjustments. Suppose now, for some reason, the height of view a becomes 210. Then the following two results will appear:

Figure 6 Left, FRAME

Figure 6 Right, AutoLayout

With frame positioning method, because the position information of the view a, B is independent, a changes, and does not affect the position of B, so when a is high, the distance between A and B is compressed, it can be imagined that when a continues to become high, a and a. This is obviously not the effect we want to see.

The AutoLayout is different, because the position of the B height direction is relative to a, so when a becomes high, the position of B will change. This is, of course, the result we want to see.

Thus, AutoLayout's application scenario is not limited to adapting to different screen sizes, even while the software is running, it can be adjusted when the page changes.

Need to mention is that the use of frame positioning is also able to achieve the above AutoLayout effect, but we can also use AutoLayout to achieve like frame, A, B does not affect each other effect, I do not elaborate here, interested can think for themselves. This example is just to illustrate the difference between absolute positioning and relative positioning.

Properties of 3.AutoLayout (AutoLayout Attributes)

There are many more properties available to you than the x,y,width,height,autolayout that the frame typically provides, and these are the common attributes:

• Left

• Right

• Top

• Bottom

• Leading

• Trailing

• Width

• Height

• CenterX

• CenterY

• Baseline

To view all properties click here: Nslayoutconstraint

Figure 7,autolayout Properties

These attributes can also be divided into two categories: size (sizes) such as width, height, position (location), such as Leading,trailing,top,button.

With these properties, not only can we define distances between different views, align them, define relative dimensions between different views, and even define the aspect ratio of a view.

It is noteworthy that the leading and trailing are not equal to left and right. Leading represents the starting position of reading. Usually we are accustomed to reading from the left to the right, in which case leading is left,trailing. But not all countries are in this way, such as ancient Chinese books, right to left, and this time the leading right. If your app users are internationalized, you need to be aware of this problem. Normally, we use leading,trailiing.

Figure 8, the difference between leading and trailing in different language environments

Figure 9

Assuming that we have the above two view, they are now required to have a distance of 8, as shown in. Then the binding relationship between them can be expressed as:

1	ViewB.Leading = 1.0 x ViewA.Trailing + 8

where 1.0 is a coefficient (Multiplier), in which case the coefficient is 1.0

4. An example

Here is a specific example to illustrate the AutoLayout application.

Let's say I've designed this interface (375*667), and I'm going to give it to an engineer to develop it. My request is as follows:

1. Three views are 37.5 from both sides of a page

2. The distance between each view, including the view distance from the top and bottom of the page, is the same as 40

3. The width and height of the three views are the same.

I've labeled these requirements, and here's what I want to achieve and what I've labeled:

Figure 10 left, the effect I want to achieve

Figure 10 Right, my annotations

Let's analyze our annotations first.

First I asked each view to be 37.5 from the side of the page. I made this very clear in the annotations.

Second, I asked for the distance between each view, including the view from the top of the page and the bottom of the same distance, 40. I also made this very clear in the annotations.

Finally, I want the width and height of each view to be the same. In the callout, the height of each view is labeled 169, which is as high as I want. I gave the first visual icon a width of 300, the other two and the first one, and also 300, in line with my width requirements.

At first glance, there is no problem with this callout. But here we have overlooked a very important question. I designed this figure in iPhone6 size, but it doesn't just appear on the iPhone6 screen. According to the above label, the total width of the callout = 37.5*2 + = IPhone6 screen width (375). But if you change a cell phone screen, the equation is not set up. Again, the height is the problem. This has created a conflict with the actual situation.

Tips: When your label is in the width direction, or the height direction of the value is equal to a specific screen size, you need to go back to check your labels, you need to explain the size is fixed, which size is variable.

Obviously, the engineer is unable to meet all of the size requirements you have marked. If he only sees the callout file you gave, and doesn't know your three-point request. Then there are several possibilities in the width direction of this callout:

1. Keep the margin (margin) requirement on each side 37.5, and the width of each view will be scaled according to the width of the screen.

2. The width of each view remains 300 constant, and the margins on both sides are scaled according to the width of the screen

3. The width and margins of the view are scaled along with the width of the screen

Judging from our previous requirements, we want the first possibility, but our annotations do not explain this point very well. Engineers need to rely on their own understanding to choose one of them, sometimes his choice may not be the result we want.

How do we label, to express my request very well? The correct labeling should look like this:

Figure 11, the correct labeling method

First, I removed the width of the callout, as in the previous example, we need to autolayout ourselves to calculate its width, which means we want the width of each view to change with the width of the screen. Secondly, I remove the height of the specific value, only one h is marked. Again, because the height of the screen is not fixed, I can't give a specific height, but I'm asking for the same height for each view. The height of each view is indicated by the height of H.

5. Expression of three different possibilities

As I said before, there are probably three different interpretations of the annotations I gave for the first time, so how can we express these three possibilities? Let me just say, how to use AutoLayout notation, to express the above three kinds of possibilities.

Figure 12

The first view of the callout, keeping the margin (margin) on each side of the 37.5 requirements, the width of each view according to the width of the screen to scale, as mentioned above.

The second one, I marked the width, the margin is not marked. But we want it to be centered horizontally, using this constraint to determine the position of the horizontal direction. This allows the margin to vary depending on the width of the screen.

Third, I marked the width of the screen width of 80% so that it can be scaled with the screen.

Figure 13

I added the above required constraints on Xcode and chose to run on different emulators. This will allow us to see the effect of the pages we have designed running on different devices. Here's how it looks on different screen sizes:

Figure 14

As you can see, the three views that are exactly the same on the IPHONE6 should have different constraints for us, and a different effect on each device. Because AutoLayout is based on the constraints you set, it automatically calculates the position and size of the view you define.

In order to fit more screens, we need to lay out a relatively positioned mind when designing.

iOS development (for all iOS devices)-autolayout Getting Started