Get started with Auto Layout for iOS development

Get started with Auto Layout for iOS development

As the iPhone 6 and iOS8 approaches, the adaptation issues become more complex. I recently learned how to use Auto Layout and shared it with you.

What is Auto Layout?

Auto Layout is a brand new Layout feature introduced after iOS6 release. Its purpose is to make up for the Layout shortcomings of Autoresizing in the past, in the future, the interface layout can be better adapted when more sizes are available.

Why Auto Layout?

Autolayout can adapt to different screens (iPhone 4, iPhone 5, iPad.

In the iPhone 4 era, developers only need to adapt to one screen size. Compared with the relative layout of the Android camp, iOS developers use absolute layout for the longest time, as long as the coordinates and sizes are written to death, it is OK. Then the iPhone 5 came out. For the two screen sizes, we need to consider a new problem, screen adaptation. In fact, Apple has long considered this Autoresizing technology. It is true that Autoresizing is insufficient. After iOS6 was released, Apple introduced the Autolayout feature to meet the layout requirements in a wider range of scenarios. Of course, because the iPhone 5 is the same as the iPhone 4 in the screen width, it is not difficult to adapt to these technologies (I used Autoresizing before), but it will be available soon in iPhone 6, when we are about to face more complex screen adaptation, Auto Layout can help us solve this problem well. In addition, it can also solve horizontal screen switching and iPad adaptation problems.

The following is the example code of this article under the screen switching effect:

How to use Auto Layout?

Basic concepts of Auto Layout

The core of Auto Layout is a constraint. by limiting the view Size (the relationship between view and view), the view can calculate its own size and coordinates.

Visual Format Language, a Language Rule Used in Auto Layout to describe the image.

The use of Auto Layout is still relatively complicated. It may feel confused at the beginning. It will be convenient after VFL is used.

Use Auto Layout in code

-(Void) viewDidLoad {[super viewDidLoad]; self. view. backgroundColor = [UIColor greenColor]; UIView * viewTopLeft = [[UIView alloc] init]; UIView * viewTopRight = [[UIView alloc] init]; UIView * viewBottom = [[UIView alloc] init]; [viewTopLeft setBackgroundColor: [UIColor blueColor]; [viewTopRight setBackgroundColor: [UIColor redColor]; [viewBottom setBackgroundColor: [UIColor blackColor]; // v is required before adding constraints. Add iew to superview [self. view addSubview: viewTopRight]; [self. view addSubview: viewTopLeft]; [self. view addSubview: viewBottom]; // for controls to use Auto Layout, disable Autoresizing [viewTopLeft preview: NO]; [viewTopRight preview: NO]; [viewBottom preview: NO]; // use VFL # if 1 // dict and metrics are equivalent to the ing of the name in vfl to the object and value N. SDictionary * dict = publish (viewTopLeft, viewTopRight, viewBottom); // equivalent to NSDictionary * dict = @ [@ "viewTopLeft": viewTopLeft, @ "viewTopRight": viewTopRight, @ "viewBottom", viewBottom]; not necessarily the same name as the object name NSDictionary * metrics ={ @ "pad": @ 10}; // horizontal relationship (H :, can be omitted, such as vfl1), "|" is equivalent to superview, "-" is a connector, indicating the spacing between the two or not indicating no spacing // The description of converting the natural language is: the left boundary distance of superview is viewTopLeft (the width is equal to viewTopRight), and the default distance is view. The distance between TopRight and 10 is the right boundary of superview. NSString * vfl0 = @ "H: |-pad-[viewTopLeft (= viewTopRight)]-[viewTopRight]-10-| "; NSString * vfl1 = @ "| [viewBottom] |"; // vertical relationship (V :) NSString * vfl2 = @ "V: |-[viewTopLeft (= viewBottom)] -[viewBottom]-pad-| "; NSString * vfl3 = @" V: |-[viewTopRight]-[viewBottom]-pad-| "; [self. view addConstraints: [NSLayoutConstraint constraintsWithVisualFormat: vfl0 options: 0 metrics: metrics views: dict]; [self. view addConstraints: [NSLayoutConstraint constraintsWithVisualFormat: vfl1 options: 0 metrics: metrics views: dict]; [self. view addConstraints: [NSLayoutConstraint constraintsWithVisualFormat: vfl2 options: 0 metrics: metrics views: dict]; [self. view addConstraints: [NSLayoutConstraint constraintsWithVisualFormat: vfl3 options: 0 metrics: metrics views: dict]; // the leading of VFL # else // viewTopLeft and its superview leading (left side) alignment [self. view addConstraint: [NSLayoutConstraint constraintWithItem: self. view attribute: NSLayoutAttributeLeading relatedBy: NSLayoutRelationEqual toItem: viewTopLeft attribute: NSLayoutAttributeLeading multiplier: 1 constant:-10]; // top of viewTopLeft is aligned with top of superview [self. view addConstraint: [NSLayoutConstraint constraintWithItem: self. view attribute: NSLayoutAttributeTop relatedBy: NSLayoutRelationEqual toItem: viewTopLeft attribute: NSLayoutAttributeTop multiplier: 1 constant:-10]; // top of viewTopRight is aligned with top of viewTopLeft [self. view addConstraint: [NSLayoutConstraint constraintWithItem: viewTopRight attribute: NSLayoutAttributeTop relatedBy: NSLayoutRelationEqual toItem: viewTopLeft attribute: Comment multiplier: 1 constant: 0]; // The leading of viewTopRight is aligned with the trailing (right) of viewTopLeft [self. view addConstraint: [NSLayoutConstraint constraintWithItem: viewTopRight attribute: nslayoutattrieleeleading relatedBy: NSLayoutRelationEqual toItem: viewTopLeft attribute: Comment multiplier: 1 constant: 10]; // trailing of viewTopRight and its superview on the right side [self. view addConstraint: [NSLayoutConstraint constraintWithItem: viewTopRight attribute: NSLayoutAttributeTrailing relatedBy: NSLayoutRelationEqual toItem: self. view attribute: NSLayoutAttributeTrailing multiplier: 1 constant:-10]; // The width of viewTopRight is equal to that of viewTopLeft [self. view addConstraint: [NSLayoutConstraint constraintWithItem: viewTopRight attribute: NSLayoutAttributeWidth relatedBy: Comment toItem: viewTopLeft attribute: NSLayoutAttributeWidth multiplier: 1 constant: 0]; // The height of viewTopRight is equal to that of viewTopLeft [self. view addConstraint: [NSLayoutConstraint constraintWithItem: viewTopLeft attribute: NSLayoutAttributeHeight relatedBy: inclutoitem: viewTopRight attribute: NSLayoutAttributeHeight multiplier: 1 constant: 0]; // The top of viewBottom is aligned with the bottom of viewTopRight [self. view addConstraint: [NSLayoutConstraint constraintWithItem: viewBottom attribute: NSLayoutAttributeTop relatedBy: NSLayoutRelationEqual toItem: viewTopRight attribute: extends multiplier: 1 constant: 10]; // The bottom of viewBottom is aligned with the bottom of superview [self. view addConstraint: [NSLayoutConstraint constraintWithItem: viewBottom attribute: NSLayoutAttributeBottom relatedBy: NSLayoutRelationEqual toItem: self. view attribute: NSLayoutAttributeBottom multiplier: 1 constant:-10]; // the leading of viewBottom is aligned with the leading of viewTopLeft [self. view addConstraint: [NSLayoutConstraint constraintWithItem: viewBottom attribute: NSLayoutAttributeLeading relatedBy: NSLayoutRelationEqual toItem: viewTopLeft attribute: Comment multiplier: 1 constant: 0]; // The height of viewBottom is equal to that of viewTopLeft [self. view addConstraint: [NSLayoutConstraint constraintWithItem: viewBottom attribute: NSLayoutAttributeHeight relatedBy: Comment toItem: viewTopLeft attribute: NSLayoutAttributeHeight multiplier: 1 constant: 0]; // The viewBottom width is equal to the superview height [self. view addConstraint: [NSLayoutConstraint constraintWithItem: viewBottom attribute: NSLayoutAttributeWidth relatedBy: NSLayoutRelationEqual toItem: self. view attribute: NSLayoutAttributeWidth multiplier: 1 constant:-20]; # endif // update constraints [self. view setNeedsUpdateConstraints]; [self. view updateConstraintsIfNeeded];}

Note:

1. The constraint must have a given size and then calculate the size and position of each view through the constraint. The size of self. view above is given. If the size of superview is not fixedRequiredOnly when the size of a subview is given can other values be calculated by constraints.

2. The constraints between two views should be placed on their superview. If a view is a superview, you only need to put it on the superview.

2. It is best not to conflict with the design of constraints. Although priority can be set, it is prone to problems.

3. when setting the view size in VFL mode, there are only three relationships: equal, small, or large. You cannot set the ratio of two views as if you use the method to generate constraints, therefore, it is necessary to combine the two in a specific application.

Use Auto Layout in xib

I feel that using autolayout in xib is not convenient with code. The principle is the same as that in code, so I will not describe it much here.

References

Auto Layout Guide

Ios8. the screen is bigger. Are you ready to use iOS Auto Layout?

Autolayout and VFL Experience Sharing