IOS Masonry Introduction and use

as Apple continues to launch new models, it is well known that UI layouts in iOS development often need to be adapted, and that the adaptation of Apple devices is primarily the 4,5,6,6plus of the 4 devices. The adaptation method has code adaptation and the use of xib to add constraints, where the code adaptation is used to AutoLayout but the official launch of the document and demo is really cumbersome, personally think it is not as stupid as a way to use the aspect ratio of the reality (but the calculation of the aspect ratio and the method and code to obtain the device too much), Until we find out that masonry is a very simple and easy-to-use third party, so simply record it.

iphone size Specifications

Equipment	Size	Logical resolution	Scale Factor	Device resolution
3GS	3.5inch	320*480	@1x	320*480
4 (s)	3.5inch	320*480	@2x	640*960
5 (s)	4inch	320*568	@2x	640*1136
5c	4inch	320*568	@2x	640*1136
6 (s)	4.7inch	375*667	@2x	750*1334
6 (s) plus	5.5inch	414*736	@3x	1242*2208

Masonry Source: Https://github.com/SnapKit/Masonry

Masonry is a lightweight layout framework that has its own description syntax , a more elegant chain-syntax wrapper for automatic layout , and is simple and straightforward , with high readability .

The properties supported by masonry are:

    Left, equivalent to Nsautolayout's Nslayoutattributeleft @property (nonatomic, Strong, ReadOnly) Masconstraint *left;    The upper side, equivalent to Nsautolayout's Nslayoutattributetop @property (nonatomic, Strong, ReadOnly) Masconstraint *top;    Right, equivalent to Nsautolayout's Nslayoutattributeright @property (nonatomic, Strong, ReadOnly) Masconstraint *right;    The next book, equivalent to Nsautolayout's Nslayoutattributebottom @property (nonatomic, Strong, ReadOnly) Masconstraint *bottom;    The first, equivalent to Nsautolayout's nslayoutattributeleading @property (nonatomic, Strong, ReadOnly) Masconstraint *leading;    The tail, equivalent to Nsautolayout's nslayoutattributetrailing @property (nonatomic, Strong, ReadOnly) Masconstraint *trailing;    Wide, equivalent to Nsautolayout's Nslayoutattributewidth @property (nonatomic, Strong, ReadOnly) Masconstraint *width;    High, equivalent to Nsautolayout's Nslayoutattributeheight @property (nonatomic, Strong, ReadOnly) Masconstraint *height; Horizontal midpoint (i.e. midpoint of x-axis), equivalent to Nsautolayout's Nslayoutattributecenterx @property (nonatomic, Strong, Readonly) Masconstraint *centerx; The vertical midpoint (that is, the midpoint of the y-axis), equivalent to Nsautolayout's Nslayoutattributecentery @property (nonatomic, Strong, ReadOnly) Masconstraint *    CenterY; Text baseline, equivalent to Nsautolayout's Nslayoutattributebaseline @property (nonatomic, Strong, ReadOnly) Masconstraint *baseline;

Having learned about the properties supported by masonry, we have a general understanding of the three methods that masonry gives us to add constraints to the control.

    new Constraint    -(Nsarray *) Mas_makeconstraints: (void (^) (Masconstraintmaker *make)) block;//    Modify an existing constraint    -( Nsarray *) Mas_updateconstraints: (void (^) (Masconstraintmaker *make)) block;//    cleared prior to the constraint, leaving only the new constraint    -(Nsarray *) Mas_remakeconstraints: (void (^) (Masconstraintmaker *make)) block;

A simple example:

1. Center displays a uiview with a width and height of 200

Code:

__weak typeof (self) weakself = self;//Prevents circular references in block    UIView *centerview = [[UIView alloc] init];    Centerview.backgroundcolor = [Uicolor redcolor];    [Self.view Addsubview:centerview];    [Centerview mas_makeconstraints:^ (Masconstraintmaker *make) {        make.center.equalTo (weakself.view);        Make.size.mas_equalTo (Cgsizemake (+));    }];

：

2. Picture frame effect. That is, the sub-uiview is less than Supview.

Code:

__weak typeof (self) weakself = self;//Prevents circular references in block UIView *photoview = [[UIView alloc] init];    PhotoView.layer.borderWidth = 1; PhotoView.layer.borderColor = [Uicolor blackcolor].    Cgcolor;    Photoview.backgroundcolor = [Uicolor Graycolor];        [Self.view Addsubview:photoview];    Uiimageview *imageview = [[Uiimageview alloc] init];    Imageview.image = [UIImage imagenamed:@ "1"];            [PhotoView Addsubview:imageview]; [PhotoView mas_makeconstraints:^ (Masconstraintmaker *make)        {Make.center.equalTo (Weakself.view);    Make.size.mas_equalTo (Cgsizemake (200, 200));        }]; [ImageView mas_makeconstraints:^ (Masconstraintmaker *make)        {//Mode one://Make.top.equalTo (PhotoView). Offset (+//Make.left.equalTo (PhotoView). Offset (10);// Make.bottom.equalTo (PhotoView). Offset ( -10),//Make.right.equalTo (PhotoView). Offset (-10);//Mode two://M Ake.top.left.bottom.right.equalTo (PhotoView). Insets (Uiedgeinsetsmake (10, 10, 10, 10));//Way Three: Make.edges.equalTo (PhotoView). Insets (Uiedgeinsetsmake (10, 10, 10, 10)); }];

Effect

Use before you add a constraint to a masonry, you must first add the view to it.

IOS Masonry Introduction and use