IOS Masonry nine Gongge single-line multiline layout

Masonry is a good thing, in the current size of different iOS development adaptation plays a vital role, because the project masonry layout with more, for the UI layout also has some of their own understanding, often asked masonry layout nine Gongge how to layout it, one-line, Multi-line How to do automatic layout, before using frame layout nine lattice need 2 layer for loop, a variety of judgments can complete a set of nine grid layout, then use masonry is not so troublesome, the answer is no! The following masonry layout line, a number of lines of code to paste out, the comments are very detailed, there is a need for students to refer to the reference, may have a different understanding of the use of masonry.
Image

Code

viewcontroller.m//sudokulayout////Created by Tiny on 2017/12/29.//Copyright? 2017 HXQ. All rights reserved.//#import "ViewController.h" #import "Masonry.h" @interface Viewcontroller () @end @implementation    viewcontroller-(void) viewdidload {[Super viewdidload];        Additional setup after loading the view, typically from a nib.            If you need to consider the layout code can be written in layoutsubviews this method//nine grid layout line [self layoutoneline];            Nine Gongge layout is actually similar to the single-line layout, the only thing to be aware of is to judge the problem of the line in order to reflect the difference, two separate write code does have a large number of duplicate//multi-line layout is support single-line [self layoutmultiline]; Analysis of the code can be seen in the multi-line layout and single-row layout actually there is no special place//Difference point 1. Determine when to change line//2. Determine the distance from the top of the layout area//There will be a variety of differences in the real development environment, but as long as you understand the layout thinking, I believe  Well, it's going to be a good arrangement.}-(void) layoutoneline{//single line layout does not need to consider the issue of line wrapping cgfloat Marginx = 10;  button distance from left and right cgfloat marginy = 10;  button distance from top of layout cgfloat totop = 50;    The distance from the top of the layout area cgfloat gap = 10;    The distance between the button and the button Nsinteger col = 5;  Here only the layout 5 columns Nsinteger count = 5; Here first set the layout 5 buttons cgfloat viewWidth = Self.view.bounds.size.width;  The width of the view cgfloat viewheight = self.view.bounds.size.height;  The height of the view cgfloat itemwidth = (Viewwidth-marginx-(COL-1) *gap)/col*1.0f;   Depending on the number of columns and the spacing between the buttons, these parameters basically determine the width of the button to be tiled cgfloat height = itemwidth;   The height of the button can be set here to equal UIButton *last = nil, depending on the situation;        The previous button//preparation has been completed to start layout for (int i = 0; i < count; i++) {UIButton *item = [self buttoncreat];        [Item settitle:@ (i). StringValue Forstate:uicontrolstatenormal];                [Self.view Addsubview:item]; Layout [item mas_makeconstraints:^ (Masconstraintmaker *make) {//Width height is fixed, and make is already counted.            Width.mas_equalto (Itemwidth);                        Make.height.mas_equalTo (height);            Toptop distance from the top, a single line without considering too many, multi-line, also need to calculate the distance from the top of Make.top.mas_offset (Totop+marginy);            if (!last) {//last is nil description is the first button make.left.mas_offset (Marginx); }else{//second or Back button away from the previous buttonThe distance to the right is Gap units Make.left.mas_equalTo (last.mas_right). Mas_offset (GAP);        }        }];    Last = Item;  }}-(void) layoutmultiline{//multi-line layout Consider the problem of line wrapping cgfloat Marginx = 10;  button distance from left and right cgfloat marginy = 1;  Distance from upper and lower edge cgfloat totop = 200;    The distance from the top of the button cgfloat gapx = 10;    The distance between the left and right buttons cgfloat gapy = 10;    The distance between the up and down buttons Nsinteger col = 5;  Here only the layout 5 columns Nsinteger count = 13;  Here first set the layout of any button cgfloat viewwidth = self.view.bounds.size.width;  The width of the view cgfloat viewheight = self.view.bounds.size.height;  The height of the view cgfloat itemwidth = (Viewwidth-marginx-(COL-1) *gapx)/col*1.0f;   Depending on the number of columns and the spacing between the buttons, these parameters basically determine the width of the button to be tiled cgfloat itemheight = itemwidth;   The height of the button can be set here to equal UIButton *last = nil, depending on the situation;        The previous button//preparation has been completed to start layout for (int i = 0; i < count; i++) {UIButton *item = [self buttoncreat];        [Item settitle:@ (i). StringValue Forstate:uicontrolstatenormal]; [Self.view Addsubview:item]; Layout [item mas_makeconstraints:^ (Masconstraintmaker *make) {//Width height is fixed, the previous MAK is already counted            E.width.mas_equalto (Itemwidth);                        Make.height.mas_equalTo (ItemHeight); Toptop distance from the top, single-line not too much, multiple lines, also need to calculate the distance from the top of the distance//calculate the distance from the top---based on line cgfloat top = totop + Marginy + (I/col            ) * (itemheight+gapy);            Make.top.mas_offset (top); if (!last | |                            (i%col) = = 0) {//last is nil or (i%col) = = 0 Description The first of each line to determine its distance from the left edge Make.left.mas_offset (Marginx); }else{//second or Back button the distance from the right side of the previous button is Gap units Make.left.mas_equalTo (Last.mas            _right). Mas_offset (GAPX);        }        }];    Last = Item;    }} #pragma mark-private-(UIButton *) buttoncreat{UIButton *item = [[UIButton alloc] init]; Item.backgroundcolor = [Uicolor colorwithred:arc4random_uniform (/255.0 green:arc4random_uniform)/255.0 Blue : Arc4random_uniform (256)/255.0 alpha:1.0f];    Item.titleLabel.font = [Uifont systemfontofsize:16];    [Item Settitlecolor:[uicolor Redcolor] Forstate:uicontrolstatenormal]; return item;} @end

As above, the code in the comments have been very detailed, I believe that the students here have already understood the layout principle, here stressed the final summary of a few words:

Analysis of the code can be seen in the multi-line layout and single-row layout there is no special place
Difference point 1. Determine when to break the line
2. Determine how far from the top of the layout area
There are still a variety of differences in the real development environment, but as long as you understand the layout of ideas, I believe no matter how the layout will be good

Since the code has only one file, it has all been posted. Demo is not available here (-^^-)

Copyright tinych,qqcc1388 All, reproduced please note reprint Source: http://www.cnblogs.com/tinych/p/8143836.html

IOS Masonry nine Gongge single-line multiline layout