Masonry 之前做过笔记啦,如今在项目中遇到的一些问题,继续笔记中。
一、注意点:
1、使用 mas_makeConstraints
方法的元素一定要先添加到父视图中去。
2、使用Masonry的时候不用设置translatesAutoresizingMaskIntoConstraints
属性为NO
;
3、我们可以批量设置约束,当然只能设置其中某些相同的咯
NSValue *sizeValue = [NSValue valueWithCGSize:CGSizeMake(50, 50)];
[@[view1,view2,view3] mas_makeConstraints:^(MASConstraintMaker *make) {
make.size.equalTo(sizeValue);
}];
4、我们可以为view
增加 key
,MASAttachKeys,方便调试
subView.mas_key = @"subView";
self.view.mas_key = @"self.view"
类似下面这样的bug 就清晰多了
"<MASLayoutConstraint:0x7fa848d52f50 UIView:subView.height == 60>",
"<NSLayoutConstraint:0x7fa848f0bbd0 UIView:self.view.height == 736>"
同时这个也可以批量设置
MASAttachKeys(self.view,subView);
第一个是父视图,后面的是子视图,可以添加多个,在View不多的情况下,使用它还是很方便的。
5、 install
、unInstall
有时候,我们需要更新或移除某个约束的时候就能用到这个啦
// 官方用法:
@property (nonatomic, strong) MASConstraint *topConstraint;
[view1 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);
}];
[self.topConstraint uninstall];
-
install
== > 创建, 这个一般是内部用的,我们不需要直接使用 -
unInstall
==> 移除,这个当我们外露某个MASConstraint的时候,需要用到。
说这个的原因是,我们直接将MASConstraint提出来后的使用修改,是很方便直接的。
PS: 同时建议看看这个Demo有趣的Autolayout示例,在这里面包含很多细节点值的学习,同时也是Masonry 使用的范例。
二、NSArray (MASHelper)
当我们设置UIStackView 的时候,我们这边可以用到它是相当方便的。
看图,不是完全居中,或不对称什么的,但直接看实现代码就知道了
UIView *backView = [UIView new];
backView.backgroundColor = [UIColor lightGrayColor];
[self.view addSubview:backView];
[backView mas_makeConstraints:^(MASConstraintMaker *make){
make.centerX.equalTo(self.view.mas_centerX);
make.centerY.equalTo(self.view.mas_centerY);
make.size.mas_equalTo(CGSizeMake(300, 300));
}];
NSMutableArray *testArray = [NSMutableArray arrayWithCapacity:4];
for (int i = 0; i < 4; i++) {
UIView * subView = [UIView new];
subView.backgroundColor = [UIColor colorWithRed:(arc4random()%255)/255.0 green:(arc4random()%255)/255.0 blue:(arc4random()%255)/255.0 alpha:1.0];
[backView addSubview:subView];
[testArray addObject:subView];
}
// 图2
[testArray mas_distributeViewsAlongAxis:HelperMASAxisTypeHorizon withFixedSpacing:10 leadSpacing:40 tailSpacing:15];
[testArray mas_makeConstraints:^(MASConstraintMaker *make){
make.centerY.equalTo(backView.mas_centerY);
make.height.mas_equalTo(@160);
}];
// 图1
[testArray mas_distributeViewsAlongAxis:HelperMASAxisTypeVertical withFixedSpacing:30 leadSpacing:20 tailSpacing:10];
[testArray mas_makeConstraints:^(MASConstraintMaker *make){
make.centerX.equalTo(backView.mas_centerX);
make.width.mas_equalTo(@150);
}];
上述我们是根据 item 之间的间距进行约束的,下面其实还有根据其 item 之间的固定宽度进行约束的,所以说用起来还是相当方便的。
三、备注:附录NSArray (MASHelper)的代码
不好意思,这个源代码的出处很多,不知道具体是哪位朋友写的,反正具体的详细过程可以看看。不过现在Masonry 现在已经自带这个分类啦,不需要额外添加啦。
typedef NS_ENUM(NSUInteger, HelperMASAxisType) {
HelperMASAxisTypeHorizon,
HelperMASAxisTypeVertical
};
@interface NSArray (MASHelper)
/**
* 根据固定间隙均匀分布
* @param axisType 水平/垂直
* @param paddingSpace 固定间隙
* @param leadSpacing 头/尾间隔
*/
- (void)mas_distributeViewsAlongAxis:(HelperMASAxisType)axisType withFixedSpacing:(CGFloat)paddingSpace leadSpacing:(CGFloat)leadSpacing tailSpacing:(CGFloat)tailSpacing;
/**
* 根据固定物件宽度均匀分布
* @param axisType 水平/垂直
* @param itemLength 物件宽度
* @param leadSpacing 头/尾间隔
*/
- (void)mas_distributeViewsAlongAxis:(HelperMASAxisType)axisType withFixedItemLength:(CGFloat)itemLength leadSpacing:(CGFloat)leadSpacing tailSpacing:(CGFloat)tailSpacing;
@end
#import "NSArray+MASHelper.h"
@implementation NSArray (MASHelper)
- (void)mas_distributeViewsAlongAxis:(HelperMASAxisType)axisType withFixedSpacing:(CGFloat)paddingSpace leadSpacing:(CGFloat)leadSpacing tailSpacing:(CGFloat)tailSpacing {
if (self.count < 2) {
NSAssert(self.count>1,@"views to distribute need to bigger than one");
return;
}
MAS_VIEW *tempSuperView = [self mas_commonSuperviewOfViews];
if (axisType == HelperMASAxisTypeHorizon) {
MAS_VIEW *prev;
for (int i = 0; i < self.count; i++) {
MAS_VIEW *v = [self objectAtIndex:i];
[v mas_makeConstraints:^(MASConstraintMaker *make) {
if (prev) {
make.width.equalTo(prev);
make.left.equalTo(prev.mas_right).offset(paddingSpace);
if (i == (CGFloat)self.count - 1) {//last one
make.right.equalTo(tempSuperView).offset(-tailSpacing);
}
}
else {//first one
make.left.equalTo(tempSuperView).offset(leadSpacing);
}
}];
prev = v;
}
}
else {
MAS_VIEW *prev;
for (int i = 0; i < self.count; i++) {
MAS_VIEW *v = [self objectAtIndex:i];
[v mas_makeConstraints:^(MASConstraintMaker *make) {
if (prev) {
make.height.equalTo(prev);
make.top.equalTo(prev.mas_bottom).offset(paddingSpace);
if (i == (CGFloat)self.count - 1) {//last one
make.bottom.equalTo(tempSuperView).offset(-tailSpacing);
}
}
else {//first one
make.top.equalTo(tempSuperView).offset(leadSpacing);
}
}];
prev = v;
}
}
}
- (void)mas_distributeViewsAlongAxis:(HelperMASAxisType)axisType withFixedItemLength:(CGFloat)itemLength leadSpacing:(CGFloat)leadSpacing tailSpacing:(CGFloat)tailSpacing {
if (self.count < 2) {
NSAssert(self.count>1,@"views to distribute need to bigger than one");
return;
}
MAS_VIEW *tempSuperView = [self mas_commonSuperviewOfViews];
if (axisType == HelperMASAxisTypeHorizon) {
MAS_VIEW *prev;
for (int i = 0; i < self.count; i++) {
MAS_VIEW *v = [self objectAtIndex:i];
[v mas_makeConstraints:^(MASConstraintMaker *make) {
if (prev) {
CGFloat offset = (1-(i/((CGFloat)self.count-1)))*itemLength;
make.width.equalTo(@(itemLength));
if (i == (CGFloat)self.count - 1) {//last one
make.right.equalTo(tempSuperView).offset(-tailSpacing);
}
else {
make.right.equalTo(tempSuperView).multipliedBy(i/((CGFloat)self.count-1)).with.offset(offset);
}
}
else {//first one
make.left.equalTo(tempSuperView).offset(leadSpacing);
make.width.equalTo(@(itemLength));
}
}];
prev = v;
}
}
else {
MAS_VIEW *prev;
for (int i = 0; i < self.count; i++) {
MAS_VIEW *v = [self objectAtIndex:i];
[v mas_makeConstraints:^(MASConstraintMaker *make) {
if (prev) {
CGFloat offset = (1-(i/((CGFloat)self.count-1)))*itemLength;
make.height.equalTo(@(itemLength));
if (i == (CGFloat)self.count - 1) {//last one
make.bottom.equalTo(tempSuperView).offset(-tailSpacing);
}
else {
make.bottom.equalTo(tempSuperView).multipliedBy(i/((CGFloat)self.count-1)).with.offset(offset);
}
}
else {//first one
make.top.equalTo(tempSuperView).offset(leadSpacing);
make.height.equalTo(@(itemLength));
}
}];
prev = v;
}
}
}
- (MAS_VIEW *)mas_commonSuperviewOfViews
{
MAS_VIEW *commonSuperview = nil;
MAS_VIEW *previousView = nil;
for (id object in self) {
if ([object isKindOfClass:[MAS_VIEW class]]) {
MAS_VIEW *view = (MAS_VIEW *)object;
if (previousView) {
commonSuperview = [view mas_closestCommonSuperview:commonSuperview];
} else {
commonSuperview = view;
}
previousView = view;
}
}
NSAssert(commonSuperview, @"Can't constrain views that do not share a common superview. Make sure that all the views in this array have been added into the same view hierarchy.");
return commonSuperview;
}
@end