Masonry 之前做過筆記啦,如今在項(xiàng)目中遇到的一些問題,繼續(xù)筆記中。
一、注意點(diǎn):
1、使用 mas_makeConstraints方法的元素一定要先添加到父視圖中去。
2、使用Masonry的時(shí)候不用設(shè)置translatesAutoresizingMaskIntoConstraints屬性為NO;
3、我們可以批量設(shè)置約束,當(dāng)然只能設(shè)置其中某些相同的咯
NSValue *sizeValue = [NSValue valueWithCGSize:CGSizeMake(50, 50)];
[@[view1,view2,view3] mas_makeConstraints:^(MASConstraintMaker *make) {
make.size.equalTo(sizeValue);
}];
4、我們可以為view 增加 key,MASAttachKeys,方便調(diào)試
subView.mas_key = @"subView";
self.view.mas_key = @"self.view"
類似下面這樣的bug 就清晰多了
"<MASLayoutConstraint:0x7fa848d52f50 UIView:subView.height == 60>",
"<NSLayoutConstraint:0x7fa848f0bbd0 UIView:self.view.height == 736>"
同時(shí)這個(gè)也可以批量設(shè)置
MASAttachKeys(self.view,subView);
第一個(gè)是父視圖,后面的是子視圖,可以添加多個(gè),在View不多的情況下,使用它還是很方便的。
5、 install、unInstall
有時(shí)候,我們需要更新或移除某個(gè)約束的時(shí)候就能用到這個(gè)啦
// 官方用法:
@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== > 創(chuàng)建, 這個(gè)一般是內(nèi)部用的,我們不需要直接使用 -
unInstall==> 移除,這個(gè)當(dāng)我們外露某個(gè)MASConstraint的時(shí)候,需要用到。
說這個(gè)的原因是,我們直接將MASConstraint提出來后的使用修改,是很方便直接的。
PS: 同時(shí)建議看看這個(gè)Demo有趣的Autolayout示例,在這里面包含很多細(xì)節(jié)點(diǎn)值的學(xué)習(xí),同時(shí)也是Masonry 使用的范例。
二、NSArray (MASHelper)
當(dāng)我們?cè)O(shè)置UIStackView 的時(shí)候,我們這邊可以用到它是相當(dāng)方便的。


看圖,不是完全居中,或不對(duì)稱什么的,但直接看實(shí)現(xiàn)代碼就知道了
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);
}];
上述我們是根據(jù) item 之間的間距進(jìn)行約束的,下面其實(shí)還有根據(jù)其 item 之間的固定寬度進(jìn)行約束的,所以說用起來還是相當(dāng)方便的。
三、備注:附錄NSArray (MASHelper)的代碼
不好意思,這個(gè)源代碼的出處很多,不知道具體是哪位朋友寫的,反正具體的詳細(xì)過程可以看看。不過現(xiàn)在Masonry 現(xiàn)在已經(jīng)自帶這個(gè)分類啦,不需要額外添加啦。
typedef NS_ENUM(NSUInteger, HelperMASAxisType) {
HelperMASAxisTypeHorizon,
HelperMASAxisTypeVertical
};
@interface NSArray (MASHelper)
/**
* 根據(jù)固定間隙均勻分布
* @param axisType 水平/垂直
* @param paddingSpace 固定間隙
* @param leadSpacing 頭/尾間隔
*/
- (void)mas_distributeViewsAlongAxis:(HelperMASAxisType)axisType withFixedSpacing:(CGFloat)paddingSpace leadSpacing:(CGFloat)leadSpacing tailSpacing:(CGFloat)tailSpacing;
/**
* 根據(jù)固定物件寬度均勻分布
* @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