第三方库Masonry初步使用

代码加限制应该写在哪里?

@implementation DIYCustomView

- (id)init {
    self = [super init];
    if (!self) return nil;

    // --- Create your views here ---
    self.button = [[UIButton alloc] init];

    return self;
}

// tell UIKit that you are using AutoLayout
+ (BOOL)requiresConstraintBasedLayout {
    return YES;
}

// this is Apple's recommended place for adding/updating constraints
- (void)updateConstraints {

    // --- remake/update constraints here
    [self.button remakeConstraints:^(MASConstraintMaker *make) {
        make.width.equalTo(@(self.buttonSize.width));
        make.height.equalTo(@(self.buttonSize.height));
    }];

    //according to apple super should be called at end of method
    [super updateConstraints];
}

- (void)didTapButton:(UIButton *)button {
    // --- Do your changes ie change variables that affect your layout etc ---
    self.buttonSize = CGSize(200, 200);

    // tell constraints they need updating
    [self setNeedsUpdateConstraints];
}

@end

几个特殊的地方

- (MASConstraint *)with {
    return self;
}

- (MASConstraint *)and {
    return self;
}
  • 理解并习惯使用edges(边缘),Masonry中的例子代码。right和bottom在其他对应的使用场景是负数,这点要理解.
UIEdgeInsets padding = UIEdgeInsetsMake(10, 10, 10, 10);
[view1 mas_makeConstraints:^(MASConstraintMaker *make) {
    make.edges.equalTo(superview).with.insets(padding);
}];

这里的edges其实就是相当于其他布局里的padding概念,就是内边距。UIEdgeInsets是iOS中的数据类型,参数顺序是上,左,下,右,就是按照逆时针旋转。

  • 至于margin,是外边距,用的地方就比较少,除非必要,还是不要多此一举了。
// View+MASAdditions.h

#if TARGET_OS_IPHONE || TARGET_OS_TV

@property (nonatomic, strong, readonly) MASViewAttribute *mas_leftMargin;
@property (nonatomic, strong, readonly) MASViewAttribute *mas_rightMargin;
@property (nonatomic, strong, readonly) MASViewAttribute *mas_topMargin;
@property (nonatomic, strong, readonly) MASViewAttribute *mas_bottomMargin;
@property (nonatomic, strong, readonly) MASViewAttribute *mas_leadingMargin;
@property (nonatomic, strong, readonly) MASViewAttribute *mas_trailingMargin;
@property (nonatomic, strong, readonly) MASViewAttribute *mas_centerXWithinMargins;
@property (nonatomic, strong, readonly) MASViewAttribute *mas_centerYWithinMargins;

#endif
  • 很多场景是对应于父view的位置,父view对象在很多场合可以省略。mas_开头的函数,是装箱BOX操作,其实就是把数字包装为对象。所以,在方便的地方,可以省略,直接上数字,就像在IB中使用那样。上面那段代码,可以简写为:
UIEdgeInsets padding = UIEdgeInsetsMake(10, 10, 10, 10);
[view1 mas_makeConstraints:^(MASConstraintMaker *make) {
    make.edges.mas_equalTo(0).with.insets(padding);
}];
  • leading与left;trailing与right 在正常情况下是等价的 但是当一些布局是从右至左时则会对调。换句话说就是基本可以不理不用 ,用left和right就好了。

  • size和offset也是常用的,比较方便。对于offset,在right和bottom的情况,要注意用负数。整体上还是要遵照iOS左上角原点,向右、向下生长的布局坐标系。按这个思路,就方便知道该用正数还是用负数。另外,能用mas_offset的地方,就尽量用,毕竟方便。

  • view1.translatesAutoresizingMaskIntoConstraints = NO;对于启用autolayout还是必要的,不过这句话已经写在Masonry中了,使用的时候不需要操心。

  • 至于修改和移除限制,用另外两个函数,用法基本上也差不多

// View+MASAdditions.h

- (NSArray *)mas_updateConstraints:(void(^)(MASConstraintMaker *make))block;
- (NSArray *)mas_remakeConstraints:(void(^)(MASConstraintMaker *make))block;
  • 关于水平分布和垂直分布,添加正方形(width=height)的占位view是不错的思路。在iOS9中,引入了UIStackView,就是这方面的系统控件,方便使用。

  • 关于UIScrollView,引入containerView,是一个不错的主意。这个控件很特殊。除控件本身需要4个限制条件以为,其内容content view还要额外两个条件(width和height)才能最终确定。在IB中,这个控件的表达是难点。正因为内容和控件本身大小不一致,才产生了滑动的概念。而tableView,只需要控件本身的4个条件就可以了,内容在其代理中指明。这两者的区别一定要清楚,不然会觉得很奇怪。

  • 苹果为了autolayout而推出的VFL,个人认为是很大的失败,不值得去学。体验不好,就算Apple又怎么样?照样被抨击!类似的例子还是有autolayout,KVO,collectionView的API,设计得都很差。强烈期望Apple能长点脑子,把这些API改得好用一点。

  • 还有一篇文章,关于Label的使用例子介绍的不错。有趣的Autolayout示例-Masonry实现

  • Content Compression Resistance = 不许挤我!
    这个属性说白了就是“不许挤我”。这个属性的优先级(Priority)越高,越不“容易”被压缩。也就是说,当整体的空间装不下所有的View的时候,Content Compression Resistance优先级越高的,显示的内容越完整。

  • Content Hugging = 抱紧!
    这个属性的优先级越高,整个View就要越“抱紧”View里面的内容。也就是View的大小不会随着父级View的扩大而扩大。

这两个属性在Masonry中没有找到相应的函数,以下两个是系统的API

//设置label1的content hugging 为1000
[_label1 setContentHuggingPriority:UILayoutPriorityRequired
                           forAxis:UILayoutConstraintAxisHorizontal];

//设置label1的content compression 为1000
[_label1 setContentCompressionResistancePriority:UILayoutPriorityRequired
                                         forAxis:UILayoutConstraintAxisHorizontal];

//设置右边的label2的content hugging 为1000
[_label2 setContentHuggingPriority:UILayoutPriorityRequired
                           forAxis:UILayoutConstraintAxisHorizontal];

//设置右边的label2的content compression 为250
[_label2 setContentCompressionResistancePriority:UILayoutPriorityDefaultLow
                                         forAxis:UILayoutConstraintAxisHorizontal];

当然,Masonry可以给限制条件一个权限值,比如:

make.left.greaterThanOrEqualTo(label.mas_left).with.priorityLow();

make.top.equalTo(label.mas_top).with.priority(600);
  • 通过父view来决定子view的位置大小是很正常的事,不过,也可以反过来,通过子view的内容来决定父view的大小。Label和TextView就很可能遇到这种情况。

  • 一般需要4个限制条件决定一个view的位置和大小。对于imageView和Label这种内容决定大小的控件来说,只要2个条件指定位置就可以了,大小可以自适应。如果图片来自网络,那么还是额外添加2个表示大小的限制比较好,谁知道网络会传过来怎么样的图片。

关于源码解读

这里有一篇文章介绍iOS 源代码分析----Masonry

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

推荐阅读更多精彩内容