【iOS】Masonry使用案例讲解

如果说自动布局解救了多屏幕适配,那众多三方库的出现就解救了系统自动布局的写法。Masonry就是其中一个。

在Github上,Masonry已经得到5000+个star,用法上也比较简单灵活,很大程度上替代了传统的NSLayoutConstraint布局方式。本文将利用几个案例来讲解Masonry的使用。

Masonry下载地址:

https://github.com/SnapKit/Masonry

本文Demo下载地址:

?https://github.com/saitjr/MasonryDemo.git

环境信息:

Mac OS X 10.10.3

Xcode 6.3

iOS 8.3

正文:

前期准备:

  1. 下载Masonry并导入到工程中;
  2. 将Masonry.h导入当前控制器。

案例一:

要求:

无论在什么尺寸的设备上(包括横竖屏切换),红色view都居中显示。

最终效果

实现:


#import "ViewController.h"
#import "Masonry.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.

    // 防止block中的循环引用
    __weak typeof(self) weakSelf = self;

    // 初始化view并设置背景
    UIView *view = [UIView new];
    view.backgroundColor = [UIColor redColor];
    [self.view addSubview:view];

    // 使用mas_makeConstraints添加约束
    [view mas_makeConstraints:^(MASConstraintMaker *make) {

        // 添加大小约束(make就是要添加约束的控件view)
        make.size.mas_equalTo(CGSizeMake(100, 100));
        // 添加居中约束(居中方式与self相同)
        make.center.equalTo(weakSelf.view);
    }];
}

@end

案例二:

要求:

  1. 无论在什么尺寸的设备上(包括横竖屏切换),黑色view的左、上边距、大小都不变;
  2. 灰色view的右边距不变
  3. 宽、高、上边距黑色view相等

最终效果

实现:


#import "ViewController2.h"
#import "Masonry.h"

@interface ViewController2 ()

@end

@implementation ViewController2

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.

    // 初始化黑色view
    UIView *blackView = [UIView new];
    blackView.backgroundColor = [UIColor blackColor];
    [self.view addSubview:blackView];

    // 给黑色view添加约束
    [blackView mas_makeConstraints:^(MASConstraintMaker *make) {

        // 添加大小约束
        make.size.mas_equalTo(CGSizeMake(100, 100));
        // 添加左、上边距约束(左、上约束都是20)
        make.left.and.top.mas_equalTo(20);
    }];

    // 初始化灰色view
    UIView *grayView = [UIView new];
    grayView.backgroundColor = [UIColor lightGrayColor];
    [self.view addSubview:grayView];

    // 给灰色view添加约束
    [grayView mas_makeConstraints:^(MASConstraintMaker *make) {

        // 大小、上边距约束与黑色view相同
        make.size.and.top.equalTo(blackView);
        // 添加右边距约束(这里的间距是有方向性的,左、上边距约束为正数,右、下边距约束为负数)
        make.right.mas_equalTo(-20);
    }];
}

@end

在上面的案例中,涉及以下内容:

1.?在Masonry中,and,with都没有具体操作,仅仅是为了提高程序的可读性


make.left.and.top.mas_equalTo(20);

等价于


make.left.top.mas_equalTo(20);

2.?equalTo与mas_equalTo

如果约束条件是数值或者结构体等类型,可以使用mas_equalTo进行包装。关于这个问题,我也不是很清楚,可以看看官方的解释:

Instead of using NSNumber, you can use primitives and structs to build your constraints.By default, macros which support autoboxing are prefixed with mas_. Unprefixed versions are available by defining MAS_SHORTHAND_GLOBALS before importing Masonry.

我一般将数值类型的约束用mas_equalTo,而相对于某个控件,或者某个控件的某个约束,我会使用equalTo,如:


make.size.mas_equalTo(CGSizeMake(100, 100));
make.center.equalTo(weakSelf.view);

案例三:

要求:

  1. 有两个view,黑色与灰色;
  2. 黑色view的左、上、右边距均为20,下边距灰色view 20,宽度自适应,高度与灰色view平分整个界面;
  3. 灰色view宽度为黑色view的一半(即左边以中线起始),右、下边距与黑色view相同,高度与黑色view相同。

最终效果

实现:


#import "ViewController3.h"
#import "Masonry.h"

@interface ViewController3 ()

@end

@implementation ViewController3

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.

    __weak typeof(self) weakSelf = self;

    // 初始化黑色view
    UIView *blackView = [UIView new];
    blackView.backgroundColor = [UIColor blackColor];
    [self.view addSubview:blackView];

    // 给黑色view添加约束
    [blackView mas_makeConstraints:^(MASConstraintMaker *make) {

        // 添加左、上边距约束
        make.left.and.top.mas_equalTo(20);
        // 添加右边距约束
        make.right.mas_equalTo(-20);
    }];

    // 初始化灰色view
    UIView *grayView = [UIView new];
    grayView.backgroundColor = [UIColor lightGrayColor];
    [self.view addSubview:grayView];

    // 给灰色view添加约束
    [grayView mas_makeConstraints:^(MASConstraintMaker *make) {

        // 添加右、下边距约束
        make.bottom.and.right.mas_equalTo(-20);
        // 添加高度约束,让高度等于黑色view
        make.height.equalTo(blackView);
        // 添加上边距约束(上边距 = 黑色view的下边框 + 偏移量20)
        make.top.equalTo(blackView.mas_bottom).offset(20);
        // 添加左边距(左边距 = 父容器纵轴横轴中心 + 偏移量0)
        make.left.equalTo(weakSelf.view.mas_centerX).offset(0);
    }];
}

案例四:

要求:

当键盘挡住输入框时,输入框自动向上弹到键盘上方。

实现:

这里需要使用到Masonry的另外一个方法mas_updateConstraints。这个方法用于更新控件约束。

具体的实现方式可以下载Demo来看,这里只贴出键盘弹出时的处理代码:


- (void)keyboardWillChangeFrameNotification:(NSNotification *)notification {

    // 获取键盘基本信息(动画时长与键盘高度)
    NSDictionary *userInfo = [notification userInfo];
    CGRect rect = [userInfo[UIKeyboardFrameBeginUserInfoKey] CGRectValue];
    CGFloat keyboardHeight = CGRectGetHeight(rect);
    CGFloat keyboardDuration = [userInfo[UIKeyboardAnimationDurationUserInfoKey] doubleValue];

    // 修改下边距约束
    [_textField mas_updateConstraints:^(MASConstraintMaker *make) {

        make.bottom.mas_equalTo(-keyboardHeight);
    }];

    // 更新约束
    [UIView animateWithDuration:keyboardDuration animations:^{

        [self.view layoutIfNeeded];
    }];
}

总结:

  1. 可以给控件添加left/right/top/bottom/size/height/width/insert约束;
  2. 库提供了三个方法,mas_makeConstraints添加约束,mas_updateConstraints修改约束,mas_remakeConstraints清除以前约束并添加新约束;
  3. 可以通过view.mas_bottom获得view的某个约束;
  4. 在约束的block中,使用make来给当前控件添加约束。
时间: 2024-09-28 13:55:00

【iOS】Masonry使用案例讲解的相关文章

Masonry使用案例讲解

如果说自动布局解救了多屏幕适配,那众多三方库的出现就解救了系统自动布局的写法.Masonry就是其中一个. 在Github上,Masonry已经得到5000+个star,用法上也比较简单灵活,很大程度上替代了传统的NSLayoutConstraint布局方式.本文将利用几个案例来讲解Masonry的使用. Masonry下载地址: https://github.com/SnapKit/Masonry 本文Demo下载地址: https://github.com/saitjr/MasonryDem

传智播客C语言视频第二季(增加诸多C语言案例讲解,有效下载期为10.5-10.10关闭)

?? 卷 backup 的文件夹 PATH 列表卷序列号为 000000F4 D4A8:14B0J:.│  1.txt│  2.txt│  ├─1传智播客_尹成_C语言从菜鸟到高手_第一章C语言概述A│  ├─文档│  │      第1讲 C语言第一阶段.doc│  │      │  └─视频│          第1讲 C语言第一阶段.mp4│          ├─2传智播客_尹成_C语言从菜鸟到高手_第二章C语言跨平台HelloWorld-A│  ├─第10节 2.5.1-2.5.7C

传智播客C语言视频第二季 第一季基础上增加诸多C语言案例讲解,有效下载期为10 5-10 10关闭

卷 backup 的文件夹 PATH 列表卷序列号为 00000025 D4A8:14B0J:.│  1.txt│  c语言经典案例效果图示.doc│  ├─1传智播客_尹成_C语言从菜鸟到高手_第一章C语言概述A│  ├─文档│  │      第1讲 C语言第一阶段.doc│  │      │  └─视频│          第1讲 C语言第一阶段.mp4│          ├─2传智播客_尹成_C语言从菜鸟到高手_第二章C语言跨平台HelloWorld-A│  ├─2.1 C语言环境简

IOS UITableView NSIndexPath属性讲解

IOS UITableView NSIndexPath属性讲解 查看UITableView的帮助文档我们会注意到UITableView有两个Delegate分别为:dataSource和delegate. dataSource 是UITableViewDataSource类型,主要为UITableView提 供显示用的数据(UITableViewCell),指定UITableViewCell支持的编辑操作类型(insert,delete和 reordering),并根据用户的操作进行相应的数据更

使用Jquery+EasyUI 进行框架项目开发案例讲解之五 模块(菜单)管理源码分享

http://www.cnblogs.com/huyong/p/3454012.html 使用Jquery+EasyUI 进行框架项目开发案例讲解之五  模块(菜单)管理源码分享    在上四篇文章  <使用Jquery+EasyUI进行框架项目开发案例讲解之一---员工管理源码分享>  <使用Jquery+EasyUI 进行框架项目开发案例讲解之二---用户管理源码分享>  <使用Jquery+EasyUI 进行框架项目开发案例讲解之三---角色管理源码分享> <

有关memcached企业面试案例讲解

有关memcached企业面试案例讲解 1.Memcached是什么,有什么作用?    a. memcached是一个开源的.高性能的内存的缓存软件,从名称上看Mem就是内存的意思,而Cache就是缓存的意思.    b. 作用:memcached通过在事先规划好的内存空间中,临时缓存数据库中的各类数据,以达到减少业务对数据库的直接高并发访问,从而达到提升数据库的访问性能,加速网站集群动态应用服务的能力. 2.Memcached服务在企业集群架构中应用场景  (1). 作为数据库的前端缓存应用

使用Jquery+EasyUI 进行框架项目开发案例讲解之四 组织机构管理源码分享

http://www.cnblogs.com/huyong/p/3404647.html 在上三篇文章  <使用Jquery+EasyUI进行框架项目开发案例讲解之一---员工管理源码分享> <使用Jquery+EasyUI 进行框架项目开发案例讲解之二---用户管理源码分享> <使用Jquery+EasyUI 进行框架项目开发案例讲解之三---角色管理源码分享> 我们分享了使用Jquery EasyUI来进行ASP.NET项目的开发的相关方法,每一个模块都有其共用性,

Oracle数据库游标案例讲解与源码 (2)

关于此案例的详细分析,请参看  <Oracle数据库游标案例讲解与源码>一文 http://blog.csdn.net/sinat_26342009/article/details/45199827 案例要求: 利用游标转换两张表的数据. 首先,将满足以下三个条件的数据插入到一张新表(productinfo_tmp)中 : <1>价格大于1000 <2>产地为"中国"或"杭州" <3> 商品类型为"家电&qu

【shiro】(4)---Shiro认证、授权案例讲解

Shiro认证.授权案例讲解 一.认证  1. 认证流程     2.用户密码已经加密.加盐的用户认证 (1)测试类 // 用户登陆和退出,这里我自定了一个realm(开发肯定需要自定义realm获取数据库密码和权限) @Test public void testCustomRealmMd5() { // 创建securityManager工厂,通过ini配置文件创建securityManager工厂 Factory<SecurityManager> factory = new IniSecu