运用Masonry自适应布局

从iPhone刚面世到如今的iPhone6s,屏幕大小、种类不断发生着改变, iOS开发的布局方式从纯代码到Storyboard在升级着。个人觉得不要太过纠结使用哪种布局方式,纯代码有纯代码的好处、SB也有SB的麻烦,关键还是得根据项目、团队的需要选择一种适合自己的方式。

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

下面用个小Demo简单演示如何使用Masonry。

Masonry下载地址:https://github.com/SnapKit/Masonry

最终运行效果


运用Masonry自适应布局_第1张图片

集成方式

下载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);

}];


运用Masonry自适应布局_第2张图片

你可能感兴趣的:(运用Masonry自适应布局)