UI layouts for iOS development

Preface: This essay will be updated frequently, with my deep study on the layout, will continue to add new knowledge, new use skills, new understanding and so on.

1. autoresizing (used in code)

Just look at the code below, and the effect on the left, then rotate the iphone emulator, then look at the effect, then combine the Autoresizingmask attribute in the code to realize:

After a horizontal screen, the default frame (0,0,100,500) on the vertical screen will be placed in the middle of the screen after swapping, but because the Autoresizingmask property set above is auto-scaling on the left and the top:

The above is the basic autoresizing used in the code.

2. Use of AutoLayout (used in code)

Before AutoLayout, there are autoresizing to do screen fitting, but the limitations are large and some tasks simply cannot be completed (Autoresizing can only set the relative relationship between itself and the parent control).

By contrast, AutoLayout's functionality is much more powerful than autoresizing, and it solves the relationship between any control.

2 Core concepts of AutoLayout:

① constraint: Determines the position and size of a control by adding a constraint to the control.

Using AutoLayout, you need to create a constraint class to create a constraint object:

Nslayoutconstraint *LEFTLC = [Nslayoutconstraint constrainwithitem: ...];

② references: When you add a constraint, it is the person who adds it (either a parent control or a sibling control).

If you use AutoLayout, you don't have to think about frame values.

In the actual development, if you want to use AutoLayout, to pay attention to a problem, some Apple Cocoa Framework provides uiview or custom UIView may default set the relevant autoresizing, Then you might be in conflict with the AutoLayout code you added later, so you'll need the following code to automatically convert autoresizing to AutoLayout:

Steps to implement AutoLayout code

1. 1. Create a specific constraint object using the Nslayoutconstraint class
   2. Add a Constraint object to the corresponding view
   3. -(void) AddConstraint: (Nslayoutconstraint *) constraint;
   4. -(void) Addconstraints: (Nsarray *) constraints;

Then the following code to use AutoLayout, we have to achieve the following effect, of course, rotating into a vertical screen or to such a layout oh, otherwise the automatic layout has meaning:

　　

Before the code is implemented, I need to add some knowledge:

Using automatic layout is a rule that requires adherence to some constraints:

Rules for adding constraints (1)

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 to their parent view

　　　　
Rules for adding constraints (2)
2) for the constraint relationship between two different levels of view, add to their nearest common parent view
　　　　

Rules for adding constraints (3)
3) for a hierarchical relationship between the two view constraints, added to the higher level of the parent view
　　　　
In the entire code shown below, I take a part to understand the meaning of the above constraint add rule:

　　　　

It then complements the class of the constraint and the meaning of the individual parameters of the object creation:

A Nslayoutconstraint object represents a constraint.
Common ways to create constrained objects

　　　　　　　　
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

The complete code for implementation is shown below:

1- (void) Viewdidload {2 [Super Viewdidload];3     //1. Create a blue view4UIView *blueview =[[UIView alloc] init];5Blueview.backgroundcolor =[Uicolor Bluecolor];6     //restrict autoresizing from automatic to AutoLayout7Blueview.translatesautoresizingmaskintoconstraints =NO;8 [Self.view Addsubview:blueview];9     Ten     //2. Create a red view OneUIView *redview =[[UIView alloc] init]; ARedview.backgroundcolor =[Uicolor Redcolor]; -     //restrict autoresizing from automatic to AutoLayout -Redview.translatesautoresizingmaskintoconstraints =NO; the [Self.view Addsubview:redview]; -      -     //Set Constraints -     /** * * * BLUE View constraint * * **/ +     //constraint on the left -     //left constraint +Nslayoutconstraint *leftlc_b =  A [Nslayoutconstraint Constraintwithitem:blueview at Attribute:nslayoutattributeleft - relatedby:nslayoutrelationequal - ToItem:self.view - Attribute:nslayoutattributeleft -Multiplier1.0 -constant -]; in [Self.view Addconstraint:leftlc_b]; -      to     //Bottom Constraint +Nslayoutconstraint *bottomlc_b =  - [Nslayoutconstraint Constraintwithitem:blueview the Attribute:nslayoutattributebottom * relatedby:nslayoutrelationequal $ ToItem:self.viewPanax Notoginseng Attribute:nslayoutattributebottom -Multiplier1.0 theconstant:- -]; + [Self.view Addconstraint:bottomlc_b]; A      the     //Right constraint +Nslayoutconstraint *rightlc_b =  - [Nslayoutconstraint Constraintwithitem:blueview $ Attribute:nslayoutattributeright $ relatedby:nslayoutrelationequal - Toitem:redview - Attribute:nslayoutattributeleft theMultiplier1.0 -constant:- -];Wuyi [Self.view Addconstraint:rightlc_b]; the      -     //width Constraints WuNslayoutconstraint *wlc_b =  - [Nslayoutconstraint Constraintwithitem:blueview About Attribute:nslayoutattributewidth $ relatedby:nslayoutrelationequal - Toitem:redview - Attribute:nslayoutattributewidth -Multiplier1.0 Aconstant0]; + [Self.view Addconstraint:wlc_b]; the      -     //Height Constraints $Nslayoutconstraint *hlc_b =  the [Nslayoutconstraint Constraintwithitem:blueview the Attribute:nslayoutattributeheight the relatedby:nslayoutrelationequal the Toitem:nil - Attribute:nslayoutattributenotanattribute inMultiplier0.0 theconstant -]; the [Blueview Addconstraint:hlc_b]; About  the      /** * * * constraints of Red view * * **/ the     //Right constraint theNslayoutconstraint *rightlc_r =  + [Nslayoutconstraint Constraintwithitem:redview - Attribute:nslayoutattributeright the relatedby:nslayoutrelationequalBayi ToItem:self.view the Attribute:nslayoutattributeright theMultiplier1.0 -constant:- -]; - [Self.view Addconstraint:rightlc_r]; the      the     //Top Align theNslayoutconstraint *toplc_r =  the [Nslayoutconstraint Constraintwithitem:redview - Attribute:nslayoutattributetop the relatedby:nslayoutrelationequal the Toitem:blueview the Attribute:nslayoutattributetop94Multiplier1.0 theconstant0]; the [Self.view Addconstraint:toplc_r]; the     98     //Bottom Alignment AboutNslayoutconstraint *bottomlc_r =  - [Nslayoutconstraint Constraintwithitem:redview101 Attribute:nslayoutattributebottom102 relatedby:nslayoutrelationequal103 Toitem:blueview104 Attribute:nslayoutattributebottom theMultiplier1.0106constant0];107 [Self.view Addconstraint:bottomlc_r];108 109}

Add:

　　

UI layouts for iOS development