preface

With iOS 10.3.2 coming, iOS development has matured considerably so far. From frame, size, center to today’s powerful Autolayout, the UI layout is as “automated” and “intelligent” as possible, reducing the workload of programmers to a large extent.

Many of you know how painful it can be to take on an old project with an entire Frame. In today’s development, the use of automatic layouts (such as the highly adaptive use of UITableview) is advocated when performance is less sensitive to reduce the amount of UI computation.

However, many developers may write automatic layouts that are not automatic at all.

Autolayout can be understood as: set rules for the interface, so that the interface changes according to the rules with the change of data.

This article focuses on solving the complex interdependencies in automatic layout.

Select the layout tool

In the past, you’ve all used (or seen others use) the NSLayoutConstraint of the UIKit framework. The layout constraint is a primitive layout code that you’ll find difficult to use. For example, you’ll find the most famous framework for navigation — NSLayoutConstraint. I will not introduce the basic usage of the navigation, as relevant documents are already flying around.

Depending on the pace of your development project and the number of developers, you can decide whether to use a XIB, storyboard or plain code layout, but they all make the same sense.

For the sake of intuitiveness, this article uses xiB for the description.

intrinsicContentSize

First, we need to know what intrinsicContentSize is.

A constraint on a View requires two things, a position and a size. In daily development, we find that when we write constraints to UILabel, UIImageView, and UIButton instances, we only need to give them the location, not the size. This is because they specify intrinsicContentSize (which we don’t need to specify).

To specify the intrinsicContentSize method: override the UIView -(CGSize)intrinsicContentSize: Method, when need to change the value of the call: invalidateIntrinsicContentSize method, inform the system value has changed, we can custom class) of the specified intrinsicContentSize

The intrinsicContentSize attribute is intrinsicContentSize. The intrinsicContentSize attribute is intrinsicContentSize. The intrinsicContentSize attribute is intrinsicContentSize.

Fuzzy constraint

Fuzzy constraint refers to lessThanOrEqualTo and greaterThanOrEqualTo in the navigation, namely lessThanOrEqualTo and greaterThanOrEqualTo. It is simple to use the fuzzy constraint alone.

example:

Requirements: The width and height of the label in the figure above follow the intrinsicContentSize, but the length cannot exceed that of the superview.

Implementation: Label distance left 10, vertical center, right distance less than or equal to 10

priority

Precedence means that when two constraints conflict, the constraint with the highest priority is satisfied first.

example:

In general, the use of priorities is very simple. Here I want to talk about the priorities of views, as shown in the figure below

These methods are familiar (whether you’ve used them before), but they are useful only if the view specifies an intrinsicContentSize, so UILabel, UIImageView, and UIButton can be configured with these methods.

As a developer, it is especially important to have a learning atmosphere and a communication circle. Here is an iOS communication group: 642363427. No matter you are white or big, welcome to join us.

Of course, this is done visually in the NIB file, and in the code it looks like this (they are UIView methods) :

- (void)setContentHuggingPriority:(UILayoutPriority)priority forAxis:(UILayoutConstraintAxis)axis NS_AVAILABLE_IOS(6_0);  - (void)setContentCompressionResistancePriority:(UILayoutPriority)priority forAxis:(UILayoutConstraintAxis)axis NS_AVAILABLE_IOS(6_0);Copy the code

  • ContentHuggingPriority: refuses to increase the priority

  • ContentCompressionResistancePriority: refused to narrow the priority

Refused to become bigger, in other words, the higher priority, it will not change, refused to narrow the higher priority, it will not be closed (well, it feels a bit like crap). Here’s an example:

example:

Requirements: A and B are 10pt apart, A must be the same width as the text (A tries to follow the specified intrinsicContentSize)

Implementation:

Step 1: Place A and B in A position 10 away from each other. Add A constraint and A warning

Step 2: Do the following to solve the problem

Of course, this is only the default (remember, not just business logic, but layout needs to be considered in order to write A perfect layout), this is what happens when the text of A changes:

Step3: The following treatment is logical

Of course, the requirements have been calculated and completed so far, but there is another problem to consider in the actual development, that is, the content of A is too long, and B is squeezed to 0 (_).

Step4: At this time, we need to give B a minimum width to avoid “evaporation”. To achieve this is not as easy as imagined, and there are many methods. The following is only one of them:

conclusion

The key content of the layout is nothing more than the above things, they are singled out, everyone thinks very simple. The ability to write a perfect bug-free layout often requires a combination of them (fixed constraints, fuzzy constraints, priority). The test of iOS engineers’ ABILITY to layout UI is when layout elements are numerous and extremely flexible.

After reading this article, you can like it or leave a message. If you think it’s too low, you can also like it