iOS Auto-fit

since Iphone4s, Apple has launched the iphone5, IPhone5S, Iphone6, Iphone6plus, iphone6s, iphone6splus These new models, their screen sizes vary, This has left us the developer with an egg-ache problem: screen fit.

1, display coordinate positioning method: in the era of 4 and 4s, we use the display coordinate positioning method to set the coordinates of a view, such as View.frame = CGRectMake (20, 70, 160, 160); Obviously there was no problem at the time, Because the size of the phone screen is fixed, the screen width of 320 pixels, the screen height of 480 pixels.

2, Autoresizingmask: since iphone5, the height of the mobile phone screen has become 568 pixels, sometimes we define the view in the iphone4 and 4s run up position is normal, but on 5 and 5s is not so harmonious, This gives developers the task of adapting: How can a view be displayed on a screen of different sizes? In fact, Apple was first introduced to match the technology autoresizingmask. Autoresizingmask can give a child view alignment and scaling factor relative to the Father view, and when the parent view changes, the new position is automatically drawn through each view autoresizingmask. Use steps are

The first step: set the parent view's Autoresizessubviews property to Yes,superview.autoresizessubviews = YES, or the subsequent autoresizingmask will be invalidated.

Step Two: set the autoresizingmask of the child view, Subview.autoresizingmask = Uiviewautoresizingflexibletopmargin | Uiviewautoresizingflexiblebottommargin.

The Autoresizingmask property in this is an enumeration value, and the enumeration value has the following meanings: Uiviewautoresizingnone: is not automatically adjusted.

Uiviewautoresizingflexibleleftmargin: Automatically adjusts the distance to the left of the superview to ensure that the distance to the right of the Superview is constant.

Uiviewautoresizingflexiblerightmargin: Automatically adjusts the right distance from the Superview to ensure that the distance to the left of the Superview is constant.

Uiviewautoresizingflexibletopmargin: Automatically adjusts the distance from the top of the Superview to ensure that the distance from the bottom of the Superview is constant.

Uiviewautoresizingflexiblebottommargin: Automatically adjusts the distance to the bottom of the Superview, that is, the distance from the top of the Superview is unchanged.

Uiviewautoresizingflexiblewidth: Automatically adjusts its width to ensure that the distance to the left and right of the Superview is constant.

Uiviewautoresizingflexibleheight: Automatically adjusts its height to ensure that the distance from the top and bottom of the Superview is constant.

uiviewautoresizingflexibleleftmargin| Uiviewautoresizingflexiblerightmargin: Automatically adjusts the distance to the left of the superview to ensure that the distance from the left to the right is the same as the distance from the left and right. For example, the original distance is 20, 30, the adjusted distance should be 68,102, that is, 68/20=102/30. Unfortunately, the flaws in these technologies are also obvious and are an immature technology for two reasons:

(1), autoresizingmask scaling is calculated internally by Uikit, and the developer cannot specify the exact value of the zoom scale.

(2), the change rule can only be based on the parent-child view, unable to solve the sibling view of the position relationship. So after IOS6 introduced the auto layout technology, Autoresizingmask became a chicken technology. Can use the food tasteless, discard to describe.

3, autolayout-visual programming Automatic layout: About AutoLayout technology has visual programming and pure code two ways, the department first explain the way of visualization. Automatic layout is a further refinement of the Autoresizingmask, which allows developers to establish precise rules of linear variation between any of the two views on an interface. The so-called linear change is a function in mathematics, that is: y = m*x + c where x and Y are a layout property of any two views in the interface, M is the scale factor, and C is a constant. There are three scenarios for setting constraints in storyboard or xib:

(1) long press the control key in the designer to drag the controls.

(2) in the left Document structure window, press and hold the control key.

(3) Click on the bottom of the designer icon, pin set distance constraints, fixed width height constraints, such as high and wide height ratio constraints, align set alignment constraints.

Note: You can set multiple constraints at the same time by holding down the SHIFT key and the option key simultaneously in scenarios (1) and (2). Before we mentioned an important concept is constraint, there are many kinds of constraints, which are listed as follows: Leading: Constraints from the left side of the other view

Trailing: Constraint from the left side of the other view

Top: Constraints on the distance from the top of another view

Bottom: Constraint from the bottom distance of another view

Width: Constraints on the fixed width of a single view

Height: Constraint for a single view fixed height

Equal Widths: Two views equal width constraint

Equal Heights: Two views, etc. high constraints

Aspect Ratio: Constraints for a single view fixed aspect ratio

Horizontally in Container: A constraint that is fixed in the horizontal centerline of the parent view

Vertically in Container: A constraint that is fixed in the vertical centerline of the parent view

Vertically in Container: A constraint that is fixed in the horizontal centerline of a non-parent view

Horizontall Centers: Constraints fixed in the vertical centerline of a non-parent view

Vertical Spacing: Two view vertical distance constraints

Horizontally Spacing: Two views horizontal direction distance constraint

Align top to: Upper alignment constraint

Align Bottom to: bottom alignment constraint

Align leading to: Left alignment constraint

Align Trailing to: Right align Constraint

There are also some options that are almost necessary for us, and the meanings are listed as follows: Update Frames: Updating coordinates to accommodate constraints

Update Constraints: Updating constraints to accommodate coordinates

Add Constraints: Adding constraints

Constain to margins: If you order constrain to margins, there will be 8 points in the air, starting from 8 points to calculate the constraint, and without the point, the 0 points of the screen start to calculate. It is recommended that you uncheck the check box.

We can look at the details of each constraint on the right side of the canvas, and the formula y = m*x + C, which is changed in relation to x in the preceding y, is echoed here, and the first item corresponds to Y in the formula, representing the dependent variable

Relation corresponds to the = in the formula, representing the equality relationship, where equal is equal

Second item corresponds to the X in the formula, which represents the argument

The multiplier corresponds to the m in the announcement, indicating the scale factor

Constant corresponds to the C in the publication, indicating the offset constant

Click on the first item or the Second item drop-down menu and select reverse First and Second item to swap the positions of both sides.

Inverse function: x = 1/m * y-c/m

It is worth mentioning that the constraints can not be less, less can not determine the location of the view, nor more, more conflict.

In addition, some user controls for displaying content, such as text control Uilabel, button UIButton, picture View Uiimageview, and so on, have their own content dimensions (intrinsic content size). Such user controls add layout constraints based on their content dimensions. That is, if the developer does not explicitly give its width or height constraints, the self-content constraints it automatically adds will work.

4. autolayout-code Auto-layout: Not all cases can be solved with IB, such as defining a constraint such as the height of a view equal to the width of another view, it is the most basic and flexible way to build automatic layout constraints through code. The disadvantage is that the code is lengthy. Each layout constraint is a nslayoutconstraint instance, and the main properties of the Nslayoutconstraint class are defined as follows

@property (readonly, assign) ID FirstItem;

@property (readonly) Nslayoutattribute FirstAttribute;

@property (readonly) nslayoutrelation relation;

@property (readonly, assign) ID SecondItem;

@property (readonly) Nslayoutattribute Secondattribute;

@property (readonly) CGFloat multiplier;

@property CGFloat constant;

...

+ (Instancetype) Constraintwithitem: (id) firstitem attribute: (nslayoutattribute) FirstAttribute

Relatedby: (nslayoutrelation) relation

Toitem: (id) seconditem attribute: (nslayoutattribute) Secondattribute

Multiplier: (cgfloat) Multiplier constant: (cgfloat) constant;

Each layout constraint is a definite linear change rule, which is mathematically expressed in the form of a function, namely:

y = m * x + C

Each constraint corresponds to the following relationship:

Firstitem.firstattribute {==,<=,>=} seconditem.secondattribute * Multiplier + constant

We can call the Constraintwithitem of the Nslayoutconstraint class: ... method to construct a new constraint by passing in all the required parameters.

(1), FirstItem and SecondItem are constrained views and referenced views in the interface, they do not have to be siblings or parent-child relationships, as long as they have a common ancestor view.

(2), FirstAttribute and Secondattribute are some layout attributes of FirstItem and SecondItem respectively (Nslayoutattribute),    Where Nslayoutattributenotanattribute when we need to precisely specify a width or height value for a view, this time SecondItem is Nil,secondattribute Nslayoutattributenotanattribute.

(3), relation defines the layout relationship

typedef ns_enum (Nsinteger, nslayoutrelation)

{

Nslayoutrelationlessthanorequal =-1,

nslayoutrelationequal = 0,

Nslayoutrelationgreaterthanorequal = 1,

};

The layout relationship can be equal, greater than or equal to or less than equals.

(4), multiplier is the proportional factor.

(5), Constant is constant

The use cases are as follows:

The first step: The default Autoresizingmask code and Automatic layout constraints conflict, set to No, the program only automatic layout constraints code, avoid conflicts.

Logoview.translatesautoresizingmaskintoconstraints = NO;

Step Two: set the constraint, in order to uniquely determine the location of the view, I added four constraints

Logoviewtopconstraint = [Nslayoutconstraint constraintwithitem:logoview attribute:nslayoutattributetop relatedBy: Nslayoutrelationequal ToItem:self.view attribute:nslayoutattributetopmargin multiplier:1.0f constant:80];

Nslayoutconstraint *logoviewcenterconstaint = [Nslayoutconstraint constraintwithitem:logoview attribute: Nslayoutattributecenterx relatedby:nslayoutrelationequal ToItem:self.view Attribute:nslayoutattributecenterx multiplier:1.0f constant:0];

Nslayoutconstraint *logoviewwidthconstaint = [Nslayoutconstraint constraintwithitem:logoview attribute: Nslayoutattributewidth relatedby:nslayoutrelationequal ToItem:self.view Attribute:nslayoutattributewidth Multiplier:0.3f constant:0];

Nslayoutconstraint *logoviewhightconstaint = [Nslayoutconstraint constraintwithitem:logoview attribute: Nslayoutattributewidth relatedby:nslayoutrelationequal Toitem:logoview Attribute:nslayoutattributeheight multiplier:1.0f constant:0];

Step Three: Add constraints

Logoviewtopconstraint.active = YES;

Logoviewcenterconstaint.active = YES;

Logoviewwidthconstaint.active = YES;

Logoviewhightconstaint.active = YES;

5, Vfl:visual format Language, visual formatting language, can be intuitive and simple to create constraints, the disadvantage is not to express all constraints. Examples of usage:

First step: Autoresizingmask set to No.

Logoview.translatesautoresizingmaskintoconstraints = NO;

Step two: Add a constraint using the VFL

[Self.view addconstraints:[nslayoutconstraint constraintswithvisualformat:@ "V:|-80-[logoview]" options: Nslayoutformatalignallleft metrics:nil views:@{@ "Logoview": Logoview}];

The syntax is this, h means landscape

V indicates vertical

| Represents the parent view

[view name] represents a view

-Indicates spacing

-Spacing-Indicates setting other spacing

[View name (set width height of view)]

The parameters of the Constraintswithvisualformat method above have the following meanings

VISUALFORMAT:VFL statements

Options: Based on which option (in which direction to calculate the layout)

Metrics: Bound value (NSNumber) and string

Views: Binding View and string

Nsdictionaryofvariablebindings: is a macro, convenient for us to build a dictionary, Nsdictionaryofvariablebindings (logoview) is equal to @{@ "Logoview": LogoView }。

Also need to pay attention to some concise wording (1), omit: That is, if the spacing is 0 do not explicitly write, so @ "h:|-0-[logoview]-0-|" can be reduced to @ "h:|[logoview]|"

(2), merging: For example @ "H:[password]-20-[tfpassword" and @ "[tfpassword]-40-|" Can be combined as @ "h:[password]-20-[tfpassword]-40-|"

6, Masonry: is a third-party library, so that the automatic layout of the simple way, is now a more common use of programmers a program. The usage cases are as follows:

The first step: declared as __weak, because we want to use block behind, in case of memory problems.

__weak typeof (self) weakself = self;

Step two: Add constraints.

[Logoview mas_makeconstraints:^ (Masconstraintmaker *make) {

Make.centerX.equalTo (Weakself.view);

Make.top.mas_equalTo (80);

Make.width.mas_equalTo (weakself.view.bounds.size.width*0.3);

Make.height.mas_equalTo (weakself.view.bounds.size.width*0.3); }];

Masonry usage is relatively simple, there are two main points to note

Note (1): Elements that use the Mas_makeconstraints method must be added to the parent element beforehand, such as [Self.view Addsubview:view];

Note (2): Masequalto and Equalto differences: masequalto more than Equalto type conversion operations, generally speaking, most of the time two methods are common, but for numeric elements use Mas_equalto. For the handling of objects or multiple properties, use Equalto. In particular, multiple attributes must be used Equalto, such as Make.left.and.right.equalTo (Self.view);

In addition, in masonry, And,with is not specific, just to improve the readability of the program

7, Sizeclass: In the adaptive layout, Apple presents the concept of size Class (size type), which is used to conceptually indicate the horizontal or vertical size. There are 3 types of sizes, large called regular (standard size type, précis-writers +), small called compact (compact size type, précis-writers-), arbitrarily called any (regular and compact arbitrary). All ipad regardless of location is [+, +]

All iphone on vertical screen is [-, +]

Only iphone 6 Plus and 6s Plus are [+,-] on a horizontal screen, and the rest of the iphone is [-,-]. When the designer gives the interface design on different devices, as a developer, we should first summarize the most common automatic layout scheme as an automatic layout (base class) of any size type, and put the differentiated layout in the automatic layout of a particular size type (subclass). When using, make sure that the Use Auto layout check box and the Usage Size classes check box are selected

8, the use of the macro to adapt: we observed from iphone5 all the Apple models, although the screen size is not the same, but the screen is the same aspect ratio, which for us to adapt and found a trace of clues, in fact, we can use the aspect ratio equal this, based on a certain type of aircraft, such as 5s, On the 5s view, move to Iphone6 above, the size of the view to expand, in the same way, on the 4 and 4s, the size of the view is reduced, so that the view on different size of the screen, but the size is not the same, it seems to be harmonious, Because the view is the same scale as the screen size. Usage case: PCH is a global file, the header files and macros imported in the PCH file are valid for the global class, we define two macros with parameters in the PCH file, #define WIDTH (x) [UIScreen mainscreen]. Bounds.size.width/320*x

#define Height (y) [UIScreen mainscreen].bounds.size.height/568*y so that we can set the position of a view in the controller to write this, Bigview = [[UIView alloc] Initwithframe:cgrectmake (width), height (+), width (up), height (160))]; Of course you can rewrite the CGRectMake method so that it will be more convenient to use, I will give this last small task to everyone to think about it!

iOS Auto-fit