Autoresizing and AutoLayout

AutoLayout

• AutoLayout is an "automatic layout" technique designed for the layout of UI interfaces.
• 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 has also recommended developers try to use AutoLayout to layout the UI interface
• AutoLayout can easily solve problems with screen adaptation

1. Core Concepts

• Constraints

  • Dimension constraints
    • Width constraint
    • Height constraint
  • Location constraints
    • Spacing constraint (upper and lower left and right spacing)

• Reference

  • Which control is associated with the added constraint (relative to which control)

2. Warnings and Errors

• Warning

  • The control's frame does not match the constraint added, such as
    • For example, the constraint control has a width of 100, and the control now has a width of 110

• Error

  • Lack of necessary constraints, such as
    • Constrain width and height only, no constraint-specific position

• Two constraint conflicts

  • For example: 1 constrained controls have a width of 100, 1 constrained controls have a width of 110

3. Code Implementation AutoLayout

• 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;

• 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. Nslayoutconstraint

• A 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: Control to constrain ATTR1: type of constraint (how to constrain) relation: Relationship to reference control View2: referenced control attr2 : Type of constraint (how to constrain) multiplier: Multiplier C: Constant

• The core calculation formula of automatic layout

Obj1.property1 = (Obj2.property2 * multiplier) + constant value

5. 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 to 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

6. Some changes after the AutoLayout

• Before AutoLayout, Uilabel's text content is always centered, resulting in a large open area at the top and bottom
• With AutoLayout, Uilabel's bounds will automatically wrap all text content on the default, and there will be no vacancies at the top or bottom.

7. AutoLayout-based animations

• Modify Constraint-Animation
  • After you set the constraint, modify the value of the constraint
  • Calling functions

// use 2s of time to update constraints [UIView animatewithduration:2.0 animations:^{    [Self.view layoutifneeded];}];

8. Common words

• Left, leading
• Trailing Right

9. Uilabel implementation of package content

• Set width constraint to <= fixed value
• Set Location constraints
• No need to set a height constraint

Autoresizing

• uiviewautoresizingflexible Left Margin = 1 << 0,
  • The distance between the parent control 左边 is scaled
• uiviewautoresizingflexible Right Margin = 1 << 2,
  • The distance between the parent control 右边 is scaled
• uiviewautoresizingflexible Top Margin = 1 << 3,
  • The distance between the parent control 上边 is scaled
• uiviewautoresizingflexible Bottom Margin = 1 << 5
  • The distance between the parent control 下边 is scaled
• Uiviewautoresizingflexible Width = 1 << 1,
  • 宽度Follow the parent control 宽度 to scale
• Uiviewautoresizingflexible Height = 1 << 4,
  • 高度Follow the parent control 高度 to scale

Autoresizing and AutoLayout