Use masonry to build the interface.

When you create an iOS project, you work with the user interface, which is commonly divided into visual programming and code building views.

1. Visual Programming sub- Storyboard and xib two kinds.

Using XIB can be code and visual mixing, when creating viewcontroller or cell, directly tick also create XIB file can be used, a XIB responsible for the construction of an interface view.

With storyboard, you can build and jump through multiple interfaces within a single storyboard file, and the controller and interface are connected by storyboard ID (identifier).

Whether it is xib or storyboard interface building, all use constraints to the layout of each space, you can more intuitively see the effect of the interface building, but want to achieve the management of the code, it seems more difficult.

2. Using the code to build, you can use Cgrect,cgsize,cgpoint and other related methods, but the efficiency is too low, easy to write dead data, compatibility is not very good; You can also use AutoLayout (Automatic layout) processing, There is a third party on GitHub for AutoLayout:masonry, which has been packaged very well, makes it easy and quick to layout the view with code.

　　Masonry view layout, you need to be able to use methods for layout processing after the child view has been loaded in the parent view. The layout code is written in a block block, and the method is called through the chained syntax:

1 #import "ViewController.h"2 #import<Masonry.h>//Use of cocoapods for third-party installation, use <> reference3 #import "uiview+equalspacingline.h"//Not in the original masonry, you need to refer to a custom wide array of classes4 5 #defineSIZE [UIScreen mainscreen].bounds.size6 7 @interfaceViewcontroller ()8 9 @endTen  One @implementationViewcontroller A  -- (void) Viewdidload { - [Super Viewdidload]; the      -UIView *view = [UIViewNew]; -View.backgroundcolor =[Uicolor Purplecolor]; - [Self.view Addsubview:view]; +      -[View mas_makeconstraints:^ (Masconstraintmaker *Make ) { +Make.size.mas_equalTo (Cgsizemake (Size.width *0.8, Size.Height *0.8)); A Make.center.equalTo (self.view); at     }]; -  -     //equal width arrangement settings -  -UIView *view2 = [UIViewNew]; -View2.backgroundcolor =[Uicolor Whitecolor]; in [view Addsubview:view2]; -  to[View2 mas_makeconstraints:^ (Masconstraintmaker *Make ) { +         //set the ratio of width to height of the control view -Make.width.equalTo (view). Multipliedby (0.1); theMake.height.equalTo (view). Multipliedby (0.1); *     }]; $     Panax NotoginsengUIView *VIEW3 = [UIViewNew]; -View3.backgroundcolor =[Uicolor Greencolor]; the [view ADDSUBVIEW:VIEW3]; +      A[VIEW3 mas_makeconstraints:^ (Masconstraintmaker *Make ) { the Make.size.equalTo (VIEW2); +  -     }]; $      $UIView *VIEW4 = [UIViewNew]; -View4.backgroundcolor =[Uicolor Redcolor]; - [view ADDSUBVIEW:VIEW4]; the      -[View4 mas_makeconstraints:^ (Masconstraintmaker *Make ) {Wuyi Make.size.equalTo (VIEW2); the  -     }]; Wu      -UIView *view5 = [UIViewNew]; AboutView5.backgroundcolor =[Uicolor Cyancolor]; $ [view addsubview:view5]; -      -[View5 mas_makeconstraints:^ (Masconstraintmaker *Make ) { - Make.width.equalTo (VIEW2); AMake.height.equalTo (VIEW2). Multipliedby (1.5); +  the     }]; -      $UIView *view6 = [[UIView alloc] Initwithframe:cgrectmake (0,0, -, -)]; theView6.backgroundcolor =[Uicolor Bluecolor]; the [view ADDSUBVIEW:VIEW6]; the      the[View6 mas_makeconstraints:^ (Masconstraintmaker *Make ) { -         //given a width-high value inMake.height.offset ( -); theMake.width.offset ( -); the     }]; About      the     //Equal width arrangement the[View Equalspacinglinewithviews:@[view2, VIEW3, View4, View5, View6] bydirection:direction_horizontal andblock:^ ( Masconstraintmaker *Make ) { the make.bottom.equalTo (view); +     }]; -  the }Bayi  the @end

：

　　

Equal width arrangement Category:

1 #import<UIKit/UIKit.h>2 #import<Masonry.h>//Be sure to refer to masonry before!!! use3 4 //Arrangement Direction5 typedef ns_enum (Nsinteger, Direction) {6 Direction_horizontal,7 direction_vertical,8 };9 Ten @interfaceUIView (equalspacingline) One  A /** - * Equal width arrangement - * @param views sub-view array, only set width height (using masonry settings) the * @param direction arrangement Direction - * @param block Add masonry code block, if nil, the posture chart is centered - * @return void -  */ +- (void) Equalspacinglinewithviews: (nsarray<uiview*>*) Views Bydirection: (Direction) Direction Andblock: (void(^) (Masconstraintmaker *Make )) Block; -  + @end

1 #import "uiview+equalspacingline.h"  2 3 @implementationUIView (equalspacingline)4 5- (void) Equalspacinglinewithviews: (nsarray<uiview*>*) Views Bydirection: (Direction) Direction Andblock: (void(^) (Masconstraintmaker *Make )) block{6     7     //Add an interval view8Nsmutablearray *newviews =[Nsmutablearray array];9      for(inti =0; I <= Views.count; i++){TenUIView *view = [UIViewNew]; One [self addsubview:view]; A [Newviews Addobject:view]; -         if(I! =Views.count) { - [Newviews Addobject:views[i]]; the         } -     } -  -     //View Arrangement +      for(inti =0; i < Newviews.count; i++){ -[Newviews[i] mas_makeconstraints:^ (Masconstraintmaker *Make ) { +             if(Direction = =direction_horizontal) { A                 //setting around Landscape atMake.left.equalTo (i = =0? Self: ((uiview*) newviews[i-1]). mas_right); -Make.right.equalTo (i = = newviews.count-1? Self: ((uiview*) newviews[i+1]). Mas_left); -                 //Equal width -                 ifI2==0) -Make.width.equalTo ((uiview*) newviews[0]); -                 if(!block) in make.centerY.equalTo (self); -}Else{ to                 //vertical up and down +Make.top.equalTo (i = =0? Self: ((uiview*) newviews[i-1]). Mas_bottom); -Make.bottom.equalTo (i = = newviews.count-1? Self: ((uiview*) newviews[i+1]). mas_top); the                 //Equal height *                 ifI2==0) $Make.height.equalTo ((uiview*) newviews[0]);Panax Notoginseng                 if(!block) - make.centerX.equalTo (self); the             } +             //Add masonry code block, if nil, center A             if(block) the block (make); +         }]; -     } $ } $  - @end

Use masonry to build the interface.