链式布局
之前我们分析了如何实现链式编程,并且大致了解了链式编程思想在开发中的好处。通过这篇文章,我们来看一下Masonry作为经典的链式编程思想是如何设计的,我们拭目以待。
Masonry布局设置
- (MASConstraint *)addConstraintWithLayoutAttribute:(NSLayoutAttribute)layoutAttribute {
return [self constraint:nil addConstraintWithLayoutAttribute:layoutAttribute];
}
- (MASConstraint *)left {
return [self addConstraintWithLayoutAttribute:NSLayoutAttributeLeft];
}
- (MASConstraint *)top {
return [self addConstraintWithLayoutAttribute:NSLayoutAttributeTop];
}
- (MASConstraint *)right {
return [self addConstraintWithLayoutAttribute:NSLayoutAttributeRight];
}
- (MASConstraint *)bottom {
return [self addConstraintWithLayoutAttribute:NSLayoutAttributeBottom];
}
- (MASConstraint *)leading {
return [self addConstraintWithLayoutAttribute:NSLayoutAttributeLeading];
}
- (MASConstraint *)trailing {
return [self addConstraintWithLayoutAttribute:NSLayoutAttributeTrailing];
}
- (MASConstraint *)width {
return [self addConstraintWithLayoutAttribute:NSLayoutAttributeWidth];
}
- (MASConstraint *)height {
return [self addConstraintWithLayoutAttribute:NSLayoutAttributeHeight];
}
- (MASConstraint *)centerX {
return [self addConstraintWithLayoutAttribute:NSLayoutAttributeCenterX];
}
- (MASConstraint *)centerY {
return [self addConstraintWithLayoutAttribute:NSLayoutAttributeCenterY];
}
- (MASConstraint *)baseline {
return [self addConstraintWithLayoutAttribute:NSLayoutAttributeBaseline];
}
这里面提供了上下左右,长宽和中心位置等的定位方法。我们不难发现这些方法提供了MASConstraint返回值,这样就可以调用MASConstraint的成员属性。
@interface MASConstraintMaker : NSObject
/**
* The following properties return a new MASViewConstraint
* with the first item set to the makers associated view and the appropriate MASViewAttribute
* 布局设置制造者 定义了left,top,right等属性成员
*/
@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;
@property (nonatomic, strong, readonly) MASConstraint *firstBaseline;
@property (nonatomic, strong, readonly) MASConstraint *lastBaseline;
#if TARGET_OS_IPHONE || TARGET_OS_TV
@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;
#endif
/**
* Returns a block which creates a new MASCompositeConstraint with the first item set
* to the makers associated view and children corresponding to the set bits in the
* MASAttribute parameter. Combine multiple attributes via binary-or.
*/
@property (nonatomic, strong, readonly) MASConstraint *(^attributes)(MASAttribute attrs);
/**
* Creates a MASCompositeConstraint with type MASCompositeConstraintTypeEdges
* which generates the appropriate MASViewConstraint children (top, left, bottom, right)
* with the first item set to the makers associated view
*/
@property (nonatomic, strong, readonly) MASConstraint *edges;
/**
* Creates a MASCompositeConstraint with type MASCompositeConstraintTypeSize
* which generates the appropriate MASViewConstraint children (width, height)
* with the first item set to the makers associated view
*/
@property (nonatomic, strong, readonly) MASConstraint *size;
/**
* Creates a MASCompositeConstraint with type MASCompositeConstraintTypeCenter
* which generates the appropriate MASViewConstraint children (centerX, centerY)
* with the first item set to the makers associated view
*/
@property (nonatomic, strong, readonly) MASConstraint *center;
从这可以证明我们作为链式操作的方法,通过对成员属性的方法进行重写,就可以按照自己的方式去链式调用。多种布局方式都是调用addConstraintWithLayoutAttribute实现的。
-(MASConstraint *)addConstraintWithLayoutAttribute:(NSLayoutAttribute)layoutAttribute {
return [self constraint:nil addConstraintWithLayoutAttribute:layoutAttribute];
}
传入的布局属性,传入的属性是系统定义的枚举法。
NSLayoutAttributeLeft = 1,
NSLayoutAttributeRight,
NSLayoutAttributeTop,
NSLayoutAttributeBottom,
NSLayoutAttributeLeading,
NSLayoutAttributeTrailing,
NSLayoutAttributeWidth,
NSLayoutAttributeHeight,
NSLayoutAttributeCenterX,
NSLayoutAttributeCenterY,
NSLayoutAttributeLastBaseline,
添加约束
- (MASConstraint *)constraint:(MASConstraint *)constraint addConstraintWithLayoutAttribute:(NSLayoutAttribute)layoutAttribute {
MASViewAttribute *viewAttribute = [[MASViewAttribute alloc] initWithView:self.view layoutAttribute:layoutAttribute];
MASViewConstraint *newConstraint = [[MASViewConstraint alloc] initWithFirstViewAttribute:viewAttribute];
if ([constraint isKindOfClass:MASViewConstraint.class]) {
//replace with composite constraint
NSArray *children = @[constraint, newConstraint];
MASCompositeConstraint *compositeConstraint = [[MASCompositeConstraint alloc] initWithChildren:children];
compositeConstraint.delegate = self;
[self constraint:constraint shouldBeReplacedWithConstraint:compositeConstraint];
return compositeConstraint;
}
if (!constraint) {
newConstraint.delegate = self;
[self.constraints addObject:newConstraint];
}
return newConstraint;
}
在上面看到,传入的constraint是nil,因此,我们直接看这一部分。
if (!constraint) {
newConstraint.delegate = self;
[self.constraints addObject:newConstraint];
}
- 协议
- 添加的布局数组
第二步中的newConstraint是如何定义的,我们来看一下初始化的方法。
MASViewAttribute *viewAttribute = [[MASViewAttribute alloc] initWithView:self.view layoutAttribute:layoutAttribute];
MASViewConstraint *newConstraint = [[MASViewConstraint alloc] initWithFirstViewAttribute:viewAttribute];
下面方法提供了MASViewAttribute初始化视图的操作。
- (id)initWithView:(MAS_VIEW *)view layoutAttribute:(NSLayoutAttribute)layoutAttribute {
self = [self initWithView:view item:view layoutAttribute:layoutAttribute];
return self;
}
- (id)initWithView:(MAS_VIEW *)view item:(id)item layoutAttribute:(NSLayoutAttribute)layoutAttribute {
self = [super init];
if (!self) return nil;
/* _view赋值view _item也是view 布局属性layoutAttribute */
_view = view;
_item = item;
_layoutAttribute = layoutAttribute;
return self;
}
保存了传入的视图(这里就是MASConstraintMaker定义的view)
@property (nonatomic, weak) MAS_VIEW *view;
布局属性是传入的系统的布局属性,这样就将视图和绑定的布局属性联系起来,最后,统一保存在constraints中。
- (id)initWithFirstViewAttribute:(MASViewAttribute *)firstViewAttribute {
self = [super init];
if (!self) return nil;
_firstViewAttribute = firstViewAttribute;
self.layoutPriority = MASLayoutPriorityRequired;
self.layoutMultiplier = 1;
return self;
}
在初始化视图属性中,设置了优先级MASLayoutPriorityRequired。
static const MASLayoutPriority MASLayoutPriorityRequired = UILayoutPriorityRequired;
初始化时,当约束的priority的值是UILayoutPriorityRequired (1000)时,是无法改变priority值而生效的。也就是说,想要使用优先级属性,就必须初始化一个不是1000的priority的约束
这样,每一次添加一个一个约束,都会保存在布局数组中。
equalTo OR mas_equalTo
- (MASConstraint * (^)(id))equalTo {
return ^id(id attribute) {
/**
* Relation -- 关系
* 传入的属性,用Equal来使用
* self.equalToWithRelation(attribute, NSLayoutRelationEqual)返回值为MASConstraint类型
*/
return self.equalToWithRelation(attribute, NSLayoutRelationEqual);
};
}
- (MASConstraint * (^)(id))mas_equalTo {
return ^id(id attribute) {
return self.equalToWithRelation(attribute, NSLayoutRelationEqual);
};
}
我们来看一下,经常会用到的两种方法,这里面用到了Block块的返回值,和我们前面篇幅使用方法一致。
-(MASConstraint * (^)(id))
这一点说明了返回值MASConstraint类型,这样就可以继续使用点语法方式,传入的参数是id类型,这样说明,不论传入数值还是传入对象,都要是id类型的
在系统传统布局时候,我们会用到NSLayoutRelationEqual来设置参考,因此这里也是同样的操作。
- (MASConstraint * (^)(id, NSLayoutRelation))equalToWithRelation {
return ^id(id attribute, NSLayoutRelation relation) {
if ([attribute isKindOfClass:NSArray.class]) {
NSAssert(!self.hasLayoutRelation, @"Redefinition of constraint relation");
NSMutableArray *children = NSMutableArray.new;
for (id attr in attribute) {
MASViewConstraint *viewConstraint = [self copy];
viewConstraint.layoutRelation = relation;
viewConstraint.secondViewAttribute = attr;
[children addObject:viewConstraint];
}
MASCompositeConstraint *compositeConstraint = [[MASCompositeConstraint alloc] initWithChildren:children];
compositeConstraint.delegate = self.delegate;
[self.delegate constraint:self shouldBeReplacedWithConstraint:compositeConstraint];
return compositeConstraint;
} else {
NSAssert(!self.hasLayoutRelation || self.layoutRelation == relation && [attribute isKindOfClass:NSValue.class], @"Redefinition of constraint relation");
self.layoutRelation = relation;
self.secondViewAttribute = attribute;
return self;
}
};
}
首先,这个也是一个返回值Block块,传入的参数含有两个,一个是设置的attribute和关系,关系默认传入的是NSLayoutRelationEqual。
虽然代码很长,但是我们发现分为两部分,一部分是数组的操作,一部分是非数组的操作,我们先看else部分(去掉错误处理,核心部分仅仅只有三句)。
self.layoutRelation = relation;
self.secondViewAttribute = attribute;
return self;
操作上,保存了关系和传入的属性,最后返回self,也就是说当前的self是携带着NSLayoutRelationEqual和传入的attribute继续使用链式编程,在最后才会调用实现。
思考: 如果attribute是数组该如何操作???
根据else中的代码,不难设计,可以使用forin来遍历attribute数组,逐一赋值,在利用一个数组存储,最后返回。
的确,if中的操作正是做了遍历操作。
for (id attr in attribute) {
MASViewConstraint *viewConstraint = [self copy];
viewConstraint.layoutRelation = relation;
viewConstraint.secondViewAttribute = attr;
[children addObject:viewConstraint];
}
类比equalTo,mas_equalTo也就显得十分亲切了。
至此,我们已经分析了大部分的操作,并且对于链式操作也有了更深刻的认识。现在回顾一下Maker将链式操作作为Block是如何安装到目标视图上的。
Install 安装布局
还记得刚才分析的保存的内容吗,安装第一个步就先取出来这些保存的数据。
MAS_VIEW *firstLayoutItem = self.firstViewAttribute.item;
NSLayoutAttribute firstLayoutAttribute = self.firstViewAttribute.layoutAttribute;
MAS_VIEW *secondLayoutItem = self.secondViewAttribute.item;
NSLayoutAttribute secondLayoutAttribute = self.secondViewAttribute.layoutAttribute;
这里我们之前看到了,就是用于安装布局,前面是forin循环,所以逐个进行布局设置。
MASLayoutConstraint *layoutConstraint
= [MASLayoutConstraint constraintWithItem:firstLayoutItem
attribute:firstLayoutAttribute
relatedBy:self.layoutRelation
toItem:secondLayoutItem
attribute:secondLayoutAttribute
multiplier:self.layoutMultiplier
constant:self.layoutConstant];
刚才设置的优先级默认为1000,这里面也进行保存。
layoutConstraint.priority = self.layoutPriority;
layoutConstraint.mas_key = self.mas_key;
所有这些安装完成后,我们最后刷新一下界面就大功告成了。
总结
到这里,恭喜你,Masonry已经分析完成了,我们做一个小小的总结。
作为链式编程经典范例,Masonry提供了至少两种的链式操作,一种是普通无Block返回的方法和含有Block操作的方法。在这里最值得关注的是Block里面嵌套Block,大的Block交给了Maker这个管理者,剩下的交给了left等的操作,最后实现大的Block块,进行逐一安装操作,这是一个非常有借鉴价值的设计思路。
中文源码下载
Masonry中文源码分析: GitHub.
根据MasonryBlock设置,小编写了一个关于Block的链式代码,如果您喜欢,记得给个小星星哦。(具体使用详情,在上一篇有所介绍,喜欢的小伙伴可以了解了解)
JQueryWeb一个神奇的框架.
JQueryWeb源码: JQueryWeb.