iOS Masonry的使用需要注意的地方

iOS Masonry的使用需要注意的地方

自动布局最重要的是约束
:UI元素间关系的数学表达式。约束包括尺寸、由优先级和阈值管理的相对位置。它们是添加剂,可能导致约束冲突
、约束不足造成布局无法确定 。这两种情况都会产生异常。

使用前:AutoLayout关于更新的几个方法的区别

setNeedsLayout
:告知页面需要更新,但是不会立刻开始更新。执行后会立刻调用layoutSubviews。

layoutIfNeeded
:告知页面布局立刻更新。所以一般都会和setNeedsLayout一起使用。如果希望立刻生成新的frame需要调用此方法,利用这点一般布局动画可以在更新布局后直接使用这个方法让动画生效。

layoutSubviews
:系统重写布局

setNeedsUpdateConstraints
:告知需要更新约束,但是不会立刻开始

updateConstraintsIfNeeded
:告知立刻更新约束

updateConstraints
:系统更新约束

使用

  1. 基本使用

mas_makeConstraints
:添加约束

mas_updateConstraints
:更新约束、亦可添加新约束

mas_remakeConstraints
:重置之前的约束

multipler
属性表示约束值为约束对象的乘因数,
dividedBy
属性表示约束值为约束对象的除因数,可用于设置view
的宽高比

//
进行屏幕的适配的时候,往往需要根据屏幕宽度来适配一个相应的高度,在此推荐使用如下约束的方式来进行控件的适配
[self.topView
addSubview:self.topInnerView];

[self.topInnerView mas_makeConstraints:^(MASConstraintMaker *make)
{

make.height.equalTo(self.topView.mas_height).dividedBy(3);

make.width.and.height.lessThanOrEqualTo(self.topView);

make.width.and.height.equalTo(self.topView).with.priorityLow();

make.center.equalTo(self.topView);

}];

priorityLow()
设置约束优先级

define

MAS_SHORTHAND_GLOBALS
使用全局宏定义,可以使equalTo
等效于mas_equalTo

define MAS_SHORTHAND

使用全局宏定义,
可以在调用masonry方法的时候不使用mas_
前缀

// 这里注意到一个地方,就是当使用了这个全局宏定义之后,发现可以有个类NSArray+MASAdditions.h,看了之后发现可以
self.buttonViews = @[ raiseButton, lowerButton, centerButton ];
// 之后可以在updateConstraints 方法中

  • (void)updateConstraints {
    [self.buttonViews updateConstraints:^(MASConstraintMaker *make) {
    make.baseline.equalTo(self.mas_centerY).with.offset(self.offset);
    }];
    [super updateConstraints];
    }

动态修改视图约束:

// 创建视图约束
[blueView mas_makeConstraints:^(MASConstraintMaker *make) {
self.animatableConstraint = make.edges.equalTo(superview).insets(paddingInsets).priorityLow();
]];
// 更改约束 (另一处方法中)
UIEdgeInsets paddingInsets = UIEdgeInsetsMake(padding, padding, padding, padding);
self.animatableConstraint.insets = paddingInsets;
[self layoutIfNeeded];

debug
模式:
// 对某个view添加key值
greenView.mas_key = @"greenView";
// 或者如下顺序
MASAttachKeys(greenView, redView, blueView, superview);
// 同样的对每条约束亦可以添加key
make.height.greaterThanOrEqualTo(@5000).key(@"ConstantConstraint");

preferredMaxLayoutWidth
:
多行label的约束问题

// 已经确认好了位置
// 在layoutSubviews中确认label的preferredMaxLayoutWidth值

  • (void)layoutSubviews {
    [super layoutSubviews];
    // 你必须在 [super layoutSubviews] 调用之后,longLabel的frame有值之后设置preferredMaxLayoutWidth
    self.longLabel.preferredMaxLayoutWidth = self.frame.size.width-100;
    // 设置preferredLayoutWidth后,需要重新布局
    [super layoutSubviews];
    }

scrollView
使用约束的问题:原理通过一个contentView来约束scrollView的contentSize大小,也就是说以子控件的约束条件,来控制父视图的大小

// 1. 控制scrollView大小(显示区域)
[self.scrollView makeConstraints:^(MASConstraintMaker *make) {
make.edges.equalTo(self.view);
}];
// 2. 添加一个contentView到scrollView,并且添加好约束条件
[contentView makeConstraints:^(MASConstraintMaker *make) {
make.edges.equalTo(self.scrollView);
// 注意到此处的宽度约束条件,这个宽度的约束条件是比添加项
make.width.equalTo(self.scrollView);
}];
// 3. 对contentView的子控件做好约束,达到可以控制contentView的大小

新方法:2个或2个以上的控件等间隔排序

/**

  • 多个控件固定间隔的等间隔排列,变化的是控件的长度或者宽度值
  • @param axisType 轴线方向
  • @param fixedSpacing 间隔大小
  • @param leadSpacing 头部间隔
  • @param tailSpacing 尾部间隔
    */
  • (void)mas_distributeViewsAlongAxis:(MASAxisType)axisType
    withFixedSpacing:(CGFloat)fixedSpacing l
    eadSpacing:(CGFloat)leadSpacing
    tailSpacing:(CGFloat)tailSpacing;

/**

  • 多个固定大小的控件的等间隔排列,变化的是间隔的空隙
  • @param axisType 轴线方向
  • @param fixedItemLength 每个控件的固定长度或者宽度值
  • @param leadSpacing 头部间隔
  • @param tailSpacing 尾部间隔
    */
  • (void)mas_distributeViewsAlongAxis:(MASAxisType)axisType
    withFixedItemLength:(CGFloat)fixedItemLength
    leadSpacing:(CGFloat)leadSpacing
    tailSpacing:(CGFloat)tailSpacing;

使用方法很简单,因为它是NSArray的类扩展:

// 创建水平排列图标 arr中放置了2个或连个以上的初始化后的控件
// alongAxis 轴线方向 固定间隔 头部间隔 尾部间隔
[arr mas_distributeViewsAlongAxis:MASAxisTypeHorizontal withFixedSpacing:20 leadSpacing:5 tailSpacing:5];
[arr makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(@60);
make.height.equalTo(@60);
}];

  1. 注意事项

约束视图对象只有在被addSubview
之后,才能给视图添加约束

当你的所有约束都在updateConstraints

内调用的时候,你就需要在此调用此方法,因为updateConstraints
方法是需要触发的

// 调用在view 内部,而不是viewcontroller

  • (BOOL)requiresConstraintBasedLayout {
    return YES;
    }

/**

  • 苹果推荐 约束 增加和修改 放在此方法种
    */
  • (void)updateConstraints {
    [self.growingButton 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);
    }];
    //最后记得回调super方法
    [super updateConstraints];
    }

如果想要约束变换之后实现动画效果,则需要执行如下操作

// 通知需要更新约束,但是不立即执行
[self setNeedsUpdateConstraints];
// 立即更新约束,以执行动态变换
// update constraints now so we can animate the change
[self updateConstraintsIfNeeded];
// 执行动画效果, 设置动画时间
[UIView animateWithDuration:0.4 animations:^{
[self layoutIfNeeded];
}];

自动计算UITableViewCell高度

推荐使用一个库[UITableView-FDTemplateLayoutCell

想法:动态高度的cell, 主要关注的点是什么?

viewController本身不需要知道cell的类型

cell的高度与viewController没有相关性,cell的高度由cell本身来决定

viewController真正做到的是一个

以下是摘抄过来的

主要是UILabel的高度会有变化,所以这里主要是说说label变化时如何处理,设置UILabel的时候注意要设置
preferredMaxLayoutWidth这个宽度,还有ContentHuggingPriority为
UILayoutPriorityRequried

CGFloat maxWidth = [UIScreen mainScreen].bounds.size.width - 10 * 2;

textLabel = [UILabel new];
textLabel.numberOfLines = 0;
textLabel.preferredMaxLayoutWidth = maxWidth;
[self.contentView addSubview:textLabel];

[textLabel mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(statusView.mas_bottom).with.offset(10);
make.left.equalTo(self.contentView).with.offset(10);
make.right.equalTo(self.contentView).with.offset(-10);
make.bottom.equalTo(self.contentView).with.offset(-10);
}];

[_contentLabel setContentHuggingPriority:UILayoutPriorityRequired forAxis:UILayoutConstraintAxisVertical];

如果版本支持最低版本为iOS
8以上的话可以直接利用UITableViewAutomaticDimension在tableview的heightForRowAtIndexPath直接返回即可。

tableView.rowHeight = UITableViewAutomaticDimension;
tableView.estimatedRowHeight = 80; //减少第一次计算量,iOS7后支持

  • (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
    // 只用返回这个!
    return UITableViewAutomaticDimension;
    }

但如果需要兼容iOS
8之前版本的话,就要回到老路子上了,主要是用systemLayoutSizeFittingSize来取高。步骤是先在数据model中添加一个
height的属性用来缓存高,然后在table
view的heightForRowAtIndexPath代理里static一个只初始化一次的Cell实例,然后根据model内容填充数据,最后根
据cell的contentView的systemLayoutSizeFittingSize的方法获取到cell的高。具体代码如下

//在model中添加属性缓存高度
@interface DataModel : NSObject
@property (copy, nonatomic) NSString *text;
@property (assign, nonatomic) CGFloat cellHeight; //缓存高度
@end

  • (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
    static CustomCell *cell;
    //只初始化一次cell
    static dispatch_once_t onceToken;
    dispatch_once(&onceToken, ^{
    cell = [tableView dequeueReusableCellWithIdentifier:NSStringFromClass([CustomCell class])];
    });
    DataModel *model = self.dataArray[(NSUInteger) indexPath.row];
    [cell makeupData:model];

if (model.cellHeight <= 0) {
//使用systemLayoutSizeFittingSize获取高度
model.cellHeight = [cell.contentView systemLayoutSizeFittingSize:UILayoutFittingCompressedSize].height + 1;
}
return model.cellHeight;
}

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,362评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,330评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,247评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,560评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,580评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,569评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,929评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,587评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,840评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,596评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,678评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,366评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,945评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,929评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,165评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,271评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,403评论 2 342

推荐阅读更多精彩内容