## The history of screen adaptation

  • iPhone3GS\iPhone4

– No screen fit to speak of – all layout with frame, bounds, center – lots of things like coordinate values, width and height all written down

objc
UIButton *btn1 = [[UIButton alloc] init];
btn1.frame = CGRectMake(0, 0, 320 - b, 480 - c);
Copy the code
  • IPad appeared, iPhone landscape

– Autoresizing technology appears – making horizontal and vertical screen adaptation relatively simple – allowing the child control to automatically change corresponding to the behavior of the parent control – on the premise that: Disable Autolayout – limitations – only resolves the relative relationship between child controls and parent controls – does not resolve the relative relationship between sibling controls

  • IOS 6.0 (Xcode4) starts

– Autolayout technology appears – from Xcode5.0(iOS 7.0), Autolayout became popular

Autolayout

  • Two core concepts: reference and constraint

Manually Add constraints

Add rules for constraints

  • After you create a constraint, you need to add it to the View on which it is applied

  • When adding a target View, note the following rules:

  1. The constraint shutdown between two views of the same level is added to their parent view
  2. For constraints between views at different levels, add to the nearest common parent view
  3. Constraints between hierarchical views are added to the parent view at the higher level

Simple example of adding constraints

  • Apple official add constraint the first direct add method
/ * * don't will turn Autolayout AutoresizingMask constraints. * / blueView translatesAutoresizingMaskIntoConstraints = NO. UIView *blueView = [[UIView alloc] init]; blueView.backgroundColor = [UIColor blueColor]; [self.view addSubview:blueView]; /** width constraint: Width is 300 * / NSLayoutConstraint * widthConstraint = [NSLayoutConstraint constraintWithItem: blueView Attribute: NSLayoutAttributeWidth relatedBy: NSLayoutRelationEqual toItem: nil attribute: 0 multiplier: 0.0 constant: 300]. [blueView addConstraint:widthConstraint];Copy the code

Code to implement Autolayout method 1- system

+ (instancetype)constraintWithItem:(id)view1 attribute:(NSLayoutAttribute)attr1 relatedBy:(NSLayoutRelation)relation toItem:(nullable id)view2 attribute:(NSLayoutAttribute)attr2 multiplier:(CGFloat)multiplier constant:(CGFloat)c;

1.View1: The control to constrain2.Attr1: Type of constraint (what constraint to do)3.Relation: Relation with the reference control4.View2: reference control5.Attr2: Type of constraint6.Multiplier: the multiplier7.C: constantCopy the code
  • Apple’s official batch constraint – VFL
  • What is the VFL language
  1. VFL stands for Visual Format Language.
  2. VFL is an abstract language introduced by Apple to simplify the coding of Autolayout
+ (NSArray<__kindof NSLayoutConstraint *> *)constraintsWithVisualFormat:(NSString *)format options:(NSLayoutFormatOptions)opts metrics:(nullable NSDictionary<NSString *,id> *)metrics views:(NSDictionary<NSString  *, id> *)views;Copy the code

Code to implement Autolayout method 2- navigation

  • Currently the most popular Autolayout third party framework
  • Code Autolayout in an elegant way
  • Apple’s official long Autolayout code is omitted
  • Greatly improve the development efficiency
  • Frame address: github.com/SnapKit/Mas…

Using the example

[MASConstraintMaker *make] {}]; Updateconstraints :^(MASConstraintMaker *make) {}]; */ UIView *blueView = [[UIView alloc] init]; blueView.backgroundColor = [UIColor blueColor]; [self.view addSubview:blueView]; blueView.translatesAutoresizingMaskIntoConstraints = NO; /** add new constraints */ [blueView mas_makeConstraints:^(MASConstraintMaker *make) {/** add new constraints */ */ make.width. Mas_equalTo (100); make.height.mas_equalto (100); make.right. EqualTo (self.view).offset(-20); make.right.  make.bottom.equalTo(self.view).offset(-20); }]; [blueView mas_makeConstraints:^(MASConstraintMaker *make) { */ make.width. Height.mas_equalto (100); make.height.mas_equalto (100);  make.right.equalTo(self.view).offset(-20); make.bottom.equalTo(self.view).offset(-20); }]; [blueView mas_makeConstraints:^(MASConstraintMaker *make) { Adhesive parent view 20 * / / / make. The distance between the lower right corner size. EqualTo ([NSValue valueWithCGSize: CGSizeMake (100, 100)]);  make.size.mas_equalTo(CGSizeMake(100, 100)); make.height.mas_equalTo(100); make.right.equalTo(self.view).offset(-20);  make.bottom.equalTo(self.view).offset(-20); }]; [blueView mas_makeConstraints:^(MASConstraintMaker *make) { Mas_equalTo (100); make.right.offset(-20); make.bottom. Offset (-20);}]; / / [blueView mas_makeConstraints:^(MASConstraintMaker *make) { */ make.sie.mas_equalto (self.view).multipliedby (0.5); */ make.right.equalto (self.view).offset(-20); make.bottom.equalto (self.view).offset(-20);}]; /** center (horizontal + vertical) */ ** size is half that of the parent control */ Make. Size. Mas_equalTo (self. The view). MultipliedBy (0.5); make. Center. Mas_equalTo (self. View);}]; (MASConstraintMaker *make) { make.left.mas_equalTo(self.view).offset(50); make.right.mas_equalTo(self.view).offset(-50);  make.top.mas_equalTo(self.view).offset(50); make.bottom.mas_equalTo(self.view).offset(-50); }]; / / (MASConstraintMaker *make) { make.left.and.top.mas_equalTo(self.view).offset(50); make.right.and.bottom.mas_equalTo(self.view).offset(-50); }]; ^(MASConstraintMaker *make) { make.edges.mas_equalTo(self.view).insets(UIEdgeInsetsMake(50, 100, 50, 50)); Mas_equalTo (self.view). Insets (UIEdgeInsetsZero);/** Set the spacing */ make.edges.Copy the code

Constraint type

1. Width \ height \ size
2. Left \ leading \ right \ trailing \ top \ bottom
3. Center: Center \ centerY \ Center X
4. Margin: EDGS

There is a macro in the header file, used before the reference header file, instead of adding “mas_” to each method

//define this constant if you want to use Masonry without the 'mas_' prefix
//#define MAS_SHORTHAND

//define this constant if you want to enable auto-boxing for default syntax
//#define MAS_SHORTHAND_GLOBALS
Copy the code