Masonry使用详解

  • mas_makeConstraints 只负责新增约束 Autolayout不能同时存在两条针对于同一对象的约束 否则会报错
  • mas_updateConstraints 针对上面的情况 会更新在block中出现的约束 不会导致出现两个相同约束的情况
  • mas_remakeConstraints 则会清除之前的所有约束 仅保留最新的约束
  • equalTo 和 mas_equalTo的区别在哪里呢? 其实 mas_equalTo是一个MACRO,比较的是值,equalTo比较的是view。

1. [基础] 居中显示一个view

- (void)viewDidLoad

{

    [super viewDidLoad];

    // Do any additional setup after loading the view.

    

    WS(ws);

    

    UIView *sv = [UIView new];

    [sv showPlaceHolder];

    sv.backgroundColor = [UIColor blackColor];

    [self.view addSubview:sv];

    [sv mas_makeConstraints:^(MASConstraintMaker *make) {

        make.center.equalTo(ws.view);

        make.size.mas_equalTo(CGSizeMake(300, 300));

    }];

    

}

2. [初级] 让一个view略小于其superView(边距为10)

UIView *sv1 = [UIView new];

[sv1 showPlaceHolder];

sv1.backgroundColor = [UIColor redColor];

[sv addSubview:sv1];

[sv1 mas_makeConstraints:^(MASConstraintMaker *make) {

    make.edges.equalTo(sv).with.insets(UIEdgeInsetsMake(10, 10, 10, 10));

    

    /* 等价于

    make.top.equalTo(sv).with.offset(10);

    make.left.equalTo(sv).with.offset(10);

    make.bottom.equalTo(sv).with.offset(-10);

    make.right.equalTo(sv).with.offset(-10);

    */

    

    /* 也等价于

    make.top.left.bottom.and.right.equalTo(sv).with.insets(UIEdgeInsetsMake(10, 10, 10, 10));

    */

}];

3. [初级] 让两个高度为150的view垂直居中且等宽且等间隔排列 间隔为10(自动计算其宽度)

int padding1 = 10;

[sv2 mas_makeConstraints:^(MASConstraintMaker *make) {

    make.centerY.mas_equalTo(sv.mas_centerY);

    make.left.equalTo(sv.mas_left).with.offset(padding1);

    make.right.equalTo(sv3.mas_left).with.offset(-padding1);

    make.height.mas_equalTo(@150);

    make.width.equalTo(sv3);

}];

[sv3 mas_makeConstraints:^(MASConstraintMaker *make) {

    make.centerY.mas_equalTo(sv.mas_centerY);

    make.left.equalTo(sv2.mas_right).with.offset(padding1);

    make.right.equalTo(sv.mas_right).with.offset(-padding1);

    make.height.mas_equalTo(@150);

    make.width.equalTo(sv2);

}];

4. [中级] 在UIScrollView顺序排列一些view并自动计算contentSize

UIScrollView *scrollView = [UIScrollView new];

scrollView.backgroundColor = [UIColor whiteColor];

[sv addSubview:scrollView];

[scrollView mas_makeConstraints:^(MASConstraintMaker *make) {

    make.edges.equalTo(sv).with.insets(UIEdgeInsetsMake(5,5,5,5));

}];

UIView *container = [UIView new];

[scrollView addSubview:container];

[container 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 *subv = [UIView new];

    [container addSubview:subv];

    subv.backgroundColor = [UIColor colorWithHue:( arc4random() % 256 / 256.0 )

                                      saturation:( arc4random() % 128 / 256.0 ) + 0.5

                                      brightness:( arc4random() % 128 / 256.0 ) + 0.5

                                           alpha:1];

    

    [subv mas_makeConstraints:^(MASConstraintMaker *make) {

        make.left.and.right.equalTo(container);

        make.height.mas_equalTo(@(20*i));

        

        if ( lastView )

        {

            make.top.mas_equalTo(lastView.mas_bottom);

        }

        else

        {

            make.top.mas_equalTo(container.mas_top);

        }

    }];

    

    lastView = subv;

}

[container mas_makeConstraints:^(MASConstraintMaker *make) {

    make.bottom.equalTo(lastView.mas_bottom);

}];

5. [高级] 横向或者纵向等间隙的排列一组view

@implementation UIView(Masonry_LJC)

- (void) distributeSpacingHorizontallyWith:(NSArray*)views

{

    NSMutableArray *spaces = [NSMutableArray arrayWithCapacity:views.count+1];

    

    for ( int i = 0 ; i < views.count+1 ; ++i )

    {

        UIView *v = [UIView new];

        [spaces addObject:v];

        [self addSubview:v];

        

        [v mas_makeConstraints:^(MASConstraintMaker *make) {

            make.width.equalTo(v.mas_height);

        }];

    }    

    

    UIView *v0 = spaces[0];

    

    __weak __typeof(&*self)ws = self;

    

    [v0 mas_makeConstraints:^(MASConstraintMaker *make) {

        make.left.equalTo(ws.mas_left);

        make.centerY.equalTo(((UIView*)views[0]).mas_centerY);

    }];

    

    UIView *lastSpace = v0;

    for ( int i = 0 ; i < views.count; ++i )

    {

        UIView *obj = views[i];

        UIView *space = spaces[i+1];

        

        [obj mas_makeConstraints:^(MASConstraintMaker *make) {

            make.left.equalTo(lastSpace.mas_right);

        }];

        

        [space mas_makeConstraints:^(MASConstraintMaker *make) {

            make.left.equalTo(obj.mas_right);

            make.centerY.equalTo(obj.mas_centerY);

            make.width.equalTo(v0);

        }];

        

        lastSpace = space;

    }

    

    [lastSpace mas_makeConstraints:^(MASConstraintMaker *make) {

        make.right.equalTo(ws.mas_right);

    }];

    

}

- (void) distributeSpacingVerticallyWith:(NSArray*)views

{

    NSMutableArray *spaces = [NSMutableArray arrayWithCapacity:views.count+1];

    

    for ( int i = 0 ; i < views.count+1 ; ++i )

    {

        UIView *v = [UIView new];

        [spaces addObject:v];

        [self addSubview:v];

        

        [v mas_makeConstraints:^(MASConstraintMaker *make) {

            make.width.equalTo(v.mas_height);

        }];

    }

    

    

    UIView *v0 = spaces[0];

    

    __weak __typeof(&*self)ws = self;

    

    [v0 mas_makeConstraints:^(MASConstraintMaker *make) {

        make.top.equalTo(ws.mas_top);

        make.centerX.equalTo(((UIView*)views[0]).mas_centerX);

    }];

    

    UIView *lastSpace = v0;

    for ( int i = 0 ; i < views.count; ++i )

    {

        UIView *obj = views[i];

        UIView *space = spaces[i+1];

        

        [obj mas_makeConstraints:^(MASConstraintMaker *make) {

            make.top.equalTo(lastSpace.mas_bottom);

        }];

        

        [space mas_makeConstraints:^(MASConstraintMaker *make) {

            make.top.equalTo(obj.mas_bottom);

            make.centerX.equalTo(obj.mas_centerX);

            make.height.equalTo(v0);

        }];

        

        lastSpace = space;

    }

    

    [lastSpace mas_makeConstraints:^(MASConstraintMaker *make) {

        make.bottom.equalTo(ws.mas_bottom);

    }];

}

@end

UIView *sv11 = [UIView new];

UIView *sv12 = [UIView new];

UIView *sv13 = [UIView new];

UIView *sv21 = [UIView new];

UIView *sv31 = [UIView new];

sv11.backgroundColor = [UIColor redColor];

sv12.backgroundColor = [UIColor redColor];

sv13.backgroundColor = [UIColor redColor];

sv21.backgroundColor = [UIColor redColor];

sv31.backgroundColor = [UIColor redColor];

[sv addSubview:sv11];

[sv addSubview:sv12];

[sv addSubview:sv13];

[sv addSubview:sv21];

[sv addSubview:sv31];

//给予不同的大小 测试效果

[sv11 mas_makeConstraints:^(MASConstraintMaker *make) {

    make.centerY.equalTo(@[sv12,sv13]);

    make.centerX.equalTo(@[sv21,sv31]);

    make.size.mas_equalTo(CGSizeMake(40, 40));

}];

[sv12 mas_makeConstraints:^(MASConstraintMaker *make) {

    make.size.mas_equalTo(CGSizeMake(70, 20));

}];

[sv13 mas_makeConstraints:^(MASConstraintMaker *make) {

    make.size.mas_equalTo(CGSizeMake(50, 50));

}];

[sv21 mas_makeConstraints:^(MASConstraintMaker *make) {

    make.size.mas_equalTo(CGSizeMake(50, 20));

}];

[sv31 mas_makeConstraints:^(MASConstraintMaker *make) {

    make.size.mas_equalTo(CGSizeMake(40, 60));

}];

[sv distributeSpacingHorizontallyWith:@[sv11,sv12,sv13]];

[sv distributeSpacingVerticallyWith:@[sv11,sv21,sv31]];

[sv showPlaceHolderWithAllSubviews];

[sv hidePlaceHolder];

时间: 2024-11-06 01:34:13

Masonry使用详解的相关文章

iOS开发——屏幕适配篇&amp;Masonry详解

Masonry详解 前言 1 MagicNumber -> autoresizingMask -> autolayout 以上是纯手写代码所经历的关于页面布局的三个时期 在iphone1-iphone3gs时代 window的size固定为(320,480) 我们只需要简单计算一下相对位置就好了 在iphone4-iphone4s时代 苹果推出了retina屏 但是给了码农们非常大的福利:window的size不变 在iphone5-iphone5s时代 window的size变了(320,5

iOS疯狂详解之开源库

youtube下载神器:https://github.com/rg3/youtube-dl vim插件:https://github.com/Valloric/YouCompleteMe vim插件配置:https://github.com/spf13/spf13-vim ----------------Mac完整项目---------- 电台:https://github.com/myoula/sostart ----------------iOS完整项目---------------- 1,

Spring事务管理(详解+实例)

写这篇博客之前我首先读了<Spring in action>,之后在网上看了一些关于Spring事务管理的文章,感觉都没有讲全,这里就将书上的和网上关于事务的知识总结一下,参考的文章如下: Spring事务机制详解 Spring事务配置的五种方式 Spring中的事务管理实例详解 1 初步理解 理解事务之前,先讲一个你日常生活中最常干的事:取钱. 比如你去ATM机取1000块钱,大体有两个步骤:首先输入密码金额,银行卡扣掉1000元钱:然后ATM出1000元钱.这两个步骤必须是要么都执行要么都

转载:DenseNet算法详解

原文连接:http://blog.csdn.net/u014380165/article/details/75142664 参考连接:http://blog.csdn.net/u012938704/article/details/53468483 本文这里仅当学习笔记使用,具体细节建议前往原文细度. 论文:Densely Connected Convolutional Networks 论文链接:https://arxiv.org/pdf/1608.06993.pdf 代码的github链接:h

MariaDB(MySQL)创建、删除、选择及数据类型使用详解

一.MariaDB简介(MySQL简介略过) MariaDB数据库管理系统是MySQL的一个分支,主要由开源社区在维护,采用GPL授权许可 MariaDB的目的是完全兼容MySQL,包括API和命令行,使之能轻松成为MySQL的代替品.在存储引擎方面,使用XtraDB(英语:XtraDB)来代替MySQL的InnoDB. MariaDB由MySQL的创始人Michael Widenius(英语:Michael Widenius)主导开发,他早前曾以10亿美元的价格,将自己创建的公司MySQL A

HttpServletResponse和HttpServletRequest详解

HttpServletResponse,HttpServletRequest详解 1.相关的接口 HttpServletRequest HttpServletRequest接口最常用的方法就是获得请求中的参数,这些参数一般是客户端表单中的数据.同时,HttpServletRequest接口可以获取由客户端传送的名称,也可以获取产生请求并且接收请求的服务器端主机名及IP地址,还可以获取客户端正在使用的通信协议等信息.下表是接口HttpServletRequest的常用方法. 说明:HttpServ

POSIX 线程详解(经典必看)

总共三部分: 第一部分:POSIX 线程详解                                   Daniel Robbins ([email protected]), 总裁/CEO, Gentoo Technologies, Inc.  2000 年 7 月 01 日 第二部分:通用线程:POSIX 线程详解,第 2部分       Daniel Robbins ([email protected]), 总裁/CEO, Gentoo Technologies, Inc.  20

.NET深入解析LINQ框架(五:IQueryable、IQueryProvider接口详解)

阅读目录: 1.环路执行对象模型.碎片化执行模型(假递归式调用) 2.N层对象执行模型(纵横向对比链式扩展方法) 3.LINQ查询表达式和链式查询方法其实都是空壳子 4.详细的对象结构图(对象的执行原理) 5.IQueryable<T>与IQueryProvider一对一的关系能否改成一对多的关系 6.完整的自定义查询 1]. 环路执行对象模型.碎片化执行模型(假递归式调用) 这个主题扯的可能有点远,但是它关系着整个LINQ框架的设计结构,至少在我还没有搞懂LINQ的本意之前,在我脑海里一直频

netstat状态详解

一.生产服务器netstat tcp连接状态................................................................................ 2 1.1生产服务器某个业务LVS负载均衡上连接状态数量............................................... 2 1.2生产服务器某个业务web上连接状态数量...............................................