## 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:
- The constraint shutdown between two views of the same level is added to their parent view
- For constraints between views at different levels, add to the nearest common parent view
- 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
- VFL stands for Visual Format Language.
- 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