IOS 9 Auto Layout Interface automatic Layouts Series 6-Adaptive layouts

Design mm Xiao Yin: "Xiao Li, e-mail is our design user login interface First Draft, please see if there is any technical problems." ”
Program Ape Xiao Li: ok, I'll take a look. ”
Xiao Li opens the mail and sees the first draft of the interface design as:

This is a unified app (Universal app) that supports both iphone and ipad. Although Xiao Li is familiar with auto layout, but after seeing the design manuscript, Xiao Li has made a difficult. Because the layout of the iphone's horizontal screen in the design is special, if you add a set of automatic layout constraints as shown in Figure 1, the program needs to determine the device type (currently an iphone or ipad?). ) and the current device's orientation (horizontal or vertical)? ）。 If the iphone is a horizontal screen, then you have to re-modify the constraint as required in Figure 2. Automatic Layout Series 5 mentions the 3 ways to modify interface constraints: Changing the constant value of the constraint, deleting the old constraint, adding a new constraint, and modifying the precedence of the constraint. Either way, for our example, it is cumbersome and error-prone. You need to change a bunch of constraints on the iphone's vertical screen, and then change it back when you go to the vertical screen. And do not say that the level of the interface is not complicated, if you really encounter a very complex interface layer is very deep interface, for developers that is a nightmare.

The confusion that Xiao Li encounters, I think most readers also have met. Some readers, aa3214560, have also raised such questions on my blog:

aa3214560 2015-10-27 20:27 Published:
Bloggers, there is a problem with automatic layout is very confused. Hope to help explain. How to use the automatic layout in xib or storyboard in iOS is how to fit a variety of screens. For example, iphone5 height is 568,6 height is 667, when there is a control is 600 from the top margin, this in iphone5 how to display (of course, you can use the distance from the bottom margin to solve). Or when a TextField is 100 from the left and 100 on the right, the size may be good on the iphone6, but it narrows on the iphone5. What you want to know here is, AutoLayout distance from the upper, lower, left, and right are all written dead, and this role in the adaptation is still not big ah? Is it a set of constraints, or a constraint based on the adjustment of the spacing, so that on each screen can be more perfect display (a set of constraints total feeling imperfect)? Always feel like you're stuck at some point. I hope I can help troubleshoot a bit, thank you very much.

In fact, the core of the problem is that a set of automatic layout constraints is difficult to flexibly adapt to the view in different sizes of all layouts. To solve this problem, Apple proposed adaptive layout in the iOS 8 SDK (let's translate: adaptive layout), which is what this article explains. If Xiao Li's app also needs to support iOS 6 and 7, then unfortunately this content can't help him, he can only use a set of constraints and modify. If you only need to support iOS 8 and later, then he can use the adaptive layout to easily solve this problem.

First, size type

Describe the size of a 2-D graphic, and the simplest is whether it is large or small in both horizontal and vertical directions. For example, a high-definition TV screen with a large horizontal orientation and a small vertical direction. The big and small here are conceptually relative, with the screen of the cinema and the high-definition TV screens, which are both horizontal and vertical in size. The screen of the laptop and the HDTV screen are smaller in both horizontal and vertical directions.

In the adaptive layout, Apple presents the concept of size Class (dimension type), which is used to conceptually indicate the horizontal or vertical size. A total of 3 types of sizes, large called regular (standard size type, précis-writers +), small called compact (compact size type, précis-writers-), the last one will be mentioned later.

The following table lists the size types of iOS devices:

In this article we have agreed to describe in the following format:

[Horizontal dimension type, vertical dimension type]

This table shows the default dimension types for horizontal and vertical orientations in different orientations of different devices:

• All ipad regardless of location is [+, +]
• All iphone on vertical screen is [-, +]
• Only iphone 6 Plus and 6s Plus on a horizontal screen are [+,-] and the rest of the iphone is [-,-]

Are there any eggs for the size type? In short, we can design a corresponding set of automatic layouts for different size types. For example, I can design a set of automatic layouts for [+, +] on the ipad, and the rest are used on the iphone with another set of automatic layouts, so it doesn't solve the previous problem well.

Here, in addition to the standard and compact, there is also a size type of any (arbitrary size type, précis-writers *). We all know the inheritance of the class, put the common, abstract things in the base class, the difference, the specific things in the sub-class. Apple also wants us to be able to handle adaptive layouts in a similar way, where the * is similar to wildcards and can match + or match. Therefore, when the designer gives the interface design on different devices, as a developer, we should first summarize the most common automatic layout scheme, as the automatic layout of any size type (base class), the differentiated layout in a particular size type of automatic layout (subclass). In the example below, Figure 1 can be used as a general layout, and Figure 2 can be used as a special layout method.

That might be a bit difficult to understand, so let's take a practical example to illustrate how to use the size type in Interface Builder to implement adaptive layouts.

Not finished, to be continued ...

If you have any suggestions, comments or questions about what I write, please go to my csdn blog:

Http://blog.csdn.net/pucker

IOS 9 Auto Layout Interface automatic Layouts Series 6-Adaptive layout