ios masonry 最大宽度怎么适配自适应宽度的lable

iOS自适应布局之Masonry(一)
iPhone 5之前我们对应用布局停留在3.5寸一个屏幕的阶段,当时的安卓屌丝们是多么的羡慕iOS开发,不会被大量的屏幕适配所烦恼。随着iPhone产品的迭代,逐渐出现4寸、4.7寸、5.5寸&.,你们说,iphone10+会有多少寸?O(&_&)O~
正因为上面说的那样,屏幕的尺寸逐步增多,还沿用以前的方法布局显然是不行的,这时候为布局引进新的结局办法NSAutoLayout,但苹果提供的比较复杂麻烦,所以就有人在此基础上进行封装,而提供一种高效的框架&-Masonary
如何安装框架?还是建议用CocoaPods,这里有我之前写的CocoaPods相关用法
pod 'Masonry'
使用参数功能说明表
1.居中显示一个View,并能时刻保持比屏幕的宽和高少60像素
UIView *view1=[[UIView alloc]init];
view1.backgroundColor=[UIColor brownColor];
[self.view addSubview:view1];
[view1 mas_makeConstraints:^(MASConstraintMaker *make) {
make.center.equalTo(self.view);
make.top.equalTo(self.view).with.offset(30);
make.left.equalTo(self.view).with.offset(30);
make.bottom.equalTo(self.view).with.offset(-30);
make.right.equalTo(self.view).with.offset(-30);
这里需要注意的是:控件用Masonry约束的时候必须先将控件用addSubview加载到父视图中才能进行约束,不然就会造成崩溃。
Masonry中有三个函数
(NSArray *)mas_makeConstraints:(void(^)(MASConstraintMaker *make)) (NSArray *)mas_updateConstraints:(void(^)(MASConstraintMaker *make)) (NSArray *)mas_remakeConstraints:(void(^)(MASConstraintMaker *make))
mas_makeConstraints 只负责增加约束,当对同一个控件两次调用这个函数就会造成崩溃。vcD4NCjxwPm1hc191cGRhdGVDb25zdHJhaW50cyC4/NDC1LzK+KOs08NtYXNfbWFrZUNvbnN0cmFpbnRztqjS5dS8yvjWrrrzo6y/ydLU08O4/NDC1LzK+L340NCyubPkPC9wPg0KPHA+bWFzX3JlbWFrZUNvbnN0cmFpbnRzINf308OxyL3PsNS1wKOsyb6z/daux7C21LjDv9i8/rTm1Nq1xMv509DUvMr4o6zWu7GjwfRibG9ja7qvyv3A78PmtcTX7tDC1LzK+KGjPGJyIC8+DQrJz8PmtcQ8L3A+DQo8cHJlIGNsYXNzPQ=="brush:">
make.center.equalTo(self.view);
make.top.equalTo(self.view).with.offset(30);
make.left.equalTo(self.view).with.offset(30);
make.bottom.equalTo(self.view).with.offset(-30);
make.right.equalTo(self.view).with.offset(-30);
你是不是想更优雅,更棒一点呢?可以这样:
UIEdgeInsets padding = UIEdgeInsetsMake(30, 30, -30, -30);
make.center.equalTo(self.view);
make.top.equalTo(self.view).with.offset(padding.top);
make.left.equalTo(self.view).with.offset(padding.left);
make.bottom.equalTo(self.view).with.offset(padding.bottom);
make.right.equalTo(self.view).with.offset(padding.right);
我们还可以简化为
make.edges.equalTo(self.view).with.insets(UIEdgeInsetsMake(10, 10, 10, 10));
也可以这样:
make.top.left.bottom.and.right.equalTo(self.view).with.insets(UIEdgeInsetsMake(10, 10, 10, 10));代码适配Masonry使用的详细介绍 - 简书
代码适配Masonry使用的详细介绍
Masonry简介
Masonry是一个轻量级的布局框架,它拥有自己的描述语法(采用更优雅的链式语法封装)来自动布局,具有很好可读性且同时支持iOS和Max OS X等。总之,对于侧重写代码的coder,请你慢慢忘记Frame,喜欢Masonry吧
使用前的准备
若是你对于自动布局很熟练的话,再接触这个第三方Masonry很容易上手的,对UI界面显示的控件的约束本质都是相同的,现在呢,我一般都是喜欢在控制器里导入
#import "Masonry.h"之前再添加两个宏,来提高App的开发效率。
//1. 对于约束参数可以省去"mas_"
#define MAS_SHORTHAND
//2. 对于默认的约束参数自动装箱
#define MAS_SHORTHAND_GLOBALS
即:需要我们导入的框架与宏如下
//define this constant if you want to use Masonry without the 'mas_' prefix
#define MAS_SHORTHAND
//define this constant if you want to enable auto-boxing for default syntax
#define MAS_SHORTHAND_GLOBALS
#import "Masonry.h" //宏必须添加在头文件前面
添加约束前提:被约束的必须有父控件,其中约束项都必须是UIView或子类的实例。
约束的属性
在此我就列举几个可能不太熟悉的吧
@property (nonatomic, strong, readonly) MASConstraint *
@property (nonatomic, strong, readonly) MASConstraint * //尾部
@property (nonatomic, strong, readonly) MASConstraint * //文本基线
约束的三种方法
//这个方法只会添加新的约束
[blueView mas_makeConstraints:^(MASConstraintMaker *make)
// 这个方法会将以前的所有约束删掉,添加新的约束
[blueView mas_remakeConstraints:^(MASConstraintMaker *make) {
// 这个方法将会覆盖以前的某些特定的约束
[blueView mas_updateConstraints:^(MASConstraintMaker *make) {
常见约束的各种类型
1.尺寸:width、height、size
2.边界:left、leading、right、trailing、top、bottom
3.中心点:center、centerX、centerY
4.边界:edges
5.偏移量:offset、insets、sizeOffset、centerOffset
6.priority()约束优先级(0~1000),multipler乘因数, dividedBy除因数
Masonry约束易忽略的技术点
使用Masonry不需要设置控件的translatesAutoresizingMaskIntoConstraints属性为NO;防止block中的循环引用,使用弱引用(这是错误观点),在这里block是局部的引用,block内部引用self不会造成循环引用的 __weak typeof (self) weakSelf = self;(没必要的写法)
Masonry约束控件出现冲突的问题
当约束冲突发生的时候,我们可以设置view的key来定位是哪个view
redView.mas_key = @"redView";
greenView.mas_key = @"greenView";
blueView.mas_key = @"blueView";
若是觉得这样一个个设置比较繁琐,怎么办呢,Masonry则提供了批量设置的宏MASAttachKeys
MASAttachKeys(redView,greenView,blueView); //一句代码即可全部设置
约束iconView距离各个边距为30
[iconView makeConstraints:^(MASConstraintMaker *make) {
make.edges.equalTo(self.view).insets(UIEdgeInsetsMake(30, 30, 30, 30));
equalTo 和 mas_equalTo的区别
#define mas_equalTo(...) equalTo(MASBoxValue((__VA_ARGS__)))
#define mas_greaterThanOrEqualTo(...) greaterThanOrEqualTo(MASBoxValue((__VA_ARGS__)))
#define mas_lessThanOrEqualTo(...) lessThanOrEqualTo(MASBoxValue((__VA_ARGS__)))
#define mas_offset(...) valueOffset(MASBoxValue((__VA_ARGS__)))
得出结论:mas_equalTo只是对其参数进行了一个BOX(装箱) 操作,目前支持的类型:数值类型(NSNumber)、 点(CGPoint)、大小(CGSize)、边距(UIEdgeInsets),而equalTo:这个方法不会对参数进行包装。
//常见约束的写法 这里太简单了 ,就不备注了
[iconView makeConstraints:^(MASConstraintMaker *make) {
make.right.equalTo(self.view).offset(-30);
make.top.equalTo(self.view).offset(30);
make.height.width.equalTo(100); //== make.size.equalTo(100);
//make.size.mas_equalTo(self.view).multipliedBy(0.5);
//make.top.greaterThanOrEqualTo(self.view).offset(padding);
[redView mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(superview.mas_top).with.offset(10);
//with 增强可读性
make.left.equalTo(greenView.mas_right).and.offset(10); //and 增强可读性
make.bottom.equalTo(blueView.mas_top).offset(-10);
make.right.equalTo(superview.mas_right).offset(-10);
make.width.equalTo(greenView.mas_width);
make.height.equalTo(@[greenView, blueView]); //约束参数相同可以通过数组
更新约束的问题
例如:控制器有个按钮,若是点击按钮,则按钮本身的大小、位置会随机改变
监听按钮点击[self.btn addTarget:self action:@selector(didClickBtn:) forControlEvents:UIControlEventTouchUpInside];
(void) didClickBtn:(UIButton *)button {
self.btnSize = CGSizeMake(self.btnSize.width * 1.3, self.btnSize.height * 1.3); //设置一个属性(btnSize)保存其大小的变化
//1.告知需要更新约束,但不会立刻开始,系统然后调用updateConstraints
[self setNeedsUpdateConstraints];
//2.告知立刻更新约束,系统立即调用updateConstraints
[self updateConstraintsIfNeeded];
//3.这里动画当然可以取消,具体看项目的需求
//系统block内引用不会导致循环引用,block结束就会释放引用对象
[UIView animateWithDuration:0.4 animations:^{
[self layoutIfNeeded]; //告知页面立刻刷新,系统立即调用updateConstraints
苹果官方建议:添加/更新约束在这个方法(updateConstraints)内
// this is Apple's recommended place for adding/updating constraints
- (void)updateConstraints {
//更新约束
[self.btn updateConstraints:^(MASConstraintMaker *make) {
make.center.equalTo(self);
make.width.equalTo(@(self.buttonSize.width)).priorityLow();
make.height.equalTo(@(self.buttonSize.height)).priorityLow();
make.width.lessThanOrEqualTo(self);
make.height.lessThanOrEqualTo(self);
//according to apple super should be called at end of method
//最后必须调用父类的更新约束
[super updateConstraints];
设置requiresConstraintBasedLayout为YES
+ (BOOL)requiresConstraintBasedLayout{
return YES ; //重写这个方法 若视图基于自动布局的
重置约束的问题
对于控件的重新约束,则之前的约束都是无效的,步骤都更新约束一样的,只是在updateConstraints方法内的约束方法改为了remakeConstraints,直接贴代码吧(仍以按钮为例,其他原理都是相同的)
//首先监听按钮
[self.btn addTarget:self action:@selector(didClickBtn:) forControlEvents:UIControlEventTouchUpInside];
//处理事件
- (void) didClickBtn :(UIButton *)button{
(...) //触发条件
[self setNeedsUpdateConstraints];
[self updateConstraintsIfNeeded];
动画展示变化 - 这句代码可有可无,参考项目具体的需求
[UIView animateWithDuration:0.4 animations:^{
[self layoutIfNeeded];
//重置约束
- (void)updateConstraints {
[self.btn remakeConstraints:^(MASConstraintMaker *make) {
[super updateConstraints];
+ (BOOL)requiresConstraintBasedLayout{
return YES ; //重写这个方法 若视图基于自动布局的
多个(2个以上)控件的等间隔排序显示
首先介绍2个函数
fixedSpacing
fixedItemLength
每个控件的固定长度/宽度
leadSpacing
tailSpacing
//1. 等间隔排列 - 多个控件间隔固定,控件长度/宽度变化
- (void)mas_distributeViewsAlongAxis:(MASAxisType)axisType
withFixedSpacing:(CGFloat)fixedSpacing leadSpacing:(CGFloat)leadSpacing
tailSpacing:(CGFloat)tailS
//2. 等间隔排列 - 多个固定大小固定,间隔空隙变化
- (void)mas_distributeViewsAlongAxis:(MASAxisType)axisType
withFixedItemLength:(CGFloat)fixedItemLength
leadSpacing:(CGFloat)leadSpacing
tailSpacing:(CGFloat)tailS
//首先添加5个视图
NSMutableArray *array = [NSMutableArray new];
for (int i = 0; i & 5; i ++) {
UIView *view = [UIView new];
view.backgroundColor = [UIColor greenColor];
[self addSubview:view];
[array addObject:view]; //保存添加的控件
//水平方向控件间隔固定等间隔
[array mas_distributeViewsAlongAxis:MASAxisTypeHorizontal withFixedSpacing:15 leadSpacing:10 tailSpacing:10];
[array makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(50);
make.height.equalTo(70);
//水平方向宽度固定等间隔
[array mas_distributeViewsAlongAxis:MASAxisTypeHorizontal withFixedItemLength:70 leadSpacing:10 tailSpacing:10];
[array makeConstraints:^(MASConstraintMaker *make) { //数组额你不必须都是view
make.top.equalTo(50);
make.height.equalTo(70);
水平方向等间隔.png
水平方向控件宽度固定等间隔.png
多行label的约束问题
对于UILabel文字内容多的问题,个人觉得Masonry约束设置的非常简单优雅,在此非常感谢Masonry的作者
//创建label
self.label = [UILabel new];
self.label.numberOfLines = 0;
self.label.lineBreakMode = NSLineBreakByTruncatingT
self.label.text = @"有的人,没事时喜欢在朋友圈里到处点赞,东评论一句西评论一句,比谁都有存在感。等你有事找他了,他就立刻变得很忙,让你再也找不着。真正的朋友,平常很少联系。可一旦你遇上了难处,他会立刻回复你的消息,第一时间站出来帮你。所谓的存在感,不是你有没有出现,而是你的出现有没有价值。存在感,不是刷出来的,也不是说出来的。有存在感,未必是要个性锋芒毕露、甚至锋利扎人。翩翩君子,温润如玉,真正有存在感的人,反而不会刻意去强调他的存在感。他的出现,永远都恰到好处。我所欣赏的存在感,不是长袖善舞巧言令色,而是对他人的真心关照;不是锋芒毕露计较胜负,而是让人相处得舒服;不是时时刻刻聒噪不休,而是关键时刻能挺身而出。别总急着出风头,希望你能有恰到好处的存在感。";
[self addSubview: self.label];
[self.label makeConstraints:^(MASConstraintMaker *make) {
make.left.top.equalTo(10);
make.right.equalTo(-10);
//添加约束
- (void)layoutSubviews {
//1. 执行 [super layoutSubviews];
[super layoutSubviews];
//2. 设置preferredMaxLayoutWidth: 多行label约束的完美解决
self.label.preferredMaxLayoutWidth = [UIScreen mainScreen].bounds.size.width - 20;
//3. 设置preferredLayoutWidth后,需要再次执行 [super layoutSubviews];
//其实在实际中这步不写,也不会出错,官方解释是说设置preferredLayoutWidth后需要重新计算并布局界面,所以这步最好执行
[super layoutSubviews];
多行label约束.png
UIScrollView的问题
原理同自动布局一样 UIScrollView上添加UIView
UIView上添加需要显示的控件 UIScrollView滚动高度取决于显示控件的总高度
对子控件做好约束,可达到控制UIView的大小
//创建滚动视图
UIScrollView *scrollView = [UIScrollView new];
self.scrollView = scrollV
scrollView.backgroundColor = [UIColor grayColor];
[self addSubview:scrollView];
[self.scrollView makeConstraints:^(MASConstraintMaker *make) {
make.edges.equalTo(self);
[self setUpContentView]; //添加内容视图
- (void)setUpContentView {
//约束UIScrollView上contentView
UIView *contentView = [UIView new];
[self.scrollView addSubview:contentView];
[contentView makeConstraints:^(MASConstraintMaker *make) {
make.edges.equalTo(self.scrollView);
make.width.equalTo(self.scrollView); //此处必填 - 关键点
//添加控件到contentView,约束原理与自动布局相同
UIView *lastV
CGFloat height = 30;
for (int i = 0; i &1 5; i ++) {
UIView *view = UIView.
view.backgroundColor = [UIColor colorWithRed:arc4random() % 255 / 256.0
green:arc4random() % 255 / 256.0 blue:arc4random() % 255 / 256.0 alpha:1.0];
[contentView addSubview:view];
[view makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(lastView ? lastView.bottom : @0);
make.left.equalTo(0);
make.width.equalTo(contentView.width);
make.height.equalTo(height);
height += 30;
lastView =
[contentView makeConstraints:^(MASConstraintMaker *make) {
make.bottom.equalTo(lastView.bottom);
scrollView的约束设置.png
Masonry源码GitHub地址下载:终于写完了,有什么理解不对的直接说...今晚还有巴萨、尤文的欧冠,真心伤不起。。。
杭州,浙江
一个写代码的...IOS自适配利器Masonry使用指南
作者:FlyElephant
字体:[ ] 类型:转载 时间:
如果说自动布局解救了多屏幕适配,那众多三方库的出现就解救了系统自动布局的写法。Masonry就是其中一个。用法上也比较简单灵活,很大程度上替代了传统的NSLayoutConstraint布局方式。下面我们就来具体探讨下吧
关于iOS布局自动iPhone6之后就是AutoLayOut,AutoLayOut固然非常好用,不过有时候我们需要在页面手动进行页面布局,VFL算是一种选择,而且VFL不复杂,理解起来很容易,实际开发中用的特别熟还好,要是第一次看估计要花点功夫才能搞定。Masonry算是VFL的简化版,用的人比较多,之前项目中用过一次,对手动写页面的开发来说算是福利。
首先我们看一个常见的问题将一个子View放在的UIViewController的某个位置,通过设置边距来实现,效果如下:
如果通过VFL我们代码会是这样的:
UIView *superview&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& = self.
UIView *view1&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& = [[UIView alloc] init];
view1.translatesAutoresizingMaskIntoConstraints = NO;
view1.backgroundColor&&&&&&&&&&&&&&&&&&&&&&&&&& = [UIColor redColor];
[superview addSubview:view1];
UIEdgeInsets padding&&&&&&&&&&&&&&&&&&&&&&&&&&& = UIEdgeInsetsMake(200, 50, 200, 50);
[superview addConstraints:@[
&&&&&&&&&&&&&&&&&&&&&&&&&&&&//约束
&&&&&&&&&&&&&&&&&&&&&&&&&&&&[NSLayoutConstraint constraintWithItem:view1
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&attribute:NSLayoutAttributeTop
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&relatedBy:NSLayoutRelationEqual
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&toItem:superview
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&attribute:NSLayoutAttributeTop
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&multiplier:1.0
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&constant:padding.top],
&&&&&&&&&&&&&&&&&&&&&&&&&&&&[NSLayoutConstraint constraintWithItem:view1
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&attribute:NSLayoutAttributeLeft
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&relatedBy:NSLayoutRelationEqual
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&toItem:superview
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&attribute:NSLayoutAttributeLeft
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&multiplier:1.0
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&constant:padding.left],
&&&&&&&&&&&&&&&&&&&&&&&&&&&&[NSLayoutConstraint constraintWithItem:view1
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&attribute:NSLayoutAttributeBottom
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&relatedBy:NSLayoutRelationEqual
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&toItem:superview
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&attribute:NSLayoutAttributeBottom
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&multiplier:1.0
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&constant:-padding.bottom],
&&&&&&&&&&&&&&&&&&&&&&&&&&&&[NSLayoutConstraint constraintWithItem:view1
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&attribute:NSLayoutAttributeRight
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&relatedBy:NSLayoutRelationEqual
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&toItem:superview
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&attribute:NSLayoutAttributeRight
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&multiplier:1
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&constant:-padding.right],
&&&&&&&&&&&&&&&&&&&&&&&&&&&&]];
只是简单的设置了一个边距,如果视图的关系比较复杂,维护起来会是一个很痛苦的事情,我们看一下Masonry是如何实现的,导入Masonry.h头文件,约束的代码:
UIView& *childView=[UIView new];
[childView setBackgroundColor:[UIColor redColor]];
//先将子View加入在父视图中
[self.view addSubview:childView];
__weak typeof(self) weakSelf =
UIEdgeInsets padding = UIEdgeInsetsMake(200, 50, 200, 50);
[childView mas_makeConstraints:^(MASConstraintMaker *make) {
&&&&make.edges.equalTo(weakSelf.view).with.insets(padding);
通过mas_makeConstraints设置边距有种鸟枪换炮的感觉,我们即将开启一段新的旅程,可以紧接着看下面比较实用的功能~
1.View设置大小
UIView& *childView=[UIView new];
[childView setBackgroundColor:[UIColor redColor]];
//先将子View加入在父视图中
[self.view addSubview:childView];
__weak typeof(self) weakSelf =
[childView mas_makeConstraints:^(MASConstraintMaker *make) {
&&&&//设置大小
&&&&make.size.mas_equalTo(CGSizeMake(100, 100));
&&&&//居中
&&&&make.center.equalTo(weakSelf.view);
这里友情其实一个小内容,目前我们设置约束都是通过mas_makeConstraints用来创建约束,mas_updateConstraints用来更新约束,mas_remakeConstraints重置约束,清除之前的约束,保留最新的约束,如果想深入解释下,可以阅读下面的英文解释~
&*& Creates a MASConstraintMaker with the callee view.
&*& Any constraints defined are added to the view or the appropriate superview once the block has finished executing
&*& @param block scope within which you can build up the constraints which you wish to apply to the view.
&*& @return Array of created MASConstraints
- (NSArray *)mas_makeConstraints:(void(^)(MASConstraintMaker *make))
&*& Creates a MASConstraintMaker with the callee view.
&*& Any constraints defined are added to the view or the appropriate superview once the block has finished executing.
&*& If an existing constraint exists then it will be updated instead.
&*& @param block scope within which you can build up the constraints which you wish to apply to the view.
&*& @return Array of created/updated MASConstraints
- (NSArray *)mas_updateConstraints:(void(^)(MASConstraintMaker *make))
&*& Creates a MASConstraintMaker with the callee view.
&*& Any constraints defined are added to the view or the appropriate superview once the block has finished executing.
&*& All constraints previously installed for the view will be removed.
&*& @param block scope within which you can build up the constraints which you wish to apply to the view.
&*& @return Array of created/updated MASConstraints
- (NSArray *)mas_remakeConstraints:(void(^)(MASConstraintMaker *make))
2.设置高度,这里设置左右边距,因此不设置宽度,如果想单独设置width可参考高度的设置方式:
UIView& *childView=[UIView new];
[childView setBackgroundColor:[UIColor greenColor]];
//先将子View加入在父视图中
[self.view addSubview:childView];
__weak typeof(self) weakSelf =
[childView mas_makeConstraints:^(MASConstraintMaker *make) {
&&&&//距离顶部44
&&&&make.top.equalTo(weakSelf.view.mas_top).with.offset(44);
&&&&//距离左边30
&&&&make.left.equalTo(weakSelf.view.mas_left).with.offset(30);
&&&&//距离右边30,注意是负数
&&&&make.right.equalTo(weakSelf.view.mas_right).with.offset(-30);
&&&&//高度150
&&&&make.height.mas_equalTo(@150);
3.子视图之间的位置设置:
UIView& *childView=[UIView new];
[childView setBackgroundColor:[UIColor greenColor]];
//先将子View加入在父视图中
[self.view addSubview:childView];
__weak typeof(self) weakSelf =
[childView mas_makeConstraints:^(MASConstraintMaker *make) {
&&&&//距离顶部44
&&&&make.top.equalTo(weakSelf.view.mas_top).with.offset(44);
&&&&//距离左边30
&&&&make.left.equalTo(weakSelf.view.mas_left).with.offset(30);
&&&&//距离右边30,注意是负数
&&&&make.right.equalTo(weakSelf.view.mas_right).with.offset(-30);
&&&&//高度150
&&&&make.height.mas_equalTo(@150);
//地址:/xiaofeixiang/
UIView *nextView=[UIView new];
[nextView setBackgroundColor:[UIColor redColor]];
[self.view addSubview:nextView];
[nextView mas_makeConstraints:^(MASConstraintMaker *make) {
&&&&make.top.equalTo(childView.mas_bottom).with.offset(30);
&&&&make.right.equalTo(childView.mas_right).with.offset(-30);
&&&&make.width.mas_equalTo(@100);
&&&&make.height.mas_equalTo(@100);
4.链式写法,算是一个便利的写法:
&&&&UIView& *childView=[UIView new];
&&&&[childView setBackgroundColor:[UIColor greenColor]];
&&&&//先将子View加入在父视图中
&&&&[self.view addSubview:childView];
&&&&__weak typeof(self) weakSelf =
&&&&[childView mas_makeConstraints:^(MASConstraintMaker *make) {
&&&&&&&&make.top.and.left.mas_equalTo(weakSelf.view).with.offset(100);
&&&&&&&&make.bottom.and.right.mas_equalTo(weakSelf.view).with.offset(-100);
&&&&&&&&//第二种写法更简单,相对于就是父视图
//&&&&&&& make.top.and.left.mas_equalTo(100);
//&&&&&&& make.bottom.and.right.mas_equalTo(-100);
&&&&UILabel *label=[UILabel new];
&&&&[label setText:@"博客园-FlyElephant"];
&&&&[label setTextColor:[UIColor redColor]];
&&&&[label setTextAlignment:NSTextAlignmentCenter];
&&&&[self.view addSubview:label];
&&&&[label mas_makeConstraints:^(MASConstraintMaker *make) {
&&&&&&&&make.left.mas_equalTo(weakSelf.view).with.offset(10);
&&&&&&&&make.height.mas_equalTo(20);
&&&&&&&&make.right.mas_equalTo(weakSelf.view).with.offset(-10);
&&&&&&&&make.bottom.mas_equalTo(weakSelf.view).with.offset(-50);
 网上关于Masonry的教程很多,给的例子的也很多,这几种情况基本上满足了开发中的需求,不会有太多的出入,算是一个简易版的教程,Masonry的中属性和iOS中的属性是有对应的关系,不过因为很简单,基本上没怎么看,下图是一个对照关系:
可以给控件添加left/right/top/bottom/size/height/width/insert约束;
库提供了三个方法,mas_makeConstraints添加约束,mas_updateConstraints修改约束,mas_remakeConstraints清除以前约束并添加新约束;
可以通过view.mas_bottom获得view的某个约束;
在约束的block中,使用make来给当前控件添加约束。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具

我要回帖

更多关于 ios webview 适配宽度 的文章

 

随机推荐