iOS Autolayout 之 Masonry 布局

最新推荐文章于 2024-08-14 23:42:59 发布

AIGCer

最新推荐文章于 2024-08-14 23:42:59 发布

阅读量624

点赞数

分类专栏： Object-C iOS开发

本文链接：https://blog.csdn.net/sinat_15735647/article/details/79806878

版权

Masonry是iOS和Mac OS X的轻量级布局框架，提供链式语法进行Autolayout。本文介绍了Masonry的Compare类型，如Equal、GreaterThanOrEqual、LessThanOrEqual，以及edges、size、center等布局方式。还详细讲解了设置约束优先级的四种方式，并提到了布局更新和调试技巧，包括如何处理约束冲突和使用 symbolic breakpoint 进行调试。

摘要由CSDN通过智能技术生成

Masonry

Masonry是一个轻量级的布局框架拥有自己的描述语法采用更优雅的链式语法封装NSAutoLayout, 简洁明了并具有高可读性而且同时支持 iOS 和 Max OS X。使用Masonry能够使用简单的语法进行Autolayout布局

Masonry常用属性与NSLayoutAttrubute的对照表如下

Masonry	NSAutoLayout	说明
view.mas_left	NSLayoutAttributeLeft	左侧
view.mas_top	NSLayoutAttributeTop	上侧
view.mas_right	NSLayoutAttributeRight	右侧
view.mas_bottom	NSLayoutAttributeBottom	下侧
view.mas_leading	NSLayoutAttributeLeading	首部
view.mas_trailing	NSLayoutAttributeTrailing	尾部
view.mas_width	NSLayoutAttributeWidth	宽
view.mas_height	NSLayoutAttributeHeight	高
view.mas_centerX	NSLayoutAttributeCenterX	横向中点
view.mas_centerY	NSLayoutAttributeCenterY	纵向中点
view.mas_baseline	NSLayoutAttributeBaseline	文本基线

使用Masonry进行Autolayout布局

Masonry三种Autolayout Compare类型

.equalTo 相当于NSLayoutRelationEqual,为相等
.lessThanOrEqualTo相当于 NSLayoutRelationLessThanOrEqual,为小于或者等于
.greaterThanOrEqualTo 相当于 NSLayoutRelationGreaterThanOrEqual,为大于或等于

    // **使用UIView/NSView进行比较**
    [view1 mas_makeConstraints:^(MASConstraintMaker *make) {
            //these two constraints are exactly the same
            make.left.greaterThanOrEqualTo(label.mas_left);
            make.left.right.equalTo(lable);
        }];
        ..
    //2. **直接使用NSNumber进行比较**
    [view1 mas_makeConstraints:^(MASConstraintMaker *make) {
            //width >= 200 && width <= 400
            make.width.greaterThanOrEqualTo(@200);
            make.width.lessThanOrEqualTo(@400)
    }];
    ..
    //3. **使用CGFloat**
    [subGreenView mas_makeConstraints:^(MASConstraintMaker *make) {
            //width >= 200 && width <= 400
            make.width.mas_lessThanOrEqualTo(200);
            make.width.mas_greaterThanOrEqualTo(400);
    }];

两个同级的view进行约束

    [subGreenView mas_makeConstraints:^(MASConstraintMaker *make) {
            make.left.equalTo(subGreenView.mas_left).offset(10);
            make.right.equalTo(subGreenView.mas_right).offset(10);
    }];