Automatic layout guide -Part 2: automatic layout manual

From “Auto Layout Guide”.

2 automatic layout manual

2.1 stack view

The next chapter shows how to create a more complex layout using the stack view. Stack view is a powerful tool for designing user interfaces quickly and easily. Their properties allow depth control on how to layout views. You can use additional, custom constraints for further settings; but this will increase the complexity of the layout.

View Auto Layout Cookbook project, access to the source of this chapter.

2.1.1 simple stack view

This section uses a single vertical stack view to layout a label, a picture view, and a button.

Automatic layout guide -Part 2: automatic layout manual

2.1.1.1 views and constraints

In the interface builder, drag and drop a vertical stack view and add a label, a picture view, and an edit button. Then set the constraint as follows.

Automatic layout guide -Part 2: automatic layout manual
  1. Stack View.Leading = Superview.LeadingMargin
  2. Stack View.Trailing = Superview.TrailingMargin
  3. Stack View.Top = Top Guide.Bottom + Standard Layout
  4. Bottom Layout Guide.Top = Stack View.Bottom + Standard

2.1.1.2 attribute

In the property inspector, set the properties of the stack view below:

Stack Axis Alignment Distribution Spacing
Stack View Vertical Fill Fill Eight

Next, set the following properties on the picture view:

View Attribution Value
Image View Image A picture of a flower
Image View Mode Aspect Fit

Finally, in the property inspector, set the content-hugging and compression-resistance (CHCR) properties of the image view.

Name Horizontal hugging Vertical hugging Horizontal resistance Vertical resistance
Image View Two hundred and fifty Two hundred and forty-nine Seven hundred and fifty Seven hundred and forty-nine

2.1.1.3 discussion

You must fix the stack view to the parent, but the stack view does not use any other explicit constraints to manage the entire layout.

In this section, the picture view with a small, standard margins filled with its parent view. Arrange the view resize to fill the stack view of the bounds. Horizontally, each view stretches the width of the stack view. In the vertical direction, the view is based on CHCR. The picture view is always reduced and enlarged to fill the available space. As a result, its vertical content hugging and resistance priority must be lower than the default priority of the tags and buttons, and the compression.

Finally, set the picture view mode to Aspect Fit. This setting forces the image view to resize the image view bounds while maintaining its aspect ratio. This stack view can adjust the size of the image view, and the picture will not deform.

For more information about the parent view of a fixed view, refer to “Attributes” and “Adaptive Single View””.

2.1.2 nested stack view

This section shows a complex layout built from multiple nested stack views. However, this example cannot be created using stack views only. But the need for additional constraints to adjust the layout.

Automatic layout guide -Part 2: automatic layout manual

After you create the view hierarchy, add the constraints shown in the next section.

2.1.2.1 views and constraints

The easiest way to use nested stack views is from inside to outside. In the interface builder, start the layout from the name line. Place labels and text boxes to the correct relative position, select them, and then click Editor > Embed In > Stack View menu item. This creates a horizontal stack layout.

Next, place the rows vertically, select them, and then click Editor > Embed In > Stack View menu item. This creates a vertical stack view. Continue to create the interface as shown below. Is the horizontal placement of these lines, the document is wrong, or I understand wrong?

Automatic layout guide -Part 2: automatic layout manual
  1. Root Stack View.Leading = Superview.LeadingMargin
  2. Root Stack View.Trailing = Superview.TrailingMargin
  3. Root Stack View.Top = Layout Guide.Bottom + 20 Top
  4. Bottom Layout Guide.Top = Stack View.Bottom + 20 Root
  5. Image View.Height = Image View.Width
  6. First Name Field.Width = Middle Text Name Text Field.Width
  7. First Name Field.Width = Last Text Name Text Field.Width

2.1.2.2 attribute

Each stack view has its own set of properties that define how the stack view layout its contents. In the property inspector, set the following properties:

Stack Axis Alignment Distribution Spacing
First Name Horizontal First Baseline Fill Eight
Middle Name Horizontal First Baseline Fill Eight
Last Name Horizontal First Baseline Fill Eight
Name Rows Vertical Fill Fill Eight
Upper Horizontal Fill Fill Eight
Button Horizontal First Baseline Fill Equally Eight
Root Vertical Fill Fill Eight

In addition, give the text a light gray background color. When the direction changes, it is easier to see how the text view is resized.

View Attribute Value
Text View Background Light Gray Color

Finally, the CHCR priority defines which view should be stretched to fill the available space. In the dimension inspector, set the following CHCR priority:

Name Horizontal hugging Vertical hugging Horizontal resistance Vertical resistance
Image View Two hundred and fifty Two hundred and fifty Forty-eight Forty-eight
Text View Two hundred and fifty Two hundred and forty-nine Two hundred and fifty Two hundred and fifty
First, Middle, and Name Last Labels Two hundred and fifty-one Two hundred and fifty-one Seven hundred and fifty Seven hundred and fifty
First, Middle, and Name Text Last Fields Forty-eight Two hundred and fifty Seven hundred and forty-nine Seven hundred and fifty

2.1.2.3 discussion

In this section, multiple stack views jointly manage most layouts. However, they cannot create all the desired behavior. For example, when the picture view is resized, the picture should be kept in aspect ratio. Unfortunately, there is no way to use the simple stack view. The layout needs to fill both the end and bottom edges of the image, and use the Aspect Fit pattern to add an extra blank area to one of the dimensions. Fortunately, in this example, the picture is square, all the pictures can be filled with a full view of the bounds image, and the constraint of the picture view length width ratio of 1:1.

It is suggested that the
aspect ratio constraint is a simple constraint between the height and width of the view. The interface builder has multiple ways to display the multiplier of the constraint. Usually displayed as a percentage. So, View.Width = View.Height constraint may be shown as 1:1 aspect ratio.

In addition, the width of all text boxes should be equal. Unfortunately, they are in a different stack view, so the stack view cannot be controlled. You must explicitly specify the constraint of equal width.

Similar to the simple stack view, you must also modify some CHCR priority. When they define the bounds change of the parent class, how to zoom in and zoom out.

In the vertical direction, the desired text view expands to fill the space between the above stack view and the following button view. So, the vertical content of the text view must be smaller than other vertical content hugging.

In the horizontal direction, the size of the label should be the intrinsic content size, while the text box adjusts the size to fill the remaining space. The default CHCR priority of the label can be. The interface builder has set content hugging to 251, which is higher than the text box; however, it also needs to reduce the level of the text box content hugging and the level of horizontal compression resistance.

The picture view should be reduced to the same height as the stack view that contains the name line. Stack views, however, simply touch their contents. This means that the vertical compression resistance of the image view must be very low, so that the image view can be reduced, rather than the stack view. In addition, the aspect ratio constraint of the picture view complicates the layout because it allows vertical and horizontal constraints to interact. This means that the level of the text box content hugging must also be very low, otherwise they will block the image view to narrow. In these two cases, set the priority to 48 or lower.

2.1.3 dynamic stack view

This section describes the runtime to dynamically add and remove items in the stack view. All changes to the stack view are animated. In addition, the stack view is located within the scroll view. If the list is out of the screen, you can scroll the list.

Automatic layout guide -Part 2: automatic layout manual

This section is meant to describe the dynamic use of the stack view, and the use of a stack view in the
view. In real applications, you should use UITableView. In general, you should not use a dynamic stack view to implement table view functions from scratch. Instead, use them to create a dynamic user interface, and the interface can not be easily constructed using other techniques.

2.1.3.1 views and constraints

The initial user interface is simple. Place a scroll view in the scene to fill the scene. Next, place a stack view in the scroll view and place a Add Item button in the stack view. Then set the constraint as follows:

Automatic layout guide -Part 2: automatic layout manual
  1. Scroll View.Leading = Superview.LeadingMargin
  2. Scroll View.Trailing = Superview.TrailingMargin
  3. Scroll View.Top = Superview.TopMargin
  4. Bottom Layout View.Bottom = Scroll + 20 Guide.Top
  5. Stack View.Leading = Scroll View.Leading
  6. Stack View.Trailing = Scroll View.Trailing
  7. Stack View.Top = Scroll View.Top
  8. Stack View.Bottom = Scroll View.Bottom
  9. Stack View.Width = Scroll View.Width

2.1.3.2 attribute

In the property inspector, set the following stack view properties:

Stack Axis Alignment Distribution Spacing
Stack View Vertical Fill Equal Spacing Zero

2.1.3.3 code

This section requires some code to add and remove items in the stack view. Create a custom view controller for the scene, using outlet to connect the scroll view and stack view.

Class DynamicStackViewController: UIViewController weak private var scrollView: {@IBOutlet UIScrollView @IBOutlet weak private var stackView:! UIStackView! Method implementations will go / / here}...

Next, override the viewDidLoad method to set the initial position of the scroll view, so that the contents of the scroll view begin below the status bar.

Override func (viewDidLoad) {super.viewDidLoad (Scrollview let insets) / / setup = UIEdgeInsetsMake (20, 0, 0, 0) scrollView.contentInset = insets scrollView.scrollIndicatorInsets = insets}

Now, add action methods for the Add Item button.

Action Methods @IBAction func addEntry / MARK: (sender: AnyObject) {let stack = stackView let index = stack.arrangedSubviews.count - 1 let addView = stack.arrangedSubviews[index] let scroll = scrollView let offset = CGPoint (x: scroll.contentOffset.x, y: scroll.contentOffset.y + addView.frame.size.height) let = createEntry (newView) newView.hidden = true (stack.insertArrangedSubview newView, atIndex: index) {UIView.animateWithDuration (0.25) (->); Void in newView.hidden = false scroll.contentOffset = offset}}

This method calculates a new offset for the scroll view, and then creates a new entry view. The entry view is hidden and added to the stack. The hidden view does not affect the appearance or layout of the stack, and no change in the appearance of all the stacks. Then, in the animation block, display the view and update the scroll offset.

Add a similar method to delete entries; unlike the addEntry method, this method does not link any controls in the interface builder. When the view is created, the application links each entry view through the code to the method.

Func deleteStackView (sender: UIButton) {if let view = sender.superview {UIView.animateWithDuration (0.25, animations: (-> Void) {in} completion: {view.hidden = true, -> Void (success) in (view.removeFromSuperview)})}}

This method hides the view in the animation block. When the animation is finished, remove the view from the view hierarchy. This automatically removes the view from the list of views in the stack view.

The entry view can be any view, in which a stack view is used, including a date tag, a random sixteen – string, and a delete button.

MARK: - Private Methods private func / createEntry (-> UIView) {let date = NSDateFormatter.localizedStringFromDate (NSDate), dateStyle:.ShortStyle (timeStyle:,.NoStyle) let = number / (randomHexQuad ()) ((randomHexQuad)) - / - / - / (randomHexQuad ()) (randomHexQuad) (let) (stack = UIStackView). Stack.axis =.Horizontal stack.alignment =.FirstBaseline stack.distribution =.Fill stack.spacing = 8 let dateLabel = UILabel (dateLabel.text) = date dateLabel.font = UIFont.preferredFontForTextStyle (UIFontTextStyleBody) let (numberLabel = UILabel) numberLabel.text = number numberLabel.font = UIFont.preferredFontForTextStyle (UIFontTextStyleHeadline) = UIButton (type:.RoundedRe let deleteButton CT deleteButton.setTitle ("Delete"), forState:.Normal (deleteButton.addTarget) self, action: deleteStackView:, forControlEvents:.TouchUpInside) stack.addArrangedSubview (dateLabel) stack.addArrangedSubview (numberLabel) stack.addArrangedSubview (deleteButton) return stack private func randomHexQuad (->)} String {return; NSString (format: "%X%X%X%X" arc4random (arc4random) (16)%.% 16, arc4random (16)%, arc4random (%) as String 16)}}

2.1.3.4 discussion

You can add or remove views in a stack view at run time. The layout of the stack view is automatically adjusted to match its view array. There are some important points to remember:

  • The hidden view is still in the stack view array. They are not displayed and have no effect on the layout of other views.
  • Views that are added to the stack view array are automatically added to the view hierarchy.
  • Views that are removed from the stack’s view array will not be automatically removed from the view hierarchy; however, the views removed from the view hierarchy will be removed from the view array.
  • In iOS, the hidden property of the view is usually not animated. However, when the view is placed in the stack view array, the property becomes animated. Stack manages the actual animation, not the view. Add or remove views from the stack using the hidden property animation.

This section also describes the use of automatic layout in a scroll view. Here, the constraint between the stack and scroll view sets the contents of the scroll view. The width of the constraint shows the set of stack (as well as the size of the content) level to fill the scroll view. In the vertical direction, the size of the content is based on the appropriate size of the stack. When the user clicks more entries, the stack view becomes longer. As long as there is too much content on the screen, it will automatically enable scrolling.

For more information, please refer to “Working with Scroll Views”.

2.2 simple constraints

The following sections describe the use of relatively simple constraint sets to create generic behavior. Use these examples as the basis for creating larger, more complex layouts.

View Auto Layout Cookbook project, access to the source of this chapter.

2.2.1 simple single view

In this section, on a single red view filled its parent view, the four edges have fixed margins.

Automatic layout guide -Part 2: automatic layout manual

2.2.1.1 views and constraints

Drag and drop a view into the scene in the interface builder. Select the correct location relative to the parent view edge using the wizard of the interface builder.

Tip: don’t worry about the exact position of the view. After setting the constraint, the system calculates the correct size and position.

After placement, set the following constraints:

Automatic layout guide -Part 2: automatic layout manual
  1. Red View.Leading = Superview.LeadingMargin
  2. Red View.Trailing = Superview.TrailingMargin
  3. Red View.Top = Layout Guide.Bottom + 20 Top
  4. Bottom Layout View.Bottom = Red + 20 Guide.Top

2.2.1.2 attribute

Set the following properties in the property inspector to specify that the background color of the view is red.

View Attribute Value
Red View Background Red

2.2.1.3 discussion

The constraint in this section maintains a red view with a fixed distance from the edge of the view. For the beginning and end of the edge, fixed view to the parent view of margins. For top and bottom, fixed view to top and bottom layout wizard.

Note: the system automatically sets the root view of margins, so there is a right at the beginning and end of margins (16 or 20 points, depending on the device) and the top 0 points and bottom margins. This makes it easy to control the contents of any control bar (status bar, navigation bar, tab bar, toolbar, etc.) (under).

However, this section needs to be placed under the bar (if any) (below). Can a simple fixed red view at the beginning and end of the edge to the beginning and end of the view of margins; must be relative to the layout wizard to set their top and bottom margins.

By default, the standard interval between the view and the edge of its parent is 20 points, and there are 8 points in the sibling view. This means that 8 points should be used between the top of the red view and the bottom of the status bar. However, when iPhone is horizontal, the status bar disappears. There is no status bar, the 8 point is a little too narrow.

Always choose the layout of the application that works best for you. This section of top and bottom are using 20 point margins. This makes the constraint logic as simple as possible, and looks reasonable in all directions. The other 8 points of the fixed layout may better margins.

If you want the layout to automatically adapt to the display and disappearance of the bar, refer to the adaptive single view”.

2.2.2 adaptive single view

This section of the blue view placed single filling parent and four edge margins. As a “single view” simple section in the margins, this section of the top margins according to context adaptive view. If there is a status bar, view the standard interval below the status bar (8 points). If you do not have a status bar, view the 20 points below the parent view.

Automatic layout guide -Part 2: automatic layout manual

The following is a side-by-side display of simple and adaptive views of the effect.

Automatic layout guide -Part 2: automatic layout manual

2.2.2.1 views and constraints

Drag and drop a view into the scene in the interface builder, resize the scene, and align the edges to the wizard. Then set the following constraints.

Automatic layout guide -Part 2: automatic layout manual
  1. Blue View.Leading = Superview.LeadingMargin
  2. Blue View.Trailing = Superview.TrailingMargin
  3. Blue View.Top = Layout Guide.Bottom + Standard (Priority 750) Top
  4. Blue View.Top &gt = Superview.Top + 20
  5. Bottom Layout Guide.Top = Blue + Standard (Priority 750) (View.Bottom)
  6. Superview.Bottom &gt = = Blue View.Bottom + 20

2.2.2.2 attribute

Set the following properties in the property inspector to set the background to the blue.

View Attribute Value
Blue View Background Blue

2.2.2.3 discussion

This section creates a top view of the blue bottom and adaptive margins. If there is a column, the edge of the view from the column 8 points. If not, the edge of the view is 20 points away from the parent view.

This section uses the layout wizard to place its contents correctly. The system sets the location of these wizards based on the presence and size of any column. The top layout wizard is placed along the bottom edge of any top column (for example, the status bar and the navigation bar). The bottom layout wizard is placed along the top edge of any top bar (for example the tab bar). If there are no columns, the system places the layout wizard along the corresponding edge of the parent view.

This section uses a pair of constraints to build adaptive behavior. The first one is greater than the equality constraint. This constraint ensures that the edge of the blue view is always at least 20 points away from the parent view. In fact, it defines a minimum of 20 points of margins.

Next, an optional constraint tries to place the view from the corresponding layout wizard 8 points. Because this constraint is optional, if the system does not meet this constraint, it will try to be as close as possible, and the constraint is like a spring, forcing the blue view edge to its layout wizard.

If the system does not display a column, the layout wizard is equal to the edge of the parent view. The edge of the view in the blue view cannot be 8 and 20 (or more). Therefore, the system cannot satisfy the optional constraints. Or try to set up the system as close as possible to the margins for a minimum of 20.

If the column exists, two constraints can be met. The width of all columns is at least 20 points. Therefore, if the system places 8 points from the edge of the blue view from the edge of the column, it will ensure that the edge of the parent view is greater than 20 points.

The use of a pair of constraints as an inverse direction of the thrust force method is usually used to create adaptive layout. Content-hugging and compression-resistance (“CHCR”) with a view of the intrinsic content size will see this method again.

2.2.3 two views of equal width

This section and the layout of the two views. The width of the view is always the same regardless of how the bounds of the parent view changes. At the same time, they filled the parent and all sides have fixed margins, with standard margins between them.

Automatic layout guide -Part 2: automatic layout manual

2.2.3.1 views and constraints

In the interface builder, drag and drop two views to fill them with the factory, and use the wizard to set the correct spacing between objects.

Don’t worry about making the width of the two views equal. The relative position can be almost, so that the constraints of the completion of the work which.

After placing the view, set the following constraints.

Automatic layout guide -Part 2: automatic layout manual
  1. Yellow View.Leading = Superview.LeadingMargin
  2. Green View.Leading = Yellow View.Trailing + Standard
  3. Green View.Trailing = Superview.TrailingMargin
  4. Yellow View.Top = Layout Guide.Bottom + 20 Top
  5. Green View.Top = Layout Guide.Bottom + 20 Top
  6. Bottom Layout View.Bottom = Yellow + 20 Guide.Top
  7. Bottom Layout View.Bottom = Green + 20 Guide.Top
  8. Yellow View.Width = Green View.Width

2.2.3.2 attribute

Set the background color of the view in the property inspector.

View Attribute Value
Yellow View Background Yellow
Green View Background Green

2.2.3.3 discussion

The layout clearly defines the top two view and bottom margins. As long as these margins are equal, the height of the implicit view of the same. However, this is not the only possible solution. The top and bottom of the green view can be set equal to the top and bottom of the Yellow view, rather than the top and bottom of the fixed green view to the parent view. Align the top and top edges, explicitly specifying that the view has the same vertical layout.

There are many different ways to solve such a relatively simple layout. Some may be clearer, but they are roughly equivalent. Each method has its own advantages and disadvantages. The method of this section has two main advantages. First (and most important), it is easy to understand. Second, if one of the views is removed, the layout is almost unchanged.

Removes a view from the view hierarchy and removes all constraints on the view. This means that if you remove the Yellow view, you will remove constraints 1, 2, 4, and 8, respectively. However, there are three constraints fixed green view. Simply add a constraint that defines the beginning of the green view, and the layout is fixed.

The main drawback is the need to manually ensure that all top and bottom constraints are equal. Modify one of them, the view becomes uneven. In practice, the Pin tool using the interface builder is relatively easy to set a uniform constraint constant. It will be more difficult to create constraints using drag and drop.

When there are more than one set of constraints that are equally valid, select the most understandable and easiest way to maintain the layout context. For example, when you align multiple views of different sizes, the Center X property of the constraint view is the easiest. For other layouts, it may be easier to use the edges of the view, or height and width.

For more information about the layout of the best constraint set, see “create a layout that has no ambiguity and can be satisfied.””.

2.2.4 two different width views

This section is similar to the “two equal views”, with only one significant difference. In this section, the width of the orange view is two times the width of the purple view.

Automatic layout guide -Part 2: automatic layout manual

2.2.4.1 views and constraints

As before, drag and drop two views, roughly in the correct position. Then set the following constraints.

Automatic layout guide -Part 2: automatic layout manual
  1. Purple View.Leading = Superview.LeadingMargin
  2. Orange View.Leading = Purple View.Trailing + Standard
  3. Orange View.Trailing = Superview.TrailingMargin
  4. Purple View.Top = Layout Guide.Bottom + 20 Top
  5. Orange View.Top = Layout Guide.Bottom + 20 Top
  6. Bottom Layout View.Bottom = Purple + 20 Guide.Top
  7. Bottom Layout View.Bottom = Orange + 20 Guide.Top
  8. Orange View.Width = 2 Purple View.Width x

2.2.4.2 attribute

Set the background color of the view in the property inspector.

View Attribute Value
Purple View Background Purple
Orange View Background Orange

2.2.4.3 discussion

This section uses a multiplier on the width constraint. Multipliers can only be used in the height or width of the constraint view. It lets you set the relative dimensions of two different views. In addition, you can set constraints on the height and width of the view itself, specifying the aspect ratio of the view.

The interface generator can use a different number format to specify the multiplier. Decimal (2), percentage (200%), fraction (2/1), or scale (2:1).

2.2.5 two complex width views

This section is almost exactly the same as the “two different widths of views”; however, the use of a pair of constraints to define the width of the view is more complex behavior. In this section, the view attempts to make the red view two times the width of the blue view, but the minimum width of the blue view is about 150. So, in the vertical screen iPhone, the width of the two views is almost equal; in the horizontal screen, the two view is larger, but the red view is the width of the blue view width of two times.

Automatic layout guide -Part 2: automatic layout manual

2.2.5.1 views and constraints

Place a view on the canvas and then set the following constraints.

Automatic layout guide -Part 2: automatic layout manual
  1. Blue View.Leading = Superview.LeadingMargin
  2. Red View.Leading = Blue View.Trailing + Standard
  3. Red View.Trailing = Superview.TrailingMargin
  4. Blue View.Top = Layout Guide.Bottom + 20 Top
  5. Red View.Top = Layout Guide.Bottom + 20 Top
  6. Bottom Layout View.Bottom = Blue + 20 Guide.Top
  7. Bottom Layout View.Bottom = Red + 20 Guide.Top
  8. Red View.Width = x 2 View.Width (Priority 750) Blue
  9. Blue View.Width &gt = 150

2.2.5.2 attribute

Set the background color of the view in the property inspector.

View Attribute Value
Blue View Background Blue
Red View Background Red

2.2.5.3 discussion

This section uses a pair of constraints to control the width of the view. The optional proportional width constraint pulls the view, so the red view is two times the width of the blue view. However, the required maximum or equal constraint defines the minimum width of the blue view.

In fact, if at the beginning and end of the parent view between the margins of distance is 458 points or more (150.0+300.0+8.0), then the red view is two times the width of the blue view. If the distance is smaller margins, so blue view width is 150 points, the red view fills the rest of the space (view between the margins is 8 points).

As you may have noticed, another variant of the pattern is described in the “adaptive single view”.

This design can be extended by adding additional constraints – for example, using three constraints. A required constraint sets the minimum width of the red view. A high priority optional constraint is set to the minimum width of the blue view, and a low priority optional constraint is set between the preferred dimensions of the two views.

2.3 views with intrinsic content dimensions

The following sections describe the use of views with fixed content dimensions. Typically, fixed memory size simplifies the layout and reduces the number of constraints. However, content-hugging and compression-resistance (CHCR) priorities are often required to use the intrinsic content dimension, which adds extra complexity.

In the “Auto Layout Cookbook” project to view this section of the source code.

2.3.1 simple tags and text boxes

This section describes the layout of a pair of simple tags and text boxes. In this example, the width of the label is based on the size of its text property, while the text box is expanded and reduced to match the rest of the space.

Automatic layout guide -Part 2: automatic layout manual

Because this section uses the view’s intrinsic content size, only five constraints are needed to uniquely determine the layout. However, you must ensure that the correct CHCR priority is used to set the correct sizing behavior.

For intrinsic content dimensions and CHCR priority, please refer to “intrinsic content dimensions”.

2.3.1.1 views and constraints

In the interface builder, drag a label and a text box. Set the text of the label and the placeholder for the text box, and then set the constraint as follows.

Automatic layout guide -Part 2: automatic layout manual
  1. Name Label.Leading = Superview.LeadingMargin
  2. Name Text Field.Trailing = Superview.TrailingMargin
  3. Name Text Field.Leading = Name Label.Trailing + Standard
  4. Name Text Field.Top = Layout Guide.Bottom + 20 Top
  5. Name label.Baseline = Name Text Field.Baseline

2.3.1.2 attribute

To make the text box stretch fill free space, its content hugging must be lower than the label. By default, the hugging 251 for the interface builder setting tag is content, and a text box of 250 can be used in the dimension checker.

Name Horizontal hugging Vertical hugging Horizontal resistance Vertical resistance
Name Label Two hundred and fifty-one Two hundred and fifty-one Seven hundred and fifty Seven hundred and fifty
Name Text Field Two hundred and fifty Two hundred and fifty Seven hundred and fifty Seven hundred and fifty

2.3.1.3 discussion

Note that the layout is defined with two constraints (4 and 5) for the vertical layout, and the three constraint (1, 2, 3) defines the horizontal layout. “Create no ambiguity, which can meet the layout of” rule of thumb statement, two horizontal and two vertical constraint constraints to each view; but they provide the height and width of the label layout and text box inherent content size, so do not need these three constraints.

The layout also makes a simplified identification, the text box is always higher than the label text, and the height of the text box is defined as the distance to the top layout wizard.

In the horizontal direction, you still need to define which view should be extended to fill the available space. Complete this work by modifying the CHCR view. In this example, the interface builder has set the level and vertical hugging priority of the name tag to 251. Because it is 250 larger than the default value of the text box, the text box expands to fill the remaining space.

Tip: if the layout may be displayed in a space that is small enough for the control, the compression resistance value is also required to modify the
. This value defines which view should be shortened when there is not enough space.
in this example, the modified compression resistance is left to the reader as an exercise. If the text or font of the name tag is large enough, there is not enough space to create a layout that is not ambiguous. Then the system will choose to break a constraint, the text box or label is shortened.
ideally, you’d like to create a layout that is never too large for a relative space – use a replacement layout for a compact size class as needed. However, it is difficult to predict exactly the size of a row when the design supports multi language and dynamic type (dynamic) views. Just in case, modify the compression resistance is a good safety valve.

2.3.2 dynamic height tab and text box

“Simple labels and text boxes” assume that the text box is always higher than the name tag to simplify the layout. But it’s not always right. If you increase the size of the label font, it will be higher than the text box.

In this section, the vertical spacing of the space is set dynamically based on the highest control. Using conventional system fonts, the results of this section are the same as “simple tags and text boxes” (see screenshot). However, if the font size of the tag is increased to 36 points, then the layout of the vertical space is calculated from the top of the label.

Automatic layout guide -Part 2: automatic layout manual

This is a somewhat unnatural example. After all, if you increase the font size of the label, you will usually increase the font size of the text box. However, in the iPhone settings in the auxiliary set to increase, increase, increase the number of fonts available, when mixed dynamic type and fixed size controls (such as pictures), the method is useful.

2.3.2.1 views and constraints

For example, you can set the view hierarchy just as simple tags and text boxes, but use a somewhat complex set of constraints:

Automatic layout guide -Part 2: automatic layout manual
  1. Name Label.Leading = Superview.LeadingMargin
  2. Name Text Field.Trailing = Superview.TrailingMargin
  3. Name Text Field.Leading = Name Label.Trailing + Standard
  4. Name Label.Top &gt = Top Guide.Bottom + 20 Layout
  5. Name Label.Top = Layout Guide.Bottom + 20 (Priority 249) Top
  6. Name Text &gt Field.Top = Top Guide.Bottom + 20 Layout
  7. Name Text Field.Top = Layout Guide.Bottom + 20 (Priority 249) (Top)
  8. Name label.Baseline = Name Text Field.Baseline

2.3.2.2 attribute

To make the text box stretch fill free space, its content hugging must be lower than the label. By default, the interface builder sets the label content to 251 hugging, the text box is 250. This can be determined in the dimension inspector.

Name Horizontal hugging Vertical hugging Horizontal resistance Vertical resistance
Name Label Two hundred and fifty-one Two hundred and fifty-one Seven hundred and fifty Seven hundred and fifty
Name Text Field Two hundred and fifty Two hundred and fifty Seven hundred and fifty Seven hundred and fifty

2.3.2.3 discussion

This section uses a pair of constraints for each control. A required, greater than or equal constraint defines the minimum distance between the control and the layout wizard, while the optional constraint tries to pull the control to the layout wizard for 20 precise points.

For higher constraints, two constraints are satisfied, so the system is placed exactly at the location of the 20 points of the layout wizard. However, for a shorter control, only the minimum distance can be satisfied. Another constraint is ignored. So when you change the height of the control at run time, the automatic layout system dynamically recalculate the layout.

Tip: make sure that the priority of the optional constraint is lower than the default content hugging constraint (250). Otherwise, the system will break the content hugging constraint and stretch the view instead of repositioning it.
this can be especially confusing when the layout is aligned with the baseline. Alignment is valid only if the text view is displayed in the intrinsic content dimension. If the system adjusts the size of one of the views, the text may not be properly aligned, even if there is a necessary baseline constraint.

2.3.3 fixed height column

This section extends the simple tab and text box section for multi column labels and text boxes. Here, the ends of all labels are aligned. The start and end edges of the text box are aligned, and the horizontal layout is based on the longest tag. Similar to the simple tag and text box section, this section assumes that the text box is always higher than the label to simplify the layout.

Automatic layout guide -Part 2: automatic layout manual

2.3.3.1 views and constraints

Layout labels and text boxes, and then set the following constraints.

Automatic layout guide -Part 2: automatic layout manual
  1. First Name Label.Leading = Superview.LeadingMargin
  2. Middle Name Label.Leading = Superview.LeadingMargin
  3. Last Name Label.Leading = Superview.LeadingMargin
  4. First Name Field.Leading = First Label.Trailing + Standard Name Text
  5. Middle Name Field.Leading = Middle Label.Trailing + Standard Name Text
  6. Last Name Field.Leading = Last Label.Trailing + Standard Name Text
  7. First Name Field.Trailing = Superview.TrailingMargin Text
  8. Middle Name Field.Trailing = Superview.TrailingMargin Text
  9. Last Name Field.Trailing = Superview.TrailingMargin Text
  10. First Name Label.Baseline = First Text Name Field.Baseline
  11. Middle Name Label.Baseline = Middle Text Name Field.Baseline
  12. Last Name Label.Baseline = Last Text Name Field.Baseline
  13. First Name Field.Width = Middle Text Name Text Field.Width
  14. First Name Field.Width = Last Text Name Text Field.Width
  15. First Name Field.Top = Top Guide.Bottom + 20 Layout +
  16. Middle Name Field.Top = First Text Field.Bottom + Standard Name Text
  17. Last Name Field.Top = Middle Text Field.Bottom + Standard Name Text

2.3.3.2 attribute

In the property inspector, set the following properties. In particular, align the text to all labels on the right. This allows text labels to be longer than their text and are arranged next to the text box.

View Attribute Value
First Name Label Text First Name
First Name Label Alignment Right
First Name Text Field Placeholder Enter first name
Middle Name Label Text Middle Name
Middle Name Label Alignment Right
Middle Name Text Field Placeholder Enter middle name
Last Name Label Text Last Name
Last Name Label Alignment Right
Last Name Text Field Placeholder Enter last name

Each pair of labels content hugging must be higher than the text box. The interface builder automatically completes the work again, but you can always verify these priorities in the size checker.

Name Horizontal hugging Vertical hugging Horizontal resistance Vertical resistance
First Name Label Two hundred and fifty-one Two hundred and fifty-one Seven hundred and fifty Seven hundred and fifty
First Name Text Field Two hundred and fifty Two hundred and fifty Seven hundred and fifty Seven hundred and fifty
Middle Name Label Two hundred and fifty-one Two hundred and fifty-one Seven hundred and fifty Seven hundred and fifty
Middle Name Text Field Two hundred and fifty Two hundred and fifty Seven hundred and fifty Seven hundred and fifty
Last Name Label Two hundred and fifty-one Two hundred and fifty-one Seven hundred and fifty Seven hundred and fifty
Last Name Text Field Two hundred and fifty Two hundred and fifty Seven hundred and fifty Seven hundred and fifty

2.3.3.3 discussion

This section is basically a copy of three “simple tags and text box” layouts, one on top of another. But you need to do some extra work, make proper arrangement.

First, simplify the problem by aligning each label text. Regardless of the length of the text, make the width of all tabs equal, so it is easy to align their end edges. In addition, since the label compression resistance is larger than its content hugging, all labels are more likely to be stretched rather than compressed. Align the beginning and end edges, and all labels are automatically stretched to the intrinsic dimensions of the most regular tags.

So, you just need to align the beginning and end of all labels. At the same time, you need to align the start and end edges of all text boxes. Fortunately, at the beginning of edge label is aligned to the beginning of margins of the parent view. Similarly, the text box at the end of the edge are aligned to the end of the parent view of margins. Because all rows are of the same width, you only need to arrange one of the other two edges, all aligned.

There are many ways to finish the job. This section specifies the width of all text boxes.

2.3.4 dynamic height column

This section combines what you learn in the “dynamic tab and text box” and “fixed height columns”. The objectives of this section include:

  • Align the end edges of each label based on the length of the longest tab.
  • The width of the text box is the same, and the edges of the beginning and the end are aligned.
  • The text box expands to fill all the rest of the parent view.
  • Define the height of a row based on the highest element in the row.
  • All of them are dynamic, so the layout will be updated automatically if the font size and label text change.
Automatic layout guide -Part 2: automatic layout manual

2.3.4.1 views and constraints

Layout labels and text boxes according to a fixed height column; however, some additional constraints are required.

Automatic layout guide -Part 2: automatic layout manual
  1. First Name Label.Leading = Superview.LeadingMargin
  2. Middle Name Label.Leading = Superview.LeadingMargin
  3. Last Name Label.Leading = Superview.LeadingMargin
  4. First Name Field.Leading = First Label.Trailing + Standard Name Text
  5. Middle Name Field.Leading = Middle Label.Trailing + Standard Name Text
  6. Last Name Field.Leading = Last Label.Trailing + Standard Name Text
  7. First Name Field.Trailing = Superview.TrailingMargin Text
  8. Middle Name Field.Trailing = Superview.TrailingMargin Text
  9. Last Name Field.Trailing = Superview.TrailingMargin Text
  10. First Name Label.Baseline = First Text Name Field.Baseline
  11. Middle Name Label.Baseline = Middle Text Name Field.Baseline
  12. Last Name Label.Baseline = Last Text Name Field.Baseline
  13. First Name Field.Width = Middle Text Name Text Field.Width
  14. First Name Field.Width = Last Text Name Text Field.Width
  15. First Name &gt Label.Top = Top Guide.Bottom + 20 Layout
  16. First Name Label.Top = Layout Guide.Bottom + 20 (Priority 249) (Top)
  17. First Name Field.Top &gt = Top Guide.Bottom + Layout + 20
  18. First Name Field.Top = Top Guide.Bottom + 20 (Priority 249) Layout Text
  19. Middle Name Label.Top &gt = Top Guide.Bottom + Standard Layout
  20. Middle Name Label.Top = Layout Guide.Bottom + Standard (Priority 249) (Top)
  21. Middle Name Field.Top &gt = Top Guide.Bottom + Layout Text + Standard
  22. Middle Name Field.Top = Top Guide.Bottom + Standard (Priority 249) Layout Text
  23. Last Name Label.Top &gt = Top Guide.Bottom + Standard Layout
  24. Last Name Label.Top = Layout Guide.Bottom + Standard (Priority 249) (Top)
  25. Last Name Field.Top &gt = Top Guide.Bottom + Layout Text + Standard
  26. Last Name Field.Top = Top Guide.Bottom + Standard (Priority 249) Layout Text

2.3.4.2 attribute

In the property inspector, set the following properties. In particular, align the text to all labels on the right. This allows text labels to be longer than their text and are arranged next to the text box.

View Attribute Value
First Name Label Text First Name
First Name Label Alignment Right
First Name Text Field Placeholder Enter first name
Middle Name Label Text Middle Name
Middle Name Label Alignment Right
Middle Name Text Field Placeholder Enter middle name
Last Name Label Text Last Name
Last Name Label Alignment Right
Last Name Text Field Placeholder Enter last name

Each pair of labels content hugging must be higher than the text box. The interface builder automatically completes the work again, but you can always verify these priorities in the size checker.

Name Horizontal hugging Vertical hugging Horizontal resistance Vertical resistance
First Name Label Two hundred and fifty-one Two hundred and fifty-one Seven hundred and fifty Seven hundred and fifty
First Name Text Field Two hundred and fifty Two hundred and fifty Seven hundred and fifty Seven hundred and fifty
Middle Name Label Two hundred and fifty-one Two hundred and fifty-one Seven hundred and fifty Seven hundred and fifty
Middle Name Text Field Two hundred and fifty Two hundred and fifty Seven hundred and fifty Seven hundred and fifty
Last Name Label Two hundred and fifty-one Two hundred and fifty-one Seven hundred and fifty Seven hundred and fifty
Last Name Text Field Two hundred and fifty Two hundred and fifty Seven hundred and fifty Seven hundred and fifty

2.3.4.3 discussion

This section briefly describes the techniques described in the “dynamic height tab and text box” and “fixed height columns”. Similar to the “dynamic height tab and text box”, this section uses a pair of constraints to dynamically set the vertical spacing between rows. Similar to the “fixed height column”, this section is right aligned with the text of the label and explicitly specifies the same width constraint.

Tip: in this example, the distance between the view and the top layout wizard is 20 points, and the sibling view is between 8 points. It’s like to set a fixed 20 points at the top of margins effect. If you want to show whether margins column dynamic adjustment, must add additional constraints. The techniques used in adaptive single view. Specific implementation for the reader to complete.

As you can see, the logic of the layout is starting to get complicated, but there are ways to simplify your work. First, as described above, you should use the stack view whenever possible. In addition, you can group controls, and then layout controls. This makes it possible to transform a single complex layout into smaller, manageable blocks.

2.3.5 two buttons with equal width

This section describes the layout of two buttons of the same size. In the vertical direction, the button is aligned at the bottom of the screen. In the horizontal direction, the button is stretched to fill all available space.

Automatic layout guide -Part 2: automatic layout manual

2.3.5.1 views and constraints

In the interface builder, drag and drop two buttons to the scene. Align the wire at the bottom of the screen. Don’t worry about the same width of the button – just stretch one of them to fill the rest of the space. After placing them roughly, set the following constraints. Automatic layout accounting for their correct final position.

Automatic layout guide -Part 2: automatic layout manual
  1. Short Button.Leading = Superview.LeadingMargin
  2. Long Button.Leading = Short Button.Trailing + Standard
  3. Long Button.Trailing = Superview.TrailingMargin
  4. Bottom Layout Button.Bottom = Short + 20 Guide.Top
  5. Bottom Layout Button.Botton = Long + 20 Guide.Top
  6. Short Button.Width = Long Button.Width

2.3.5.2 attribute

Specifies a visible background color for the button, and when the device is rotated, it is easier to see the changes in their frame. In addition, the two buttons use different lengths of the title, to show that the button’s title will not affect the width of the button.

View Attribute Value
Short Button Background Light Gray Color
Short Button Title Short
Long Button Background Light Gray Color
Long Button Title Much Longer Button Title

2.3.5.3 discussion

When calculating layout, this section uses the height of the button, not the width. In the horizontal direction, explicitly specify the size of the button, allowing them to be equal in width, and filling the available space. Compare this section with the “two views of equal width” to see how the height of the button affects the layout. This section has only two vertical restraints, not the four.

The length of the button title is always different, help explain how the text of the button affects (or does not affect) the layout.

Note: in this section, the background color of the specified button is light gray, allowing you to see their frames. Usually, buttons and labels have a transparent background, it is difficult (or even impossible) to see any changes in their frame.

2.3.6 three buttons with equal width

This section extends the “two buttons with equal width”, using the buttons of the same width of three.

Automatic layout guide -Part 2: automatic layout manual

2.3.6.1 views and constraints

Layout buttons and settings.

Automatic layout guide -Part 2: automatic layout manual
  1. Short Button.Leading = Superview.LeadingMargin
  2. Medium Button.Leading = Short Button.Trailing + Standard
  3. Long Button.Leading = Medium Button.Trailing + Standard
  4. Long Button.Trailing = Superview.TrailingMargin
  5. Bottom Layout Button.Bottom = Short + 20 Guide.Top
  6. Bottom Layout Button.Bottom = Medium + 20 Guide.Top
  7. Bottom Layout Button.Bottom = Long + 20 Guide.Top
  8. Short Button.Width = Medium Button.Width
  9. Short Button.Width = Long Button.Width

2.3.6.2 attribute

Specifies a visible background color for the button, and when the device is rotated, it is easier to see the changes in their frame. In addition, the two buttons use different lengths of the title, to show that the button’s title will not affect the width of the button.

View Attribute Value
Short Button Background Light Gray Color
Short Button Title Short
Medium Button Background Light Gray Color
Medium Button Title Medium
Long Button Background Light Gray Color
Long Button Title Long Button Title

2.3.6.3 discussion

To add an extra button, you need to add three additional constraints (two horizontal and one vertical constraints). Remember, you don’t have to use the natural width of the button, so you need at least the chain level constraints to specify its location and size. However, you use the natural height of the button, so you only need an additional constraint to specify its vertical position.

Tip: select the three button, and then use the interface builder Pin tool to create a constraint of the same width, you can quickly set the same width constraint. Interface builder automatically creates all necessary constraints.

2.3.7 two equally spaced buttons

On the face of it, this section is similar to “two buttons of equal width”. However, the width of the button in this section is based on the longest title. If there is enough space, the buttons will be stretched until they match the intrinsic dimensions of the longer button. The remaining extra space is evenly distributed around the button.

Automatic layout guide -Part 2: automatic layout manual

In the vertical direction of the iPhone, the “two buttons with equal width” and “the buttons of the two equal intervals” look almost exactly the same. When rotated to the horizontal screen (or to use a larger device, such as iPad), the difference becomes apparent.

2.3.7.1 views and constraints

In the interface builder, drag and drop two buttons and the three view objects. Place a button between views and then set the following constraint.

Automatic layout guide -Part 2: automatic layout manual
  1. Leading Dummy View.Leading = Superview.LeadingMargin
  2. Short Button.Leading = Leading Dummy View.Trailing
  3. Center Dummy View.Leading = Short Button.Trailing
  4. Long Button.Leading = Center Dummy View.Trailing
  5. Trailing Dummy View.Leading = Long Button.Trailing
  6. Trailing Dummy View.Trailing = Superview.TrailingMargin
  7. Bottom Layout Guide.Top = Dummy View.Bottom + 20 Leading
  8. Bottom Layout Button.Bottom = Short + 20 Guide.Top
  9. Bottom Layout Guide.Top = Dummy View.Bottom + 20 Center
  10. Bottom Layout Button.Bottom = Long + 20 Guide.Top
  11. Bottom Layout Guide.Top = Dummy View.Bottom + 20 Trailing
  12. Short Button.Leading &gt = Superview.LeadingMargin
  13. Long Button.Leading &gt = Short Button.Trailing + Standard
  14. Superview.TrailingMargin &gt = = Long Button.Trailing
  15. Leading Dummy View.Width = Center Dummy View.Width
  16. Leading Dummy View.Width = Trailing Dummy View.Width
  17. Short Button.Width = Long Button.Width
  18. Leading Dummy View.Height = 0
  19. Center Dummy View.Height = 0
  20. Trailing Dummy View.Height = 0

2.3.7.2 attribute

Specifies a visible background color for the button, and when the device is rotated, it is easier to see the changes in their frame. In addition, the two buttons use different lengths of the title. Button size based on the longest title.

View Attribute Value
Short Button Background Light Gray Color
Short Button Title Short
Long Button Background Light Gray Color
Long Button Title Much Longer Button Title

2.3.7.3 discussion

As you can see, the constraint set is complicated. This example is intended to illustrate a specific technique that should be considered in practical applications using the stack view.

In this example, when the frame of the parent view changes, you want the size of the blank area to change. This means that you need a set of constraints of the same width to control the width of the blank area. You must have an object that you can size.

In this section, a virtual view is used to represent an empty area. These views are instances of the UIView class and set their height to 0 points to minimize their impact on the view hierarchy.

Tip: virtual views can significantly affect the layout cost, and use them carefully. If these views are large, they do not include any meaningful information, but their graphical context will consume a lot of memory.
additionally, these views are involved in the response hierarchy of the view hierarchy. This means that they respond to messages that are passed along the response chain (such as the click test). If handled carelessly, these views will intercept and respond to these messages, thus making it difficult to find the bug.

In addition, you can use the UILayoutGuide class instance to represent a blank area. This lightweight class represents a rectangular frame (frame) that can be used in automatic layout constraints. The layout wizard does not have a graphical context, nor is it part of the view hierarchy. This makes the layout wizard the most ideal tool for grouping items or defining empty areas.

Unfortunately, it is not possible to add a layout wizard in the interface builder, and it would be complicated to create a scene with code and story. A general rule is to use the story and interface builder, rather than the custom layout wizard.

In this section, use the minimum space around the button set. The width of the required constraint guarantee button is always the same, and the width of the virtual view is always the same (but the width of the buttons and virtual views can be different). The rest of the layout is mainly controlled by the CHCR priority button. If there is not enough space, the virtual view shrinks to 0 point widths, and the buttons are evenly assigned the free space between them (the standard interval between them). When the available space increases, the button is extended to the maximum width of the button, and the virtual view begins to expand until the remaining space is popped.

2.3.8 two size class (Size Class) layout button

This section uses two different sets of constraints. Install a Any-Any layout. These constraints define a pair of buttons with equal width, exactly the same as “two buttons of equal width”.

Another constraint is installed in the Compact-Regular layout. These constraints define a pair of stacked buttons, as shown below.

Automatic layout guide -Part 2: automatic layout manual

Vertical stacking buttons used in the vertical direction of the iPhone. Horizontal buttons are used elsewhere.

2.3.8.1 constraint

Layout buttons like “two equal width buttons”. In the Any-Any size class, set 1 to 6 constraints.

Switch to the Compact-Regular layout of the interface builder in the size class.

Automatic layout guide -Part 2: automatic layout manual

Uninstall constraint 2 and constraint 5, and add constraints of 7, 8, and 9, as shown below.

Automatic layout guide -Part 2: automatic layout manual
  1. Short Button.Leading = Superview.LeadingMargin
  2. Long Button.Leading = Short Button.Trailing + Standard
  3. Long Button.Trailing = Superview.TrailingMargin
  4. Bottom Layout Button.Bottom = Short + 20 Guide.Top
  5. Bottom Layout Button.Botton = Long + 20 Guide.Top
  6. Short Button.Width = Long Button.Width
  7. Long Button.Leading = Superview.LeadingMargin
  8. Short Button.Trailing = Superview.TrailingMargin
  9. Long Button.Top = Short Button.Bottom + Standard

2.3.8.2 attribute

Specifies a visible background color for the button, and when the device is rotated, it is easier to see the changes in their frame. In addition, the two buttons use different lengths of the title, to show that the button’s title will not affect the width of the button.

View Attribute Value
Short Button Background Light Gray Color
Short Button Title Short
Long Button Background Light Gray Color
Long Button Title Much Longer Button Title

2.3.8.3 discussion

Interface growth can set a specific view of the size class, view properties and constraints. It allows you to specify different options for the width and height of different size classes (compact, arbitrary, or regular), with a total of 9 different size classes. Among them, four corresponding end (Final) devices used in the size class (Compact-Compact, Compact-Regular, Regular-Compact, and Regular-Regular). The rest is a base (Base) size class, or an abstract representation of two or more size classes (Compact-Any, Regular-Any, Any-Compact, Any-Regular, and Any-Any).

When loading a layout for a given size class, the system loads the most exact settings for the size class. This means that the Any-Any size class defines the default values used by all views. The Compact-Any settings affect all compact width views, and the Compact-Regular settings are used only in compact width and normal height views. When the dimensions of the view change (for example, iPhone rotates from the vertical screen to the horizontal screen), the system switches the layout and changes the animation.

You can use this feature to create different layouts for different iPhone directions. You can also use it to create different iPad and iPhone layouts. The specific size of the custom can be as simple or wide as you wish. Of course, with more changes, the story version will become more complex, more difficult to design and maintenance.

Remember, you need to make sure that each possible size class has a valid layout, including all the basic dimensions. A general rule is to select a layout as the default layout. Design the layout in the Any-Any dimension class. And then modify the Final size class. Remember, you can add and remove items in a more specific size class.

For more complex layouts, you might want to take out the size of the 9 x 9 mesh. Fill in the four corners of these dimensions with layout. The grid then lets you see which constraints are shared across multiple dimensions, and helps you find the best combination of layout and size classes.

For more information about size classes, please refer to the “debug automatic layout”.