iOS开发Masonry的使用

Posted 2021-09-16 Billy Miracle

Masonry是为屏幕适配而生的三方框架。可以使视图大小和位置自动适应各种机型和横竖屏。使用Masonry要先配置CocoaPods。

基础API

//添加约束
mas_makeConstraints()
//移除之前的约束，重新添加新的约束
mas_remakeConstraints()
//更新约束，写哪条更新哪条，其他约束不变
mas_updateConstraints()
//参数是对象类型，一般是视图对象或者mas_width这样的坐标系对象
equalTo()
//和上面功能相同，参数可以传递基础数据类型对象，可以理解为比上面的API更强大
mas_equalTo()
//用来表示宽度，例如代表view的宽度
width()
//用来获取宽度的值。和上面的区别在于，一个代表某个坐标系对象，一个用来获取坐标系对象的值
mas_width()

更新

//调用此方法，如果有标记为需要重新布局的约束，则立即进行重新布局，内部会调用updateConstraints方法
- (void)updateConstraintsIfNeeded
//重写此方法，内部实现自定义布局过程
- (void)updateConstraints
//当前是否需要重新布局，内部会判断当前有没有被标记的约束
- (BOOL)needsUpdateConstraints
//标记需要进行重新布局
- (void)setNeedsUpdateConstraints

示例

示范部分基本用法

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    
    self.view.backgroundColor = [UIColor whiteColor];
    
    UIView *firstView = [[UIView alloc] initWithFrame:CGRectZero];
    firstView.backgroundColor = [UIColor orangeColor];
    
    UIView *secondView = [[UIView alloc] initWithFrame:CGRectZero];
    secondView.backgroundColor = [UIColor greenColor];
    
    UIView *thirdView = [[UIView alloc] initWithFrame:CGRectZero];
    thirdView.backgroundColor = [UIColor blackColor];
    
    [self.view addSubview:secondView];
    [secondView addSubview:firstView];
    [firstView addSubview:thirdView];
    
    [secondView mas_makeConstraints:^(MASConstraintMaker *make) {
        //左侧间隔为屏幕宽度0.1，使用比例
        make.left.mas_equalTo(self.view.frame.size.width * 0.1);
        //上端据屏幕顶100
        make.top.equalTo(self.view).offset(100);
        //水平对称,降低优先级，与后面的设置相关
        make.centerX.equalTo(self.view).priorityLow();
        //设置高度
        //注意要用对象
        make.height.mas_equalTo(@300);
        //make.height.equalTo(self.view).multipliedBy(0.3);
        
        //设置宽度最大值，宽度小于等于500，可以尝试调低，发现永远不超过500
        //make.width.lessThanOrEqualTo(@500);
        //设置宽度最小值
        //make.width.greaterThanOrEqualTo(@200);
    }];
    
    [firstView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.equalTo(secondView).offset(50);
        //注意right和bottom的offset是负数
        make.right.equalTo(secondView).offset(-100);
        make.top.equalTo(secondView.mas_top).offset(50);
        //上下偏移对称
        make.centerY.equalTo(secondView);
        
    }];
    
    [thirdView mas_makeConstraints:^(MASConstraintMaker *make) {
        //设置优先级：priority(),最大1000
        //居中
        make.center.equalTo(firstView).priorityLow();
        //简化内边距设置
       make.edges.equalTo(firstView).with.insets(UIEdgeInsetsMake(10, 30, 10, 50)).priority(100);
        make.bottom.equalTo(@100).priority(99);
    }];
}