iOS OC自动布局 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           倍数

举例:make.width.equalTo(self.view.mas_width).multipliedBy(0.5);//设置宽度为self.view的一半,multipliedBy是倍数的意思,也就是,使宽度等于self.view宽度的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.redViewmas_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。

staticconstMASLayoutPriorityMASLayoutPriorityRequired=UILayoutPriorityRequired;

staticconstMASLayoutPriorityMASLayoutPriorityDefaultHigh=UILayoutPriorityDefaultHigh;

staticconstMASLayoutPriorityMASLayoutPriorityDefaultMedium=500;

staticconstMASLayoutPriorityMASLayoutPriorityDefaultLow=UILayoutPriorityDefaultLow;

staticconstMASLayoutPriorityMASLayoutPriorityFittingSizeLevel=UILayoutPriorityFittingSizeLevel;

设置约束比例

// 设置当前约束值乘以多少,例如这个例子是redView的宽度是self.view宽度的0.2倍。

[self.redViewmas_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.yellowViewmas_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 *)tableViewnumberOfRowsInSection:(NSInteger)section{

return self.dataList.count;

}

-(MasonryTableViewCell *)tableView:(UITableView *)tableViewcellForRowAtIndexPath:(NSIndexPath *)indexPath{

MasonryTableViewCell *cell=[tableView dequeueReusableCellWithIdentifier:LXZTableViewCellIdentifier];

[cell reloadViewWithText:self.dataList[indexPath.row]];

returncell;

}

// 需要注意的是,这个代理方法和直接返回当前Cell高度的代理方法并不一样。

// 这个代理方法会将当前所有Cell的高度都预估出来,而不是只计算显示的Cell,所以这种方式对性能消耗还是很大的。

// 所以通过设置estimatedRowHeight属性的方式,和这种代理方法的方式,最后性能消耗都是一样的。

-(CGFloat)tableView:(UITableView *)tableViewestimatedHeightForRowAtIndexPath:(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之间必须有父子视图或者有一个共同的父视图的关系

推荐阅读更多精彩内容