iOS的Masonry介绍和使用.doc

iOS的Masonry介绍和使用一、背景 在iPhone3GS及其之前，window的尺寸都是320X480，简单开发即可； 出现iPhone4 4S出现Retina，但window是尺寸还是不变，继续简单开发； 出现iPhone5 5S，window的尺寸都是320X568，即高度变了，采用iOS提供的autoresizingMask, 可以简单适配，继续简单开发。出现iPhone6 6S及其Plus，window的width和height都发生各种变化，但屏幕比例保持不变，采用autolayout可以完成任务，但匹配比较麻烦。采用xib文件添加各种约束，或采用Visual Format Language (VFL)的编码方式可以完成基本的开发任务。二、Masonry的介绍GitHub的地址：/SnapKit/Masonry 轻量级框架，能以简单明了地实现页面布局。 链式语法，可读性高； view1 mas_makeConstraints:(MASConstraintMaker *make) make.edges.equalTo(superview).with.insets(padding); ; 可以理解为 make edges equalTo superview with insets padding 比xib文件添加各种限制和VFL语言更简洁，更有利于后续的维护和修改。三、Masonry的使用从GitHub下源码Masonry-master，添加到工程文件中。在pch文件加上#define MAS_SHORTHAND#define MAS_SHORTHAND_GLOBALS#import Masonry.h把examples的controller和view都导入到工程的对应的目录下。就可以开始学习。四、Masonry的知识点1、MASConstraintMakerinterface MASConstraintMaker : NSObject/*The following properties return a new MASViewConstraint with the first item set to the makers associated view and the appropriate MASViewAttribute */property (nonatomic, strong, readonly) MASConstraint *left;左边property (nonatomic, strong, readonly) MASConstraint *top; 上边property (nonatomic, strong, readonly) MASConstraint *right; 右边property (nonatomic, strong, readonly) MASConstraint *bottom; 下边property (nonatomic, strong, readonly) MASConstraint *leading; 左边property (nonatomic, strong, readonly) MASConstraint *trailing; 右边property (nonatomic, strong, readonly) MASConstraint *width; 宽property (nonatomic, strong, readonly) MASConstraint *height; 高property (nonatomic, strong, readonly) MASConstraint *centerX; X向中心property (nonatomic, strong, readonly) MASConstraint *centerY; Y向中心property (nonatomic, strong, readonly) MASConstraint *baseline; 基线#if TARGET_OS_IPHONE | TARGET_OS_TVproperty (nonatomic, strong, readonly) MASConstraint *leftMargin;property (nonatomic, strong, readonly) MASConstraint *rightMargin;property (nonatomic, strong, readonly) MASConstraint *topMargin;property (nonatomic, strong, readonly) MASConstraint *bottomMargin;property (nonatomic, strong, readonly) MASConstraint *leadingMargin;property (nonatomic, strong, readonly) MASConstraint *trailingMargin;property (nonatomic, strong, readonly) MASConstraint *centerXWithinMargins;property (nonatomic, strong, readonly) MASConstraint *centerYWithinMargins;#endif2、三种尺寸关系equalTo = NSLayoutRelationEquallessThanOrEqualTo = NSLayoutRelationLessThanOrEqualgreaterThanOrEqualTo = NSLayoutRelationGreaterThanOrEqual3、参考例子Masonry会自动调用 view1.translatesAutoresizingMaskIntoConstraints=NO; 1) view.left大于等于label.left/these two constraints are exactly the samemake.left.greaterThanOrEqualTo(label);make.left.greaterThanOrEqualTo(label.mas_left);2) 设置width或height的最大值和最小值/width = 200 & width = 400make.width.greaterThanOrEqualTo(200);make.width.lessThanOrEqualTo(400)3) 属性left、right、CenterY等对齐属性不能设置固定值，但可以设置和superview的相对值/creates view.left = view.superview.left + 10make.left.lessThanOrEqualTo(10)make.top.mas_equalTo(42);make.height.mas_equalTo(20);make.size.mas_equalTo(CGSizeMake(50, 100);make.edges.mas_equalTo(UIEdgeInsetsMake(10, 0, 10, 0);make.left.mas_equalTo(view).mas_offset(UIEdgeInsetsMake(10, 0, 10, 0);4) 可以使用数据组的混合值make.height.equalTo(view1.mas_height, view2.mas_height);make.height.equalTo(view1, view2);make.left.equalTo(view1, 100, view3.right);4、设置优先级 低、中、高和具体值priority allows you to specify an exact prioritypriorityHigh equivalent to UILayoutPriorityDefaultHighpriorityMedium is half way between high and lowpriorityLow equivalent to UILayoutPriorityDefaultLow例如：make.left.greaterThanOrEqualTo(label.mas_left).with.priorityLow();make.top.equalTo(label.mas_top).with.priority(600);-(MASConstraint*)withreturnself;-(MASConstraint*)andreturnself;5、约束组合edges/ make top, left, bottom, right equal view2make.edges.equalTo(view2);/ make top = superview.top + 5, left = superview.left + 10,/ bottom = superview.bottom - 15, right = superview.right - 20make.edges.equalTo(superview).insets(UIEdgeInsetsMake(5, 10, 15, 20)size/ make width and height greater than or equal to titleLabelmake.size.greaterThanOrEqualTo(titleLabel)/ make width = superview.width + 100, height = superview.height - 50make.size.equalTo(superview).sizeOffset(CGSizeMake(100, -50)center/ make centerX and centerY = button1make.center.equalTo(button1)/make centerX=superview.centerX - 5, centerY=superview.centerY + 10make.center.equalTo(superview).centerOffset(CGPointMake(-5, 10)使用属性链来提高可读性/All edges but the top should equal those of the superviewmake.left.right.and.bottom.equalTo(superview);make.top.equalTo(otherView);6、如何使用1) 使用引用/ in public/private interfaceproperty (nonatomic, strong) MASConstraint *topConstraint;./ when making constraintsview1 mas_makeConstraints:(MASConstraintMaker *make) self.topConstraint = make.top.equalTo(superview.mas_top).with.offset(padding.top); make.left.equalTo(superview.mas_left).with.offset(padding.left);./ then later you can callself.topConstraint uninstall;2) 使用makeConstraints、updateConstraints和remakeConstraints-(NSArray *)mas_makeConstraints: (void()(MASConstraintMaker*make)block;-(NSArray*)mas_updateConstraints: (void()(MASConstraintMaker*make)block-(NSArray*)mas_remakeConstraints: (void()(MASConstraintMaker*make)blockmas_makeConstraints只负责新增约束Autol