界面操作方式:
该库的特点:采用链式语法, 易读
View+MASAdditions.h @interface MAS_VIEW (MASAdditions) @property (nonatomic, strong, readonly) MASViewAttribute *mas_left; // x坐标 @property (nonatomic, strong, readonly) MASViewAttribute *mas_top; // y坐标 @property (nonatomic, strong, readonly) MASViewAttribute *mas_right; // x + width @property (nonatomic, strong, readonly) MASViewAttribute *mas_bottom; // y + height @property (nonatomic, strong, readonly) MASViewAttribute *mas_leading; @property (nonatomic, strong, readonly) MASViewAttribute *mas_trailing; @property (nonatomic, strong, readonly) MASViewAttribute *mas_width; // width @property (nonatomic, strong, readonly) MASViewAttribute *mas_height; // height @property (nonatomic, strong, readonly) MASViewAttribute *mas_centerX; // (x + width)/2 @property (nonatomic, strong, readonly) MASViewAttribute *mas_centerY; // (y + height)/2 @property (nonatomic, strong, readonly) MASViewAttribute *mas_baseline; @property (nonatomic, strong, readonly) MASViewAttribute *(^mas_attribute)(NSLayoutAttribute attr); // 生成约束 - (NSArray *)mas_makeConstraints:(void(^)(MASConstraintMaker *make))block; // 更新常量约束 - (NSArray *)mas_updateConstraints:(void(^)(MASConstraintMaker *make))block; // 重新生成约束(先删除所有约束,再重新生成新的约束) - (NSArray *)mas_remakeConstraints:(void(^)(MASConstraintMaker *make))block; @end
@interface MASConstraintMaker : NSObject @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 *edges; @property (nonatomic, strong, readonly) MASConstraint *size; @property (nonatomic, strong, readonly) MASConstraint *center; @end
@interface MASConstraint : NSObject - (MASConstraint * (^)(id attr))equalTo; // equalTo(superView) - (MASConstraint * (^)(id attr))greaterThanOrEqualTo; - (MASConstraint * (^)(id attr))lessThanOrEqualTo; - (MASConstraint * (^)(id attr))mas_equalTo; //mas_equalTo(NSNumber|CGPoint|CGSize|UIEdgeInsets) - (MASConstraint * (^)(id attr))mas_greaterThanOrEqualTo; - (MASConstraint * (^)(id attr))mas_lessThanOrEqualTo; - (MASConstraint * (^)(id offset))mas_offset; - (MASConstraint * (^)(CGFloat offset))offset; - (MASConstraint * (^)(CGSize offset))sizeOffset; - (MASConstraint * (^)(CGPoint offset))centerOffset; - (MASConstraint *)with; - (MASConstraint *)and; - (MASConstraint *)left; - (MASConstraint *)top; - (MASConstraint *)right; - (MASConstraint *)bottom; - (MASConstraint * (^)(MASEdgeInsets insets))insets; - (MASConstraint *)leading;- (MASConstraint *)trailing; - (MASConstraint *)width;- (MASConstraint *)height; - (MASConstraint *)centerX; - (MASConstraint *)centerY; - (MASConstraint *)baseline; @end
无论约束怎么组合都必须能让系统计算出 坐标 和 尺寸, 约束过多或不足都会影响系统来计算坐标和尺寸的
在使用Masonry来约束时,首先先想一下使用坐标是怎么计算的,让后 让绝对布局方式转为自动布局方式
约束指定一般使用一下方式:
make.约束.equalTo(superView)[.with.offset(CGFloat)]
make.约束.mas_equalTo(NSNumber|CGPoint|CGSize|UIEdgeInsets)
通过左右边距left right确定宽度和x坐标,通过上边距top确定y坐标,通过高度height确定高度
对于UILabel 而言 不需要高度,高度是由字体,字号计算出来的
#import "MainViewController.h" #import "Masonry.h" #define WS(weakSelf) __weak __typeof(&*self)weakSelf = self; @interface MainViewController () @end @implementation MainViewController - (void)viewDidLoad { [super viewDidLoad]; self.title = @"Masonry"; self.view.backgroundColor = [UIColor whiteColor]; [self initCenterView]; } - (void)initCenterView { // -------------------superView--------------------- UIView * superView = [[UIView alloc] init]; superView.backgroundColor = [UIColor blackColor]; [self.view addSubview:superView]; WS(this); [superView mas_makeConstraints:^(MASConstraintMaker *make) { make.center.equalTo(this.view); make.size.mas_equalTo(CGSizeMake(300, 300)); }]; // 让一个view略小于其superView(边距为10)-------------------centerView--------------------- UIView * centerView = [UIView new]; centerView.backgroundColor = [UIColor redColor]; [superView addSubview:centerView]; [centerView mas_makeConstraints:^(MASConstraintMaker *make) { // 以下三种方式完全一样 // make.edges.equalTo(superView).insets(UIEdgeInsetsMake(10, 10, 10, 10)); // edges是指的边缘填充,都是正数值 // make.top.equalTo(superView).with.offset(10); // y坐标在父视图y坐标的基础上 加 10px // make.left.equalTo(superView).with.offset(10); // x坐标在父视图x坐标的基础上 加 10px // make.bottom.equalTo(superView).with.offset(-10); // 子视图的高度相对于父视图的高度 减去10px // make.right.equalTo(superView).with.offset(-10); // 子视图的宽度相对于父视图的宽度 减去10px make.top.left.bottom.and.right.equalTo(superView).insets(UIEdgeInsetsMake(10, 10, 10, 10)); }]; // 让两个高度为150的view垂直居中且等宽且等间隔排列 间隔为10(自动计算其宽度) // -------------------orangeView1--------------------- UIView * orangeView1 = [UIView new]; orangeView1.backgroundColor = [UIColor orangeColor]; [centerView addSubview:orangeView1]; UIView * orangeView2 = [UIView new]; orangeView2.backgroundColor = [UIColor orangeColor]; [centerView addSubview:orangeView2]; int padding = 10; int height = 250; [orangeView1 mas_makeConstraints:^(MASConstraintMaker *make) { make.centerY.mas_equalTo(centerView.mas_centerY); // 纵向垂直居中, 确定y坐标 make.height.mas_equalTo(height); // 确定高度 height make.left.equalTo(centerView.mas_left).with.offset(padding); // 确定 x坐标 make.right.equalTo(orangeView2.mas_left).with.offset(-padding); // 右边距为 10 make.width.equalTo(orangeView2); // 确定宽度 }]; // -------------------orangeView2--------------------- [orangeView2 mas_makeConstraints:^(MASConstraintMaker *make) { make.centerY.mas_equalTo(centerView.mas_centerY); // 垂直居中 make.height.mas_equalTo(height); // 确定高度 make.left.equalTo(orangeView1.mas_right).with.offset(padding); // 左边距:第一个视图的右边x坐标 +10 make.right.equalTo(centerView.mas_right).with.offset(-padding); // 又边距:父视图的x坐标 -10 make.width.equalTo(orangeView1); // 确定宽度 }]; UILabel * titleLabel = [UILabel new]; titleLabel.backgroundColor = [UIColor whiteColor]; titleLabel.numberOfLines = 0; titleLabel.text = @"autolayout hello ----------------"; titleLabel.tintColor = [UIColor blackColor]; [orangeView1 addSubview:titleLabel]; [titleLabel mas_makeConstraints:^(MASConstraintMaker *make) { // 对于UILabel无需设置高度,因为高度是由字体,字号计算出来的 make.left.equalTo(orangeView1).offset(10); make.top.equalTo(orangeView1).offset(10); make.right.equalTo(orangeView1).offset(-10); }]; // 在UIScrollView顺序排列一些view并自动计算contentSize---------------------------------------------------- UIScrollView * scrollView = [UIScrollView new]; scrollView.backgroundColor = [UIColor whiteColor]; [orangeView2 addSubview:scrollView]; [scrollView mas_makeConstraints:^(MASConstraintMaker *make) { make.edges.equalTo(orangeView2).with.insets(UIEdgeInsetsMake(5, 5, 5, 5)); }]; UIView * containerView = [UIView new]; containerView.backgroundColor = [UIColor blackColor]; [scrollView addSubview:containerView]; [containerView mas_makeConstraints:^(MASConstraintMaker *make) { make.edges.equalTo(scrollView); make.width.equalTo(scrollView); // ?????????? }]; int count = 10; UIView * lastView = nil; for (int i = 1; i < count; i++) { UIView * subView = [UIView new]; subView.backgroundColor = [UIColor colorWithHue:(arc4random() % 256 / 256.0) saturation:(arc4random() % 128 / 256.0) + 0.5 brightness:(arc4random() % 128 / 256.0) + 0.5 alpha:1]; [containerView addSubview:subView]; [subView mas_makeConstraints:^(MASConstraintMaker *make) { make.left.and.right.equalTo(containerView); make.height.mas_equalTo(@(20 * i)); if (lastView != nil) { make.top.mas_equalTo(lastView.mas_bottom); } else { make.top.mas_equalTo(containerView.mas_top); } }]; lastView = subView; } [containerView mas_makeConstraints:^(MASConstraintMaker *make) { make.bottom.equalTo(lastView.mas_bottom); }]; } @end
运行效果如果:
Interface Builder AutoLayout(以下两篇文章写的很好,应认真看一下)
开始iOS 7中自动布局教程(一) http://www.cocoachina.com/industry/20131203/7462.html
开始iOS 7中自动布局教程(二) http://www.it165.net/pro/html/201409/22410.html#