运用Masonry自适应布局
从iPhone刚面世到如今的iPhone6s,屏幕大小、种类不断发生着改变, iOS开发的布局方式从纯代码到Storyboard在升级着。个人觉得不要太过纠结使用哪种布局方式,纯代码有纯代码的好处、SB也有SB的麻烦,关键还是得根据项目、团队的需要选择一种适合自己的方式。
Masonry是一个轻量级的布局框架 拥有自己的描述语法 采用更优雅的链式语法封装自动布局 简洁明了 并具有高可读性 而且同时支持 iOS 和 Max OS X。
下面用个小Demo简单演示如何使用Masonry。
Masonry下载地址:https://github.com/SnapKit/Masonry
最终运行效果
集成方式
下载Masonry并导入至项目中,在控制器里或PCH文件里引入Masonry.h
核心代码
self.view.backgroundColor= [UIColorwhiteColor];
/**
*要求:保持100*100,居中
*/
UIView*grayView = [UIViewnew];
grayView.backgroundColor= [UIColorgrayColor];
[self.viewaddSubview:grayView];
[grayViewmas_makeConstraints:^(MASConstraintMaker*make) {
make.size.mas_equalTo(CGSizeMake(100,100));
make.center.equalTo(self.view);
}];
/**
*要求:大小保持100*30,距离顶部20,距离右边20
*/
UIView*redView = [UIViewnew];
redView.backgroundColor= [UIColorredColor];
[self.viewaddSubview:redView];
[redViewmas_makeConstraints:^(MASConstraintMaker*make) {
make.size.mas_equalTo(CGSizeMake(100,30));
make.right.mas_equalTo(-20);
make.top.mas_equalTo(20);
}];
/**
*要求:黄色块大小保持100*30,左边距20,上边距50,
蓝色块大小保持50*30,左边距离黄色块20,上边距50
*/
UIView*yellowView = [UIViewnew];
yellowView.backgroundColor= [UIColoryellowColor];
[self.viewaddSubview:yellowView];
[yellowViewmas_makeConstraints:^(MASConstraintMaker*make) {
make.size.mas_equalTo(CGSizeMake(100,30));
make.left.mas_equalTo(20);
make.top.mas_equalTo(50);
}];
UIView*blueView = [UIViewnew];
blueView.backgroundColor= [UIColorblueColor];
[self.viewaddSubview:blueView];
[blueViewmas_makeConstraints:^(MASConstraintMaker*make) {
make.size.mas_equalTo(CGSizeMake(50,30));
make.top.mas_equalTo(50);
make.left.mas_equalTo(yellowView.mas_right).offset(20);
}];
/**
*要求:黑色块高度保持30,与屏幕等宽,下边距0
紫色块高度40,宽度是屏幕一半,下边距与黑色块上编剧距离0.5
*/
UIView*blackView = [UIViewnew];
blackView.backgroundColor= [UIColorblackColor];
[self.viewaddSubview:blackView];
[blackViewmas_makeConstraints:^(MASConstraintMaker*make) {
make.height.mas_equalTo(30);
make.width.equalTo(self.view);
make.bottom.mas_equalTo(0);
}];
UIView*purpleView = [UIViewnew];
purpleView.backgroundColor= [UIColorpurpleColor];
[self.viewaddSubview:purpleView];
[purpleViewmas_makeConstraints:^(MASConstraintMaker*make) {
make.height.mas_equalTo(40);
make.width.mas_equalTo(self.view.frame.size.width/2);
make.bottom.mas_equalTo(blackView.mas_top).offset(-0.5);
}];
/**
*要求:灰、红两个色块,左右间距为5,高度30,宽度平分
*/
UIView*grayView = [UIViewnew];
grayView.backgroundColor= [UIColorgrayColor];
[self.viewaddSubview:grayView];
UIView*redView = [UIViewnew];
redView.backgroundColor= [UIColorredColor];
[self.viewaddSubview:redView];
CGFloatmargin =5;
CGFloatheight =30;
[grayViewmas_makeConstraints:^(MASConstraintMaker*make) {
make.left.mas_equalTo(margin);
make.bottom.mas_equalTo(-margin);
make.height.mas_equalTo(height);
make.right.equalTo(redView.mas_left).offset(-margin);
make.width.equalTo(redView);
}];
[redViewmas_makeConstraints:^(MASConstraintMaker*make) {
make.right.mas_equalTo(-margin);
make.bottom.equalTo(grayView);
make.height.equalTo(grayView);
}];