Masonry - Autolayout 第三方自动布局类  归纳

原创 2015年11月20日 20:43:03
页面布局的三个时期
MagicNumber -> autoresizingMask -> autolayout
链式的自然语言

一.添加约束的方法:

首先在Masonry中能够添加autolayout约束有三个函数

1
2
3
4
5
6
7
8
9
- (NSArray *)mas_makeConstraints:(void(^)(MASConstraintMaker *make))block;
- (NSArray *)mas_updateConstraints:(void(^)(MASConstraintMaker *make))block;
- (NSArray *)mas_remakeConstraints:(void(^)(MASConstraintMaker *make))block;
/*
mas_makeConstraints 只负责新增约束 Autolayout不能同时存在两条针对于同一对象的约束 否则会报错 
mas_updateConstraints 针对上面的情况 会更新在block中出现的约束 不会导致出现两个相同约束的情况
mas_remakeConstraints 则会清除之前的所有约束 仅保留最新的约束
三种函数善加利用 就可以应对各种情况了
*/


二.支持的属性

1
2
3
4
5
6
7
8
9
10
11
@property (nonatomic, strong, readonly) MASConstraint *left;
@property (nonatomic, strong, readonly) MASConstraint *top;
@property (nonatomic, strong, readonly) MASConstraint *right;
@property (nonatomic, strong, readonly) MASConstraint *bottom;
@property (nonatomic, strong, readonly) MASConstraint *leading;
@property (nonatomic, strong, readonly) MASConstraint *trailing;
@property (nonatomic, strong, readonly) MASConstraint *width;
@property (nonatomic, strong, readonly) MASConstraint *height;
@property (nonatomic, strong, readonly) MASConstraint *centerX;
@property (nonatomic, strong, readonly) MASConstraint *centerY;
@property (nonatomic, strong, readonly) MASConstraint *baseline;


三.符合约束
这样的简便的方法可以很快捷的创建多个约束在同一时间 更加高效
edges(边缘)
// make top, left, bottom, right equal view2
make.edges.equalTo(view2);

// make top = superview.top + 5, left = superview.left + 10,
//      bottom = superview.bottom - 15, right = superview.right - 20
make.edges.equalTo(superview).insets(UIEdgeInsetsMake(5, 10, 15, 20))

size

// make width and height greater than or equal to titleLabel
make.size.greaterThanOrEqualTo(titleLabel)

// make width = superview.width + 100, height = superview.height - 50
make.size.equalTo(superview).sizeOffset(CGSizeMake(100, -50))

center


// make centerX and centerY = button1
make.center.equalTo(button1)

// make centerX = superview.centerX - 5, centerY = superview.centerY + 10
make.center.equalTo(superview).centerOffset(CGPointMake(-510))

四.比较语法比较语法(等于 小于 大于)

.equalTo equivalent to NSLayoutRelationEqual

.lessThanOrEqualTo equivalent to NSLayoutRelationLessThanOrEqual


.greaterThanOrEqualTo equivalent to NSLayoutRelationGreaterThanOrEqual

支持比较语法的参数类型:
1. MASViewAttribute
eg:make.centerX.lessThanOrEqualTo(view2.mas_left);
MASViewAttribute NSLayoutAttribute
view.mas_left NSLayoutAttributeLeft
view.mas_right NSLayoutAttributeRight
view.mas_top NSLayoutAttributeTop
view.mas_bottom NSLayoutAttributeBottom
view.mas_leading NSLayoutAttributeLeading
view.mas_trailing NSLayoutAttributeTrailing
view.mas_width NSLayoutAttributeWidth
view.mas_height NSLayoutAttributeHeight
view.mas_centerX NSLayoutAttributeCenterX
view.mas_centerY NSLayoutAttributeCenterY
view.mas_baseline NSLayoutAttributeBaseline

2. UIView/NSView
eg:if you want view.left to be greater than or equal to label.left :
//these two constraints are exactly the same
make.left.greaterThanOrEqualTo(label);
make.left.greaterThanOrEqualTo(label.mas_left);
3. NSNumber
注意:Auto Layout allows width and height to be set to constant values.(允许宽高使用NSNumber) if you want to set view to have a minimum and maximum width you could pass a number to the equality blocks:
//width >= 200 && width <= 400
make.width.greaterThanOrEqualTo(@200);
make.width.lessThanOrEqualTo(@400)
However Auto Layout does not allow alignment attributes such as left, right, centerY etc to be set to constant values.(不允许其他属性使用NSNumber) So if you pass a NSNumber for these attributes Masonry will turn these into constraints relative to the view’s superview i.e.:(使用NSNumber,这些属性体将把这些变成约束相对于视图的父视图)
//creates view.left = view.superview.left + 10
make.left.lessThanOrEqualTo(@10)

面对上面情况的解决办法:
Instead of using NSNumber, you can use primitives and structs to build your constraints,(使用原始语句或者自己构建约束) like so:
make.top.mas_equalTo(42);
make.height.mas_equalTo(20);
make.size.mas_equalTo(CGSizeMake(50, 100));
make.edges.mas_equalTo(UIEdgeInsetsMake(10, 0, 10, 0));
make.left.mas_equalTo(view).mas_offset(UIEdgeInsetsMake(10, 0, 10, 0));

By default, macros which support autoboxing are prefixed with mas_. Unprefixed versions are available by defining MAS_SHORTHAND_GLOBALS before importing Masonry.
默认情况下,宏支持autoboxing与mas_前缀。无前缀的版本可以通过定义MAS_SHORTHAND_GLOBALS之前输入约束

4. NSArray
An array of a mixture of any of the previous types(数组是之前类型的混合)
make.height.equalTo(@[view1.mas_height, view2.mas_height]);
make.height.equalTo(@[view1, view2]);
make.left.equalTo(@[view1, @100, view3.right]);


五.优先级prioritize(优先级)

 

.priority allows you to specify an exact priority

.priorityHigh equivalent to(等效) UILayoutPriorityDefaultHigh(优先级高)

.priorityMedium is half way between high and low(高低的一半)

.priorityLow equivalent to UILayoutPriorityDefaultLow(优先级低)

Priorities are can be tacked on to the end of a constraint chain like so:

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

make.top.equalTo(label.mas_top).with.priority(600);


六.更新约束

1. References 引用

You can hold on to a reference of a constraint by assigning the result of a constraint make expression to a local variable or a class property. You could also reference multiple constraints by storing them away in an array.
你可以坚持一个引用特定约束条件的约束使表达式的结果来分配给一个局部变量或一个类属性。你也可以引用多个约束将它们存储在一个数组中。

// in public/private interface
@property (nonatomic, strong) MASConstraint *topConstraint;

...

// when making constraints
[view1 mas_makeConstraints:^(MASConstraintMaker *make) {
    self.topConstraint = make.top.equalTo(superview.mas_top).with.offset(padding.top);
    make.left.equalTo(superview.mas_left).with.offset(padding.left);
}];

...
// then later you can call
[self.topConstraint uninstall];


2. mas_updateConstraints  (更新)
Alternatively if you are only updating the constant value of the constraint you can use the convience method mas_updateConstraints instead of mas_makeConstraints
另外,如果只需要更新约束的值可以使用约束方法来mas_updateConstraints代替mas_makeConstraints
// this is Apple's recommended place for adding/updating constraints
// this method can get called multiple times in response to setNeedsUpdateConstraints
// which can be called by UIKit internally or in your code if you need to trigger an update to your constraints
- (void)updateConstraints {
    [self.growingButton mas_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];//调用父类方法
}

3. mas_remakeConstraints

mas_updateConstraints is useful for updating a set of constraints, but doing anything beyond updating constant values can get exhausting. That's where mas_remakeConstraints comes in.


mas_remakeConstraints is similar to mas_updateConstraints(两者很相似), but instead of updating constant values, it will remove all of its contraints before installing them again. This lets you provide different constraints without having to keep around references to ones which you want to remove.(mas_remakeConstraints is similar to mas_updateConstraints 两者很相似,除了更新约束的值, mas_remakeConstraints还将在安装新的约束之前移除它的所有约束.这样让你可以提供不同的约束时也不用必须保存那些你要移除的引用)
- (void)changeButtonPosition {
    [self.button mas_remakeConstraints:^(MASConstraintMaker *make) {
        make.size.equalTo(self.buttonSize);

        if (topLeft) {
            make.top.and.left.offset(10);
        } else {
            make.bottom.and.right.offset(-10);
        }
    }];
}



七. 特征

//优化控制台调试可视度

(Masonry 重写了NSLayoutConstraint的description方法 这样可以很容易修改控制台打印的数据 不会出现上面的林乱情况- (NSString *)description)

eg:

Unable to simultaneously satisfy constraints......blah blah blah....
(
    "<NSAutoresizingMaskLayoutConstraint:0x8887740 MASExampleDebuggingView:superview.height == 416>",
    "<MASLayoutConstraint:ConstantConstraint UILabel:messageLabel.height >= 5000>",
    "<MASLayoutConstraint:BottomConstraint UILabel:messageLabel.bottom == MASExampleDebuggingView:superview.bottom - 10>",
    "<MASLayoutConstraint:ConflictingConstraint[0] UILabel:messageLabel.top == MASExampleDebuggingView:superview.top + 1>"
)

Will attempt to recover by breaking constraint
<MASLayoutConstraint:ConstantConstraint UILabel:messageLabel.height >= 5000>


安装:

Installation安装 - 使用cocopods安装

Use the orsome CocoaPods.

In your Podfile

pod 'Masonry'

If you want to use masonry without all those pesky 'mas_' prefixes. Add #define MAS_SHORTHAND to your prefix.pch before importing Masonry

#define MAS_SHORTHAND

Get busy Masoning

#import "Masonry.h"



代码片段

Code Snippets

Copy the included code snippets to ~/Library/Developer/Xcode/UserData/CodeSnippets to write your masonry blocks at lightning speed!

mas_make -> [<view> mas_makeConstraints:^(MASConstraintMaker *make){<code>}];

mas_update -> [<view> mas_updateConstraints:^(MASConstraintMaker *make){<code>}];

mas_remake -> [<view> mas_remakeConstraints:^(MASConstraintMaker *make){<code>}];


版权声明:VIC

UIImage高性能圆角绘制,压缩,截屏,帧图片获取,修改原有image底色等各种功能持续更新

UIImage功能大全,持续收录

轻松搞定面试中的链表题目

链表是最基本的数据结构,面试官也常常用链表来考察面试者的基本能力,而且链表相关的操作相对而言比较简单,也适合考察写代码的能力。链表的操作也离不开指针,指针又很容易导致出错。综合多方面的原因,链表题目在...
  • hxl0862
  • hxl0862
  • 2015年08月08日 23:55
  • 257

第三方库Masonry自动布局AutoLayout使用

布局:    1. 放在哪  坐标  CGPoint(x, y)    2. 有多大  尺寸  CGSize(width, height) 布局方式:    1.绝对布局(FrameLayout)也...

iOS界面布局之四——使用第三方库Masonry进行autolayout布局

摘要: Masonry是一个十分优秀的autolayout第三方布局框架。 iOS界面布局之四——使用第三方库Masonry进行autolayout布局 一、引言         在...

iOS界面布局之四——使用第三方库Masonry进行autolayout布局

iOS界面布局之四——使用第三方库Masonry进行autolayout布局 一、引言         在前面博客,我们讨论了使用iOS原生的框架代码来进行autolayout布局。在使用中,我...

自动布局框架Masonry介绍与使用实践:快速上手Autolayout [转载]

前言 1 MagicNumber -> autoresizingMask -> autolayout 以上是纯手写代码...

Autolayout自动布局Masonry初探

现在布局一般都是使用autolayout自动布局,而原生的设置autolayout约束的代码比较繁多,所以一般都会使用第三方框架来简化代码量,常用的第三方框架就是Masonry了。学习下Masonry...

在项目中使用Masonry实现自动布局Autolayout(1)

最近都在研究Autolayout的内容,随着iPhone手机屏幕尺寸的增加,屏幕适配变得尤为重要;适配有多种方式,当然也是可以根据相对位置来适配,但是计算尺寸和代码量可能有些大(如果不嫌麻烦的话);而...

AutoLayout和Masonry两种方式实现自动布局的内容包裹和视图均分

前言这两种方式分别代表了两种人,一种快速布局,直观,但是很多人认为很难维护,后者纯代码布局,老一派的人用起来都说好,反正一说起来就打起来了,一个虽然快,但是难以维护啊,一个虽然写起来很多,但是维护起来...

第三方类库masonry(自动布局)的使用

环境信息: Mac OS X 10.10.3 Xcode 6.3 iOS 8.3 正文: 前期准备: 1. 下载Masonry并导入到工程中; 2. 将Masonry.h导入当...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Masonry - Autolayout 第三方自动布局类  归纳
举报原因:
原因补充:

(最多只允许输入30个字)