iOS Development - Autolayout&VFL&Masonry for Screen Adaptation

In this article, I will mention to my classmates

• The history of screen adaptation
• What is fit?
• What is Autolayout?
• How to implement Autolayout using code
• How VFL Implements Autolayout
• Masonry (third-party library) method to implement Autolayout
• So without further ado, let's go to the code!

The history of screen adaptation

• iPhone3GS\iPhone4
  
  • No screen adaptation to speak of
  • All layout with frame, bounds, center
  • Many such phenomena: coordinate values, width and height values ​​are all written to death

UIButton *btn1 = [[UIButton alloc] init];
btn1.frame = CGRectMake(0, 0, 320 - b, 480 - c);

• iPad Appears, iPhone Landscape

  • Emergence of Autoresizing Technology
    
    • Make horizontal and vertical screen adaptation relatively simple
    • Let the child control follow the behavior of the parent control to automatically change accordingly
    • The premise is: turn off the Autolayout function
    • limitation
      
      • Can only solve the relative relationship between the child control and the parent control
      • Can't solve the relative relationship problem of sibling controls

• iOS 6.0 (Xcode4) starting

  • Autolayout technology appeared
  • Since Xcode5.0 (iOS 7.0), it has become popularAutolayout

What is fit?

• Adapt and Compatible with Various Situations

• Common types of adaptation in mobile development
  System adaptation Adapt
  to different versions of the operating system

• Screen adaptation Adapt
  to different screen sizes
  iPhone size
  3.5inch, 4.0inch, 4.7inch, 5.5inch,
  iPad size
  7.9inch, 9.7inch

• screen orientation portrait landscape

• 设备 尺寸 像素 点
  iPhone \ iPhone 3G \ iPhone 3GS 3.5 inch 320 x 480 320 x 480
  iPhone 4 \ iPhone 4S 3.5 inch 640 x 960 320 x 480
  iPhone 5 \ iPhone 5C \ iPhone 5S 4.0 inch 640 x 1136 320 x 568
  iPhone6 4.7 inch 750 x 1334 375 x 667
  iPhone6 plus 5.5 inch 1242 x 2208 414 x 736
  iPad \ iPad2 9.7 inch 768 x 1024 768 x 1024
  iPad 3(The new iPad) \ iPad4 \ iPad Air 9.7 inch 1536 x 2048 768 x 1024
  iPad Mini 7.9 inch 768 x 1024 768 x 1024
  iPad Mini 2(iPad Mini with retina display) 7.9 inch 1536 x 2048 768 x 1024

What is Autolayout

• Autolayout is an "automatic layout" technology that is specially used to layout UI interfaces.
• Autolayout has been introduced since iOS 6. Due to the ineffectiveness of Xcode 4, it was not widely promoted at that time.
• Since iOS 7 (Xcode 5), the development efficiency of Autolayout has been greatly improved
• Apple also officially recommends that developers try to use Autolayoutit to layout the UI interface
• AutolayoutCan easily solve the problem of screen adaptation
• Autolayout2 core concepts of参照 约束
  
• Autolayout common panel 01-constraint processing
  
• Autolayout common panel 02-relative
  
• Autolayout common panel 03-align
  
• Autolayout warnings and errors
  
  • Warning The frame of the
    control does not match the added constraints, for example
    , the width of the constraint control is 100, and the width of the control is now 110
  • Error
    Lack of necessary constraints, such as
    only the width and height are constrained, no specific position constraints
    Two constraints conflict, such as
    a constraint control with a width of 100 and a constraint control with a width of 110

Method 1 to implement Autolayout using code

• Create constraints

+(id)constraintWithItem:(id)view1
attribute:(NSLayoutAttribute)attr1
relatedBy:(NSLayoutRelation)relation
toItem:(id)view2
attribute:(NSLayoutAttribute)attr2
multiplier:(CGFloat)multiplier
constant:(CGFloat)c;
* view1 ：要约束的控件
* attr1 ：约束的类型（做怎样的约束）
* relation ：与参照控件之间的关系
* view2 ：参照的控件
* attr2 ：约束的类型（做怎样的约束）
* multiplier ：乘数
* c ：常量

• add constraints

- (void)addConstraint:(NSLayoutConstraint *)constraint;
- (void)addConstraints:(NSArray *)constraints;

• Notice

  • Be sure to add constraints after you have the parent control
  • Turn off Autoresizing
    

    view.translatesAutoresizingMaskIntoConstraints = NO;

• The core calculation formula of automatic layout

obj1.property1 =（obj2.property2 * multiplier）+ constant value

• Rules for adding constraints (1)
  After creating a constraint, you need to add it to the active view.
  When adding, pay attention to the following rules for the target view:
  
  • For constraints between two views of the same level, add to their parent view
    
  • For constraints between two views at different levels, add to their nearest common parent view
    
  • For the constraint relationship between two views with a hierarchical relationship, add it to the parent view with a higher hierarchy
    

Method 2 to implement Autolayout using code - VFL

• What is VFL language
  
  • The full name of VFL is Visual Format Language, which translates to "Visual Format Language"
  • VFL is an abstract language introduced by Apple to simplify the coding of Autolayout
    
• VFL example

H:[cancelButton(72)]-12-[acceptButton(50)]
canelButton宽72，acceptButton宽50，它们之间间距12

H:[wideView(>=60@700)]
wideView宽度大于等于60point，该约束条件优先级为700（优先级最大值为1000，优先级越高的约束越先被满足）

V:[redBox][yellowBox(==redBox)]
竖直方向上，先有一个redBox，其下方紧接一个高度等于redBox高度的yellowBox

H:|-10-[Find]-[FindNext]-[FindField(>=20)]-|
水平方向上，Find距离父view左边缘默认间隔宽度，之后是FindNext距离Find间隔默认宽度；再之后是宽度不小于20的FindField，它和FindNext以及父view右边缘的间距都是默认宽度。（竖线“|” 表示superview的边缘）

• 有了Autolayout的UILabel
  
  • Before Autolayout, the text content of UILabel was always centered, resulting in a large blank area at the top and bottom
    
  • With Autolayout, the bounds of UILabel will automatically wrap all text content by default, and there will no longer be empty areas at the top and bottom.
    

• Animation based on Autolayout

  • After modifying the constraints, just execute the following code to animate

  [UIView animateWithDuration:1.0 animations:^{
      // 强制更新
      [添加了约束的view layoutIfNeeded];
  }];

• Create Constraint Array with VFL

+ (NSArray *)constraintsWithVisualFormat:(NSString *)format
options:(NSLayoutFormatOptions)opts
metrics:(NSDictionary *)metrics
views:(NSDictionary *)views;
* format ：VFL语句
* opts ：约束类型
* metrics ：VFL语句中用到的具体数值
* views ：VFL语句中用到的控件

• Use the following macro to automatically generate views and metrics parameters

NSDictionaryOfVariableBindings(...)

Method 3 of implementing Autolayout using code - Masonry

• Masonry

  • The most popular third-party framework for Autolayout
  • Write Autolayout with elegant code
  • Eliminates Apple's official disgusting Autolayout code
  • Greatly improved development efficiency
  • Frame address:
  • https://github.com/SnapKit/Masonry

• Masonry usage steps

  • Add all the source code from the Masonry folder to the project
  • Add 2 macros, import the main header file
  • by default
  • mas_equalTo has an automatic packaging function, such as automatically packaging 20 as @20
  • equalTo has no automatic wrapping function

  • If the following macro is added, then there is no difference between mas_equalTo and equalTo

    
    #define MAS_SHORTHAND_GLOBALS
    
    // 注意：这个宏一定要添加到#import "Masonry.h"前面

  • By default,
    width is an attribute of the make object, which is used to add width constraints, indicating that the width is constrained

  • mas_width is an attribute value, used as a parameter of equalTo, indicating the width attribute of a control
  • mas_width can also be written as width if the following macro is added
    

    
    #define MAS_SHORTHAND
    
    mas_height、mas_centerX以此类推
    // 注意：这个宏一定要添加到#import "Masonry.h"前面

• Dispensable usage

  • The following methods are all for readability only, optional

      - (MASConstraint *)with {
          return self;
      }
  
      - (MASConstraint *)and {
          return self;
      }

• How to add constraints

// 这个方法只会添加新的约束
 [view makeConstraints:^(MASConstraintMaker *make) {

 }];

// 这个方法会将以前的所有约束删掉，添加新的约束
 [view remakeConstraints:^(MASConstraintMaker *make) {

 }];

 // 这个方法将会覆盖以前的某些特定的约束
 [view updateConstraints:^(MASConstraintMaker *make) {

 }];

• type of constraint

1.尺寸：width\height\size
2.边界：left\leading\right\trailing\top\bottom
3.中心点：center\centerX\centerY
4.边界：edges