iOS Masonry自动布局
Masonry支持的属性：
/// 左侧
@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;
// 其中leading与left，trailing与right 在正常情况下是等价的
// 但是当一些布局是从右至左时(比如阿拉伯文?没有类似的经验) 则会对调
// 换句话说就是基本可以不理不用 用left和right就好了。
/// 距离边框的距离，等同于选中Storyboard的Constrain to margins后加约束
@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;
// 在Masonry的源码中我们可以看到他们对应的NSLayoutAttribute的属性对应如下
- (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 *)leftMargin {
return [self addConstraintWithLayoutAttribute:NSLayoutAttributeLeftMargin];
}
- (MASConstraint *)rightMargin {
return [self addConstraintWithLayoutAttribute:NSLayoutAttributeRightMargin];
}
- (MASConstraint *)topMargin {
return [self addConstraintWithLayoutAttribute:NSLayoutAttributeTopMargin];
}
- (MASConstraint *)bottomMargin {
return [self addConstraintWithLayoutAttribute:NSLayoutAttributeBottomMargin];
}
- (MASConstraint *)leadingMargin {
return [self addConstraintWithLayoutAttribute:NSLayoutAttributeLeadingMargin];
}
- (MASConstraint *)trailingMargin {
return [self addConstraintWithLayoutAttribute:NSLayoutAttributeTrailingMargin];
}
- (MASConstraint *)centerXWithinMargins {
return [self addConstraintWithLayoutAttribute:NSLayoutAttributeCenterXWithinMargins];
}
关键词
| 关键词 | 说明 |
|---|---|
| make | 需要添加约束的对象 |
| and | 无具体意义的语句连贯词 |
| with | 无具体意义的语句连贯词 |
| offset | 边距 |
| equalTo() | 参数是对象类型，一般是视图对象或者mas_width这样的坐标系对象 |
| mas_equalTo() | 和上面功能相同，参数可以传递基础数据类型对象，可以理解为比上面的API更强大 |
| width() | 用来表示宽度，例如代表view的宽度 |
| mas_width() | 用来获取宽度的值。和上面的区别在于，一个代表某个坐标系对象，一个用来获取坐标系对象的值 |
| multipliedBy | 倍数 |
举例：
//设置宽度为self.view的一半，multipliedBy是倍数的意思，也就是，使宽度等于self.view宽度的0.5倍
make.width.equalTo(self.view.mas_width).multipliedBy(0.5);
分类
size尺寸，包含(wdith,height)
make.size.mas_equalTo(CGSizeMake(300, 300));
edges边距，包含(top,left,right,bottom)
make.edges.equalTo(_blackView).with.insets(UIEdgeInsetsMake(10, 10, 10, 10));
可以写成
make.top.equalTo(_blackView).with.offset(10);
make.left.equalTo(_blackView).with.offset(10);
make.bottom.equalTo(_blackView).with.offset(-10);
make.right.equalTo(_blackView).with.offset(-10);
或者
make.top.left.bottom.and.right.equalTo(_blackView).with.insets(UIEdgeInsetsMake(10, 10, 10, 10));
center中心，包含(centerX,centerY)
make.center.equalTo(self.view);
最常用的三种加约束的方式：
// mas_makeConstraints 只负责新增约束 Autolayout不能同时存在两条针对于同一对象的约束 否则会报错
- (NSArray *)mas_makeConstraints:(void(^)(MASConstraintMaker *make))block;
// mas_updateConstraints 针对上面的情况 会更新在block中出现的约束 不会导致出现两个相同约束的情况
- (NSArray *)mas_updateConstraints:(void(^)(MASConstraintMaker *make))block;
// mas_remakeConstraints 则会清除之前的所有约束 仅保留最新的约束
- (NSArray *)mas_remakeConstraints:(void(^)(MASConstraintMaker *make))block;
更新约束和布局
关于更新约束布局相关的API，主要用以下四个API：
| 方法 | 说明 |
|---|---|
| - (void)updateConstraintsIfNeeded | 调用此方法，如果有标记为需要重新布局的约束，则立即进行重新布局，内部会调用updateConstraints方法 |
| - (void)updateConstraints | 重写此方法，内部实现自定义布局过程 |
| - (BOOL)needsUpdateConstraints | 当前是否需要重新布局，内部会判断当前有没有被标记的约束 |
| - (void)setNeedsUpdateConstraints | 标记需要进行重新布局 |
关于UIView重新布局相关的API，主要用以下三个API：
| 方法 | 说明 |
|---|---|
| - (void)setNeedsLayout | 标记为需要重新布局 |
| - (void)layoutIfNeeded | 查看当前视图是否被标记需要重新布局，有则在内部调用layoutSubviews方法进行重新布局 |
| - (void)layoutSubviews | 重写当前方法，在内部完成重新布局操作 |
实例：要给一个视图加约束为距父视图上下左右边距都为10 内边距
// 添加约束，不需要设置frame
UIView *subView = [[UIView alloc]init];
subView.backgroundColor = [UIColor blackColor];
// 添加父视图，视图添加完成后才能进行布局
[self.view addSubview:subView];
CGFloat margin = 10;
// 第一种：top、left、right、bottom一个一个赋值
[subView mas_makeConstraints:^(MASConstraintMaker *make) {
// 距离左边10
// make：相当于你要布局的视图
// equalTo（参照视图对象），如果参照视图是self.view,可以不设置参照视图的属性
// offset（距离数值）
make.left.equalTo(self.view).offset(margin);
make.right.equalTo(self.view).offset(-margin);// 距离右边10
make.top.equalTo(self.view).offset(margin);// 距离上边10
make.bottom.equalTo(self.view).offset(-margin);// 距离下边10
}];
第二种：top、left、right、bottom一起赋值 设置UIEdgeInsetsMake赋值
[subView mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.left.bottom.and.right.equalTo(self.view).with.insets(UIEdgeInsetsMake(margin, margin, -margin, -margin));
}];
第三种：设置edges的值
// 设置距离参照视图的内边距 （上左下右）
UIEdgeInsets padding = UIEdgeInsetsMake(10,10,10,10);
[label2 mas_makeConstraints:^(MASConstraintMaker *make) {
// 设置约束视图的边界距离self.view的边界值
make.edges.equalTo(self.view).insets(padding);
}];
#pragma mark 两个视图左右排开间距是10
- (void)addTwoOrangeColorView
{
//定义边距为10
int padding1 = 10;
_orangeView1 = [UIView new];
_orangeView1.backgroundColor = [UIColor orangeColor];
[self.view addSubview:_orangeView1];
_orangeView2 = [UIView new];
_orangeView2.backgroundColor = [UIColor orangeColor];
[self.view addSubview:_orangeView2];
[_orangeView1 mas_makeConstraints:^(MASConstraintMaker *make) {
make.centerY.mas_equalTo(self.view.mas_centerY);
make.left.equalTo(self.view.mas_left).with.offset(padding1);
make.right.equalTo(_orangeView2.mas_left).with.offset(-padding1);
make.height.mas_equalTo(@150);
make.width.equalTo(_orangeView2);
}];
[_orangeView2 mas_makeConstraints:^(MASConstraintMaker *make) {
make.centerY.mas_equalTo(self.view.mas_centerY);
make.left.equalTo(_orangeView1.mas_right).with.offset(padding1);
make.right.equalTo(self.view.mas_right).with.offset(-padding1);
make.height.mas_equalTo(@150);
make.width.equalTo(_orangeView1);
}];
}
UIScrollView自动布局
创建一个containerView内容视图，并添加到UIScrollView上作为子视图。UIScrollView原来的子视图都添加到containerView上，并且和这个视图设置约束。
因为对UIScrollView进行addSubview操作的时候，本质上是往其contentView上添加。也就是containerView的父视图是contentView，通过containerView撑起contentView视图的大小，以此来实现动态改变contentSize。
#pragma mark 添加滑动视图
- (void)addScrolView
{
_scrolView = [UIScrollView new];
_scrolView.backgroundColor = [UIColor whiteColor];
[_blackView addSubview:_scrolView];
[_scrolView mas_makeConstraints:^(MASConstraintMaker *make) {
make.edges.equalTo(_blackView).with.insets(UIEdgeInsetsMake(5, 5, 5, 5));
}];
UIView *container = [UIView new];
[_scrolView addSubview:container];
[container mas_makeConstraints:^(MASConstraintMaker *make) {
make.edges.equalTo(_scrolView);
make.width.equalTo(_scrolView);
}];
int count = 10;
UIView *lastView = nil;
for (int i = 0; i <= count; i ++)
{
UIView *subView = [UIView new];
[container addSubview:subView];
subView.backgroundColor = [UIColor colorWithHue:(arc4random() % 156 / 256.0) saturation:(arc4random() % 128 / 256.0)
brightness:(arc4random() % 128 / 256.0) alpha:1];
[subView mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.and.right.equalTo(container);
make.height.equalTo(@(20*i));
if (lastView) {
make.top.mas_equalTo(lastView.mas_bottom);
}
else
{
make.top.mas_equalTo(container.mas_top);
}
}];
lastView = subView;
}
[container mas_makeConstraints:^(MASConstraintMaker *make) {
make.bottom.equalTo(lastView.mas_bottom);
}];
}
大于等于和小于等于某个值的约束
[self.textLabel mas_makeConstraints:^(MASConstraintMaker *make) {
make.center.equalTo(self.view);
// 设置宽度小于等于200
make.width.lessThanOrEqualTo(@200);
// 设置高度大于等于10
make.height.greaterThanOrEqualTo(@(10));
}];
设置约束优先级
/**
Masonry为我们提供了三个默认的方法，priorityLow()、priorityMedium()、priorityHigh()，
这三个方法内部对应着不同的默认优先级。
除了这三个方法，我们也可以自己设置优先级的值，可以通过priority()方法来设置。
*/
[self.redView mas_makeConstraints:^(MASConstraintMaker *make){
make.center.equalTo(self.view);
make.width.equalTo(self.view).priorityLow();
make.width.mas_equalTo(20).priorityHigh();
make.height.equalTo(self.view).priority(200);
make.height.mas_equalTo(100).priority(1000);
}];
Masonry也帮我们定义好了一些默认的优先级常量，分别对应着不同的数值，优先级最大数值是1000。
static const MASLayoutPriority MASLayoutPriorityRequired = UILayoutPriorityRequired;
static const MASLayoutPriority MASLayoutPriorityDefaultHigh = UILayoutPriorityDefaultHigh;
static const MASLayoutPriority MASLayoutPriorityDefaultMedium = 500;
static const MASLayoutPriority MASLayoutPriorityDefaultLow = UILayoutPriorityDefaultLow;
static const MASLayoutPriority MASLayoutPriorityFittingSizeLevel = UILayoutPriorityFittingSizeLevel;
设置约束比例
// 设置当前约束值乘以多少，例如这个例子是redView的宽度是self.view宽度的0.2倍。
[self.redView mas_makeConstraints:^(MASConstraintMaker *make){
make.center.equalTo(self.view);
make.height.mas_equalTo(30);
make.width.equalTo(self.view).multipliedBy(0.2);//宽度是self.view的1/5
}];
/**
下面设置make.height的数组是关键，通过这个数组可以设置这三个视图高度相等。其他例如宽度之类的，也是类似的方式。
*/
[self.yellowView mas_makeConstraints:^(MASConstraintMaker *make){
make.left.right.bottom.equalTo(self.view).insets(UIEdgeInsetsMake(0,padding,padding,padding));
make.height.equalTo(@[self.blueView,self.redView]);
}];
UITableView动态Cell高度
在iOS UI开发过程中，UITableView的动态Cell高度一直都是个问题。实现这样的需求，实现方式有很多种，只是实现起来复杂程度和性能的区别。
在不考虑性能的情况下，tableView动态Cell高度，可以采取估算高度的方式。如果通过估算高度的方式实现的话，无论是纯代码还是Interface Builder，都只需要两行代码就可以完成Cell自动高度适配。
实现方式：
需要设置tableView的rowHeight属性，这里设置为自动高度，告诉系统Cell的高度是不固定的，需要系统帮我们进行计算。然后设置tableView的estimatedRowHeight属性，设置一个估计的高度。(我这里用的代理方法，实际上都一样)
原理：
这样的话，在tableView被创建之后，系统会根据estimatedRowHeight属性设置的值，为tableView设置一个估计的值。然后在Cell显示的时候再获取Cell的高度，并刷新tableView的contentSize。
- (void)tableViewConstraints{
[self.tableView mas_makeConstraints:^(MASConstraintMaker *make){
make.edges.equalTo(self.view);
}];
}
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
return self.dataList.count;
}
- (MasonryTableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
MasonryTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:LXZTableViewCellIdentifier];
[cell reloadViewWithText:self.dataList[indexPath.row]];
return cell;
}
// 需要注意的是，这个代理方法和直接返回当前Cell高度的代理方法并不一样。
// 这个代理方法会将当前所有Cell的高度都预估出来，而不是只计算显示的Cell，所以这种方式对性能消耗还是很大的。
// 所以通过设置estimatedRowHeight属性的方式，和这种代理方法的方式，最后性能消耗都是一样的。
- (CGFloat)tableView:(UITableView *)tableView estimatedHeightForRowAtIndexPath:(NSIndexPath *)indexPath{
return 50.f;
}
- (UITableView *)tableView{
if(!_tableView){
_tableView = [[UITableView alloc] initWithFrame:CGRectZerostyle:UITableViewStylePlain];
_tableView.delegate=self;
_tableView.dataSource=self;
// 设置tableView自动高度
_tableView.rowHeight = UITableViewAutomaticDimension;
[_tableView registerClass:[MasonryTableViewCell class] forCellReuseIdentifier:LXZTableViewCellIdentifier];
[self.view addSubview:_tableView];
}
return_tableView;
}
注意：
在xib或者storyboard中使用masonry框架相关方法的时候要将use Auto layout选项去掉，否则会不起作用。
给一个View加约束前提是该视图有父视图(superView)，否则会报错
给一个view1添加约束时与相对的view2之间必须有父子视图或者有一个共同的父视图的关系