首页 > 其他 > 详细

Masonry 到底有多美?(上)

时间:2016-01-28 00:34:20      阅读:319      评论:0      收藏:0      [点我收藏+]


作者:伯乐在线 - 小笨狼 

链接:http://ios.jobbole.com/83384/

Autolayout就像一个知情达理,善解人意的好姑娘,可惜长相有点不堪入目,所以追求者寥寥无几。所幸遇到了化妆大师cloudkite,给她来了一个完美的化妆,从此丑小鸭Autolayout变成了美天鹅Masonry。前几日有幸一见,果然名不虚传,长相甜美,还善解人意。我果断放弃了Frame,开始追求Masonry。

 初识Masonry

 初见

 我们先来看看Masonry到底有多美。

我要设置一个containView,他距离superView的上下左右边距都是10。 如果我用frame,应该是这样写的:

 

UIEdgeInsets edge = UIEdgeInsetsMake(10, 10, 10, 10);

CGSize superSize = view.superview.frame.size;

CGFloat width = superSize.width - edge.left - edge.right;

CGFloat heitht = superSize.height - edge.top - edge.bottom;

view.frame = CGRectMake(edge.left, edge.top, width, heitht);

 

逻辑比较复杂,阅读的时候还得想半天才能想明白,这个frame到底要表达的是什么意思。而且关键的是父View的大小如果改变,还需要再次重新设置Frame。看着Frame这黄脸婆,心里一阵别扭…

 

我们来看看充满青春活力的小鲜肉Masonry是怎么样的:

 

UIEdgeInsets edge = UIEdgeInsetsMake(10, 10, 10, 10);

[view mas_makeConstraints:^(MASConstraintMaker *make) {

    make.edges.equalTo(view.superview).insets(edge);

}];

 

使用mas_makeConstraints在block中对View添加约束。view相对父View的边距为edge。

 

代码简单,逻辑一目了然。而且还能跟父View一起调整。简直是perfect,初见Masonry,惊为天人

 

细品

 

cloudkite给Autolayout披上一层漂亮的外衣之后,将其称为Masonry,但Masonry的本质还是Autolayout。

 

Autolayout是什么呢?Autolayout就是给View添加一堆约束,让View在布局的时候通过约束计算出Frame,然后进行布局(Autolayout更多内容见Autolayout的第一次亲密接触)。make.edges.equalTo(view.superview).insets(edge);就是添加约束的过程。

 

对于一个约束。他实际表示的是一个不等或者相等关系

技术分享

 

用Masonry创建一个完整的约束应该是这样的

 

//view1的左边距离父View左边10个点:

[view1 mas_makeConstraints:^(MASConstraintMaker *make) {

    make.left.equalTo(view1.superview.mas_left).multipliedBy(1).offset(10);

}];

 

对应到上图的表达式:

 

  • Item1: make MASConstraintMaker类型,view1的承载对象,表示View1

  • Attribute: left 表示左边。left的make的属性。返回值为MASConstraint类型

  • Relationship: equalTo 表示”=”。equalTo是MASConstraint的属性

  • Item2: view1.superview

  • Attribute2: mas_left 同样表示左边,mas_left是Masonry给view加的属性,为了不重名,加了mas前缀

  • Multiplier: multipliedBy(1) 系数为1

  • Constant: offset(10) 常数为10

 

Attribute

 

MASConstraintMaker

 

上面的表达式中,我们可以看到,make是MASConstraintMaker类型。MASConstraintMaker给我们提供了22种Attribute类型

 

//Basic Attribute

@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;

@property (nonatomic, strong, readonly) MASConstraint *centerY;

@property (nonatomic, strong, readonly) MASConstraint *baseline;

 

//Margin Attribute

@property (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;

 

//Convenient Attribute

@property (nonatomic, strong, readonly) MASConstraint *edges;

@property (nonatomic, strong, readonly) MASConstraint *size;

@property (nonatomic, strong, readonly) MASConstraint *center;

 

Attribute总体来说分为三大类

 

  • Basic Attribute: 基本属性,支持到iOS6,一般使用得比较多

  • Margin Attribute: 边缘相关属性,支持到iOS8。由于版本要求比较高,一般用得比较少。Margin相关的详细内容请参考iOS8上关于UIView的Margin新增了3个APIs

  • Convenient Attribute: 便捷属性,为了使用方便而特意新增的属性。Autolayout本身没有对应的相关属性

 

Convenient Attribute实际是基本属性的组合。比如:edges表示left, right, top, bottom。

 

下面的两个代码实际的意义是一样的

 

//Convenient Attribute

make.edges.insets(edge);

 

//Basic Attribute

make.left.right.top.bottom.insets(edge);

 

MASConstraint

 

前面我们看到MASConstraintMaker中所有的Attribute都是MASConstraint类型。对于多个Attribute一起写的表达式:

 

make.left.right.top.bottom.insets(edge);

 

make.left返回的已经是MASConstraint类型,也就是说right这个Attribute是MASConstraint的属性。

 

MASConstraint给我们提供了19种Attribute:

 

//Basic Attribute

@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;

@property (nonatomic, strong, readonly) MASConstraint *centerY;

@property (nonatomic, strong, readonly) MASConstraint *baseline;

 

//Margin Attribute

@property (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;

 

 

细看一下,MASConstraint中的Attribute和MASConstraintMaker完全一样。只是MASConstraintMaker中多了3种Convenient Attribute。

 

两者Attribute的一致,大大的提升了使用的方便性。使用过程中我们不用再去区分当前属性是MASConstraint还是MASConstraintMaker类型。(事实上没研究他的类型之前,我都不知道他们分别属于2种不同类的属性)

 

UIView(12月7日新增)

 

我们可以看到在.equalTo(view1.superview.mas_left)里面,superView也有Attribute。我们来看看UIView中有哪些Attribute:

 

// Basic Attribute

@property (nonatomic, strong, readonly) MASViewAttribute *mas_left;

@property (nonatomic, strong, readonly) MASViewAttribute *mas_top;

@property (nonatomic, strong, readonly) MASViewAttribute *mas_right;

@property (nonatomic, strong, readonly) MASViewAttribute *mas_bottom;

@property (nonatomic, strong, readonly) MASViewAttribute *mas_leading;

@property (nonatomic, strong, readonly) MASViewAttribute *mas_trailing;

@property (nonatomic, strong, readonly) MASViewAttribute *mas_width;

@property (nonatomic, strong, readonly) MASViewAttribute *mas_height;

@property (nonatomic, strong, readonly) MASViewAttribute *mas_centerX;

@property (nonatomic, strong, readonly) MASViewAttribute *mas_centerY;

@property (nonatomic, strong, readonly) MASViewAttribute *mas_baseline;

 

// Margin Attribute

@property (nonatomic, strong, readonly) MASViewAttribute *mas_leftMargin;

@property (nonatomic, strong, readonly) MASViewAttribute *mas_rightMargin;

@property (nonatomic, strong, readonly) MASViewAttribute *mas_topMargin;

@property (nonatomic, strong, readonly) MASViewAttribute *mas_bottomMargin;

@property (nonatomic, strong, readonly) MASViewAttribute *mas_leadingMargin;

@property (nonatomic, strong, readonly) MASViewAttribute *mas_trailingMargin;

@property (nonatomic, strong, readonly) MASViewAttribute *mas_centerXWithinMargins;

@property (nonatomic, strong, readonly) MASViewAttribute *mas_centerYWithinMargins;

 

可以看出,在UIView中的Attribute和MASConstraint中的几乎一模一样,只是每一个Attribute加了一个mas_前缀。

 

由于UIView是系统的类,对其扩展属性和方法一般都需要添加自己的前缀,避免跟原有属性和方法冲突。不过他们的意义跟MASConstraint中的Attribute是相同的

 

Relationship

 

约束表示的是2个item之间的关系,在Autolayout中一共定义了3种关系:=, >=, <=,对应到Masonry中:

 

- (MASConstraint * (^)(id attr))equalTo;

- (MASConstraint * (^)(id attr))greaterThanOrEqualTo;

- (MASConstraint * (^)(id attr))lessThanOrEqualTo;

 

相等关系我们一般用的多。那么不相等关系我们什么时候用呢?

 

假如我有一个Label。Label的长度不能超出父View,如果label中的文字比较短,我希望是文字有多长,Label就有多长。

 

由于label具有IntrinsicContentSize属性。所以默认情况下,他是文字有多长,Label就有多长。(更多IntrinsicContentSize的内容参见Autolayout的第一次亲密接触)。所以我们只需要设置Label的长度小于父View即可

 

[label mas_makeConstraints:^(MASConstraintMaker *make) {

    make.left.offset(0);

    make.centerY.offset(0);

    make.width.lessThanOrEqualTo(label.superview);

}];

 

multiplier

 

multiplier表示Attribute前面的乘数。Masonry提供了2种添加multiplier的方法

 

//    Sets the NSLayoutConstraint multiplier property

- (MASConstraint * (^)(CGFloat multiplier))multipliedBy;

 

//    Sets the NSLayoutConstraint multiplier to 1.0/dividedBy

- (MASConstraint * (^)(CGFloat divider))dividedBy;

 

  • multipliedBy: 直接设置乘数

  • dividedBy: 设置乘数的倒数 multiplier = 1.0/dividedBy 一般宽或者高的约束使用multiplier比较多

 

Constant

 

Masonry提供了4种设置constant的方法

 

//Modifies the NSLayoutConstraint constant,only affects MASConstraints in which the first item‘s NSLayoutAttribute is one of the following NSLayoutAttributeTop, NSLayoutAttributeLeft, NSLayoutAttributeBottom, NSLayoutAttributeRight

- (MASConstraint * (^)(MASEdgeInsets insets))insets;

 

//Modifies the NSLayoutConstraint constant,only affects MASConstraints in which the first item‘s NSLayoutAttribute is one of the following NSLayoutAttributeWidth, NSLayoutAttributeHeight

- (MASConstraint * (^)(CGSize offset))sizeOffset;

 

//Modifies the NSLayoutConstraint constant, only affects MASConstraints in which the first item‘s NSLayoutAttribute is one of the following NSLayoutAttributeCenterX, NSLayoutAttributeCenterY

- (MASConstraint * (^)(CGPoint offset))centerOffset;

 

//Modifies the NSLayoutConstraint constant

- (MASConstraint * (^)(CGFloat offset))offset;

 

  • insets: 用来设置left, right, top, bottom。接受MASEdgeInsets类型值

  • sizeOffset: 用来设置width, height。接受CGSize类型的值

  • centerOffset: 用来设置centerX, centerY。接受CGPoint类型的值

  • offset: 可以用来设置所有的东西。接受CGFloat类型的值

 

其实一般情况下,我只使用offset….

 

小技巧

 

  • 如果等式2边的Attribute是一样的,我们可以省略等式右边的Attribute

  • 如果是等于关系,并且右边的view是父View。连equalTo也可以省略

  • 如果equalTo里面传的是NSValue类型,效果跟设置offset是一样的

  • 如果offset为0,其实也是可以省略的…

 

下面所有代码实际效果是一样的:

 

// 完整的

make.left.equalTo(view1.superview.mas_left).offset(0);

 

//省略Attribute的

make.left.equalTo(view1.superview).offset(0);

 

//省略equalTo的

make.left.offset(0);

 

//使用equalTo替代offset的

make.left.equalTo(@0);

 

//终极大招,省略所有的... 可惜会有warning

make.left;

 

不过对于make.left,编译器会报一个警告:你用getter方法获取回来的值未使用,所以不应该使用”.”语法


技术分享

 

对于这个警告我们可以将返回值转为空消除:

 

(void)make.left;

 

 

不过终究又变得麻烦了,又要多写6个字母,愁人…

 

设置或更新约束

 

对于约束的设置,Masonry提供了3种方法,分别为设置约束、更新约束、重写设置约束

 

 

// 设置约束    

- (NSArray *)mas_makeConstraints:(void(^)(MASConstraintMaker *make))block;

 

// 更新约束

- (NSArray *)mas_updateConstraints:(void(^)(MASConstraintMaker *make))block;

 

// 重新设置约束

- (NSArray *)mas_remakeConstraints:(void(^)(MASConstraintMaker *make))block;

 

  • mas_makeConstraints: 初次设置约束使用。

  • mas_updateConstraints: 更新约束时使用。如果找不着这条约束,会新增,相当于mas_makeConstraints。

  • mas_remakeConstraints: 重新设置约束。先将view上所有约束移除,再新增约束

 

注意:mas_updateConstraints只能更新已有约束。如果第一次使用的是left, right设置的相对宽度。更新的时候想换成使用width。不能使用mas_updateConstraints,因为已有约束里面没有width的约束,新增width之后会跟原有left, right约束冲突。此时应该使用mas_remakeConstraints

 

批量设置约束

 

假设有View1,view2,view3三个View,我们想要他们的宽高都等于CGSizeMake(100, 50)。我们可以对他们进行批量设置:

 

 

NSValue *sizeValue = [NSValue valueWithCGSize:CGSizeMake(100, 50)];

[@[view1,view2,view3] mas_makeConstraints:^(MASConstraintMaker *make) {

    make.size.equalTo(sizeValue);

}];

 

由于我们还要设置view的top,left等位置约束。那可不可以在设置位置的mas_makeConstraints里面批量设置宽高呢?实际是可以的!

 

//advance set

[view1 mas_makeConstraints:^(MASConstraintMaker *make) {

    (void)make.top.left;

    make.size.equalTo(@[view2,view3,sizeValue]);

}];

 

不过需要注意的是。设置约束的时候,view一定是已经被addSubview的(详情参考Autolayout的第一次亲密接触),否则会抛异常。所以我们一般在最后一个view上加批量约束

 

Priority

 

我们知道约束是有优先级的,Masonry给我们提供了4个设置优先级的接口:

 

//    Sets the NSLayoutConstraint priority to a float or MASLayoutPriority

(MASConstraint * (^)(MASLayoutPriority priority))priority;

 

//    Sets the NSLayoutConstraint priority to MASLayoutPriorityLow

(MASConstraint * (^)())priorityLow;

 

//    Sets the NSLayoutConstraint priority to MASLayoutPriorityMedium

(MASConstraint * (^)())priorityMedium;

 

//    Sets the NSLayoutConstraint priority to MASLayoutPriorityHigh

(MASConstraint * (^)())priorityHigh;

 

  • priority: 可以设置任意的优先级,接受的参数是0-1000的数字

  • priorityLow: 设置低优先级,优先级为250

  • priorityMedium: 设置中优先级,优先级为500

  • priorityHigh: 设置高优先级,优先级为750

 

需要注意的是,使用priorityLow、priorityMedium、priorityHigh的时候。不是.priorityHigh,而是.priorityHigh()

Masonry 到底有多美?(上)

原文:http://www.cnblogs.com/rosee-1224/p/5164943.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!