iOS Development--ui Basics-screen fit

First, the appropriate matching

1. What is a fit?
Adaptable and compatible with a variety of situations

2. Common types of adaptation in mobile development
2.1 System adaptation
Adapting to different versions of the operating system

2.2 Screen Fit
Suitable for different sizes of screen sizes

Two, dots and pixels

1. In the eyes of the user
The screen is made up of countless pixels
The more pixels, the clearer the screen

2. In the eyes of developers
The screen is made up of countless dots, and dots are made up of pixels.
The more pixels, the clearer the screen

Iii. introduction of Autoresizing

1. Before AutoLayout, there are autoresizing can be used for screen adaptation, but the limitations are large, some tasks simply cannot be completed
By contrast, AutoLayout has a much stronger function than autoresizing.

2 Core concepts of 2.Autolayout
Reference
Constraints

The effect of the four wires around 3.Autoresizing:
1. Just tick on a certain root, then the current control distance from the parent control is fixed, what is the current, how much will always be

2.Autoresizing the function of the middle two lines:
As long as you tick the horizontal line, the width of the current control is stretched as the width of the parent control
As long as the vertical line is ticked, the height of the current control is stretched as the height of the parent control

3. Whether a child control is pinned to a location in the parent control
or let the child control change as the width of the parent control changes
are both parent-child relationships, so autoresizing can only constrain relationships between parent-child controls, and cannot constrain relationships between sibling controls

4.Autoresizing Code Implementation

//1. Create a parent controlUIView *greenview =[[UIView alloc] Init];greenview.frame= CGRectMake (0,0, $, $); Greenview.backgroundcolor=[Uicolor Greencolor]; [Self.view Addsubview:greenview];self.greenview=Greenview;//2. Creating child controlsUIView *redview =[[UIView alloc] Init];redview.frame= CGRectMake (0,0, -, -); Redview.backgroundcolor=[Uicolor Redcolor]; [Greenview Addsubview:redview];//3. Setting the autoresizing of a child control/*Note: The upper and lower left side of the code and the storyboard in the opposite storyboard are checked on the left, which means that the distance to the left of the current control and the parent control is fixed, and if the Flexibleleftmargin is written in the code, Represents the current control and the left side of the parent control is stretchable in other words: If Flexibleleftmargin is set, it represents the fixed uiviewautoresizingflexibleleftmargin on the right. Left can be telescopic uiviewautoresizingflexiblerightmargin//Right can be telescopic uiviewautoresizingflexibletopmargin// Top can be telescopic uiviewautoresizingflexiblebottommargin//Bottom can be stretched//the following two and storyboard are the same uiviewautoresizingflexiblewidth// Width can be scaled uiviewautoresizingflexibleheight//height can be scaled*/Redview.autoresizingmask= Uiviewautoresizingflexiblewidth | Uiviewautoresizingflexibleheight;

Iv. introduction of AutoLayout

1.Autolayout is an "auto-layout" technique designed to layout the UI interface
AutoLayout has been introduced since iOS 6, and since Xcode 4 has not been given the power, it has not been greatly promoted
Since iOS 7 (Xcode 5), AutoLayout's development efficiency has been greatly improved.
Apple also recommends developers try to use AutoLayout to layout the UI interface
AutoLayout can easily solve problems with screen adaptation

Note Points for 2.Storyboard constraints
2.1. Constraints
Each add a setting (AutoLayout setting) in Storyboard, which represents the addition of a constraint

2.2. Error (Red arrow)
If you see a red arrow in the storyboard, it means there is an error in the constraint
NOTE: Constraints have errors, do not represent run errors, and constraints have errors that can also be run
Note: The Red Arrows are what programmers must address

2.3. Why is there a constraint error?
2.3.1 Lack of constraints
The nature of >autolayout and frame is almost
> If you set a control through a frame, you must set the x/y/w/h of the control to display it according to our needs.
> If you set a control through AutoLayout, you must also set the x/y/w/h of the control to display it according to our needs.
> that is, if you say x/y/w/h as long as there is no setting will be an error, is the lack of constraints

2.3.2 Constraint conflicts
> Constraints can be added repeatedly
> For example, constrain width equals 100, add a constraint, constrain width, etc. 200, then an error will be

2.4. Warning
If you see a yellow arrow in the storyboard, it's a warning.
> indicates the position or size of the current control preview is different from the position of our constraint
Note: The gold warning does not affect our running
Note: Yellow arrows, programmers can ignore

3.autolayout Animation
Once you have modified the constraint, you can animate it by simply executing the following code
[UIView animatewithduration:1.0 animations:^{

Force Update Interface
Updates all child controls of the current control and the current control
[View layoutifneeded with constraint added];
}];

4.NSLayoutConstraint (Code implementation AutoLayout)
4.1 Steps to implement AutoLayout code
Create a specific constraint object using the Nslayoutconstraint class
Add a Constraint object to the corresponding view

-(void) AddConstraint: (Nslayoutconstraint *) constraint; -(void) Addconstraints: (Nsarray *) constraints;

4.2 Code Implementation AutoLayout Point of attention

To disable the Autoresizing feature, set the following properties of the view to No
View.translatesautoresizingmaskintoconstraints = NO;
Before you add a constraint, make sure that the controls are already on the respective parent control
No need to set frame for view

4.3 Nslayoutconstraint object represents a constraint

Common ways to create constrained objects

+ (ID) Constraintwithitem: (ID) view1 attribute: (nslayoutattribute) attr1 Relatedby: ( Nslayoutrelation) Relation Toitem: (ID) view2 attribute: (nslayoutattribute) attr2 multiplier: (cgfloat) Multiplier constant: (cgfloat) C;

View1: The control to constrain
ATTR1: Type of constraint (how to constrain)
Relation: Relationship to the reference control
VIEW2: Referenced controls
ATTR2: Type of constraint (how to constrain)
Multiplier: Multiplier
C: constant

5. The core calculation formula of automatic layout
Obj1.property1 = (Obj2.property2 * multiplier) + constant value

6. Rules for adding constraints
After you create a constraint, you need to add it to the action view
Be aware that the following rules apply to the target view when adding:
1. Add a constraint to the two same-level view on their parent view
2. For the constraint relationship between two different levels of view, add to their nearest common parent view
3. For a hierarchical relationship between the two view constraints, added to the higher level of the parent view

V. the VFL language

1. What is the VFL language
The VFL full name is visual format Language, which translates to "visual formatting language".
The VFL is an abstract language that Apple has introduced to simplify AutoLayout coding

2.VFL Example
H:[cancelbutton (]-12-[acceptbutton) (50)]
Canelbutton width 72,acceptbutton Width 50, spacing between them 12

H:[wideview (>[email protected])
Wideview width greater than or equal to 60point, the constraint priority is 700 (the priority is the maximum of 1000, the higher the precedence of the constraint is satisfied first)

V:[redbox][yellowbox (==redbox)]
In the vertical direction, there is a redbox, immediately below a height equal to Redbox height Yellowbox

H:|-10-[find]-[findnext]-[findfield (>=20)]-|
Horizontally, find is the default interval width for the left edge of the parent view, followed by the default width of FindNext distance from the find interval, followed by a findfield with a width of not less than 20, which is the default width of FindNext and the right edge of the parent view. (Vertical bar "|" indicates the edge of the Superview)

Use of 3.VFL
Using the VFL to create an array of constraints

+ (Nsarray *) Constraintswithvisualformat: (NSString *) format options: (nslayoutformatoptions) OPTs metrics: ( Nsdictionary *) Metrics Views: (Nsdictionary *) views;

FORMAT:VFL statements
OPTS: Constraint type
The specific values used in the METRICS:VFL statement
The controls used in the VIEWS:VFL statement

Create a shortcut macro definition for a dictionary that contains the controls used within the VFL statement
Nsdictionaryofvariablebindings (...)

Liu, Masonry

1. Currently the most popular AutoLayout third-party framework
Write AutoLayout in an elegant code way
Omit Apple's official disgusting AutoLayout code.
Greatly improved the development efficiency

2. Frame Address:
Https://github.com/SnapKit/Masonry

3.mas_equalto and Equalto
By default
Mas_equalto has automatic packaging function, such as automatic packaging of 20 for the @20
Equalto No automatic packaging function

If you add the following macro, then Mas_equalto and Equalto are no different
#define Mas_shorthand_globals
Note: This macro must be added to the front of #import "Masonry.h"

4.mas_width and Width
By default
Width is a property of the Make object that is used to add a width constraint, which means that the width is constrained
Mas_width is a property value that is used as a Equalto parameter to represent the width property of a control

If you add the following macro, Mas_width can also be written as width
#define Mas_shorthand

Mas_height, Mas_centerx, etc.

5. The following methods are only for readability, optional
-(Masconstraint *) with {
return self;
}

-(Masconstraint *) and {
return self;
}

iOS Development--ui Basics-screen fit