第三方类库masonry（自动布局）的使用

环境信息：

Mac OS X 10.10.3
Xcode 6.3
iOS 8.3

正文：

前期准备：

<code class="markdown" style="padding: 0px; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 12px; border: none; background-color: transparent;"><span class="hljs-bullet">1. </span>下载Masonry并导入到工程中；<span class="hljs-bullet">2. </span>将Masonry.h导入当前控制器。</code>

案例一：

要求：
无论在什么尺寸的设备上（包括横竖屏切换），红色view都居中显示。

案例一

实现：

<code class="objectivec" style="padding: 0px; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 12px; border: none; background-color: transparent;"><span class="hljs-preprocessor" style="color: rgb(203, 75, 22);">#import <span class="hljs-title" style="color: rgb(38, 139, 210);">"ViewController.h"</span></span><span class="hljs-preprocessor" style="color: rgb(203, 75, 22);">#import <span class="hljs-title" style="color: rgb(38, 139, 210);">"Masonry.h"</span></span><span class="hljs-class"><span class="hljs-keyword" style="color: rgb(133, 153, 0);">@interface</span> <span class="hljs-title" style="color: rgb(181, 137, 0);">ViewController</span> ()</span><span class="hljs-keyword" style="color: rgb(133, 153, 0);">@end</span><span class="hljs-class"><span class="hljs-keyword" style="color: rgb(133, 153, 0);">@implementation</span> <span class="hljs-title" style="color: rgb(181, 137, 0);">ViewController</span></span>- (<span class="hljs-keyword" style="color: rgb(133, 153, 0);">void</span>)viewDidLoad { [<span class="hljs-keyword" style="color: rgb(133, 153, 0);">super</span> viewDidLoad]; <span class="hljs-comment" style="color: rgb(147, 161, 161);">// 防止block中的循环引用 </span>__<span class="hljs-keyword" style="color: rgb(133, 153, 0);">weak</span> <span class="hljs-keyword" style="color: rgb(133, 153, 0);">typeof</span>(<span class="hljs-keyword" style="color: rgb(133, 153, 0);">self</span>) weakSelf = <span class="hljs-keyword" style="color: rgb(133, 153, 0);">self</span>; <span class="hljs-comment" style="color: rgb(147, 161, 161);">// 初始化view并设置背景 </span><span class="hljs-built_in" style="color: rgb(38, 139, 210);">UIView</span> *view = [<span class="hljs-built_in" style="color: rgb(38, 139, 210);">UIView</span> new]; view<span class="hljs-variable" style="color: rgb(181, 137, 0);">.backgroundColor</span> = [<span class="hljs-built_in" style="color: rgb(38, 139, 210);">UIColor</span> redColor]; [<span class="hljs-keyword" style="color: rgb(133, 153, 0);">self</span><span class="hljs-variable" style="color: rgb(181, 137, 0);">.view</span> addSubview:view]; <span class="hljs-comment" style="color: rgb(147, 161, 161);">// 使用mas_makeConstraints添加约束</span> [view mas_makeConstraints:^(MASConstraintMaker *make) { <span class="hljs-comment" style="color: rgb(147, 161, 161);">// 添加大小约束（make就是要添加约束的控件view）</span> make<span class="hljs-variable" style="color: rgb(181, 137, 0);">.size</span><span class="hljs-variable" style="color: rgb(181, 137, 0);">.mas_equalTo</span>(<span class="hljs-built_in" style="color: rgb(38, 139, 210);">CGSizeMake</span>(<span class="hljs-number" style="color: rgb(42, 161, 152);">100</span>, <span class="hljs-number" style="color: rgb(42, 161, 152);">100</span>)); <span class="hljs-comment" style="color: rgb(147, 161, 161);">// 添加居中约束（居中方式与self相同）</span> make<span class="hljs-variable" style="color: rgb(181, 137, 0);">.center</span><span class="hljs-variable" style="color: rgb(181, 137, 0);">.equalTo</span>(weakSelf<span class="hljs-variable" style="color: rgb(181, 137, 0);">.view</span>); }];}<span class="hljs-keyword" style="color: rgb(133, 153, 0);">@end</span></code>

案例二：

要求：

1. 无论在什么尺寸的设备上（包括横竖屏切换），黑色view的左、上边距、大小都不变；
2. 灰色view的右边距不变
3. 宽、高、上边距黑色view相等
   
   
   

   案例二

实现：

<code class="objectivec" style="padding: 0px; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 12px; border: none; background-color: transparent;"><span class="hljs-preprocessor" style="color: rgb(203, 75, 22);">#import <span class="hljs-title" style="color: rgb(38, 139, 210);">"ViewController2.h"</span></span><span class="hljs-preprocessor" style="color: rgb(203, 75, 22);">#import <span class="hljs-title" style="color: rgb(38, 139, 210);">"Masonry.h"</span></span><span class="hljs-class"><span class="hljs-keyword" style="color: rgb(133, 153, 0);">@interface</span> <span class="hljs-title" style="color: rgb(181, 137, 0);">ViewController2</span> ()</span><span class="hljs-keyword" style="color: rgb(133, 153, 0);">@end</span><span class="hljs-class"><span class="hljs-keyword" style="color: rgb(133, 153, 0);">@implementation</span> <span class="hljs-title" style="color: rgb(181, 137, 0);">ViewController2</span></span>- (<span class="hljs-keyword" style="color: rgb(133, 153, 0);">void</span>)viewDidLoad { [<span class="hljs-keyword" style="color: rgb(133, 153, 0);">super</span> viewDidLoad];  <span class="hljs-built_in" style="color: rgb(38, 139, 210);">UIView</span> *blackView = [<span class="hljs-built_in" style="color: rgb(38, 139, 210);">UIView</span> new]; blackView<span class="hljs-variable" style="color: rgb(181, 137, 0);">.backgroundColor</span> = [<span class="hljs-built_in" style="color: rgb(38, 139, 210);">UIColor</span> blackColor]; [<span class="hljs-keyword" style="color: rgb(133, 153, 0);">self</span><span class="hljs-variable" style="color: rgb(181, 137, 0);">.view</span> addSubview:blackView]; <span class="hljs-comment" style="color: rgb(147, 161, 161);">// 给黑色view添加约束 </span>[blackView mas_makeConstraints:^(MASConstraintMaker *make) { <span class="hljs-comment" style="color: rgb(147, 161, 161);">// 添加大小约束 make.size.mas_equalTo(CGSizeMake(100, 100));</span> <span class="hljs-comment" style="color: rgb(147, 161, 161);">// 添加左、上边距约束（左、上约束都是20）</span> make<span class="hljs-variable" style="color: rgb(181, 137, 0);">.left</span><span class="hljs-variable" style="color: rgb(181, 137, 0);">.and</span><span class="hljs-variable" style="color: rgb(181, 137, 0);">.top</span><span class="hljs-variable" style="color: rgb(181, 137, 0);">.mas_equalTo</span>(<span class="hljs-number" style="color: rgb(42, 161, 152);">20</span>); }]; <span class="hljs-comment" style="color: rgb(147, 161, 161);">// 初始化灰色view UIView *grayView = [UIView new]; </span>grayView<span class="hljs-variable" style="color: rgb(181, 137, 0);">.backgroundColor</span> = [<span class="hljs-built_in" style="color: rgb(38, 139, 210);">UIColor</span> lightGrayColor]; [<span class="hljs-keyword" style="color: rgb(133, 153, 0);">self</span><span class="hljs-variable" style="color: rgb(181, 137, 0);">.view</span> addSubview:grayView]; <span class="hljs-comment" style="color: rgb(147, 161, 161);">// 给灰色view添加约束</span> [grayView mas_makeConstraints:^(MASConstraintMaker *make) { <span class="hljs-comment" style="color: rgb(147, 161, 161);">// 大小、上边距约束与黑色view相同 </span>make<span class="hljs-variable" style="color: rgb(181, 137, 0);">.size</span><span class="hljs-variable" style="color: rgb(181, 137, 0);">.and</span><span class="hljs-variable" style="color: rgb(181, 137, 0);">.top</span><span class="hljs-variable" style="color: rgb(181, 137, 0);">.equalTo</span>(blackView); <span class="hljs-comment" style="color: rgb(147, 161, 161);">// 添加右边距约束</span>（这里的间距是有方向性的，左、上边距约束为正数，右、下边距约束为负数） make<span class="hljs-variable" style="color: rgb(181, 137, 0);">.right</span><span class="hljs-variable" style="color: rgb(181, 137, 0);">.mas_equalTo</span>(-<span class="hljs-number" style="color: rgb(42, 161, 152);">20</span>); }];}<span class="hljs-keyword" style="color: rgb(133, 153, 0);">@end</span></code>

在上面的案例中，涉及以下内容：

1. 在Masonry中，and,with都没有具体操作，仅仅是为了提高程序的可读性
   make.left.and.top.mas_equalTo(20);
   等价于
   make.left.top.mas_equalTo(20);

2. equalTo与mas_equalTo
   如果约束条件是数值或者结构体等类型，可以使用mas_equalTo进行包装。关于这个问题，我也不是很清楚，可以看看官方的解释：

   <code class="sql" style="padding: 0px; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 12px; border: none; background-color: transparent;">Instead of using NSNumber, you can <span class="hljs-operator"><span class="hljs-keyword" style="color: rgb(133, 153, 0);">use</span> primitives <span class="hljs-keyword" style="color: rgb(133, 153, 0);">and</span> structs <span class="hljs-keyword" style="color: rgb(133, 153, 0);">to</span> <span class="hljs-keyword" style="color: rgb(133, 153, 0);">build</span> your <span class="hljs-keyword" style="color: rgb(133, 153, 0);">constraints</span>.<span class="hljs-keyword" style="color: rgb(133, 153, 0);">By</span> <span class="hljs-keyword" style="color: rgb(133, 153, 0);">default</span>,macros which support autoboxing <span class="hljs-keyword" style="color: rgb(133, 153, 0);">are</span> prefixed <span class="hljs-keyword" style="color: rgb(133, 153, 0);">with</span> mas_.Unprefixed <span class="hljs-keyword" style="color: rgb(133, 153, 0);">versions</span> <span class="hljs-keyword" style="color: rgb(133, 153, 0);">are</span> available <span class="hljs-keyword" style="color: rgb(133, 153, 0);">by</span> defining MAS_SHORTHAND_GLOBALS<span class="hljs-keyword" style="color: rgb(133, 153, 0);">before</span> importing Masonry.</span></code>

   我一般将数值类型的约束用mas_equalTo，而相对于某个控件，或者某个控件的某个约束，我会使用equalTo，如：
   make.size.mas_equalTo(CGSizeMake(100, 100));make.center.equalTo(weakSelf.view);

案例三：

要求：

1. 有两个view，黑色与灰色；
2. 黑色view的左、上、右边距均为20，下边距灰色view 20，宽度自适应，高度与灰色view平分整个界面；
3. 灰色view宽度为黑色view的一半（即左边以中线起始），右、下边距与黑色view相同，高度与黑色view相同。
   
   
   

   案例三

实现：

<code class="objectivec" style="padding: 0px; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 12px; border: none; background-color: transparent;"><span class="hljs-preprocessor" style="color: rgb(203, 75, 22);">#import <span class="hljs-title" style="color: rgb(38, 139, 210);">"ViewController3.h"</span></span><span class="hljs-preprocessor" style="color: rgb(203, 75, 22);">#import <span class="hljs-title" style="color: rgb(38, 139, 210);">"Masonry.h"</span></span><span class="hljs-class"><span class="hljs-keyword" style="color: rgb(133, 153, 0);">@interface</span> <span class="hljs-title" style="color: rgb(181, 137, 0);">ViewController3</span> ()</span><span class="hljs-keyword" style="color: rgb(133, 153, 0);">@end</span><span class="hljs-class"><span class="hljs-keyword" style="color: rgb(133, 153, 0);">@implementation</span> <span class="hljs-title" style="color: rgb(181, 137, 0);">ViewController3</span></span>- (<span class="hljs-keyword" style="color: rgb(133, 153, 0);">void</span>)viewDidLoad { [<span class="hljs-keyword" style="color: rgb(133, 153, 0);">super</span> viewDidLoad];   <span class="hljs-built_in" style="color: rgb(38, 139, 210);">UIView</span> *blackView = [<span class="hljs-built_in" style="color: rgb(38, 139, 210);">UIView</span> new]; blackView<span class="hljs-variable" style="color: rgb(181, 137, 0);">.backgroundColor</span> = [<span class="hljs-built_in" style="color: rgb(38, 139, 210);">UIColor</span> blackColor]; [<span class="hljs-keyword" style="color: rgb(133, 153, 0);">self</span><span class="hljs-variable" style="color: rgb(181, 137, 0);">.view</span> addSubview:blackView]; <span class="hljs-comment" style="color: rgb(147, 161, 161);">// 给黑色view添加约束 </span>[blackView mas_makeConstraints:^(MASConstraintMaker *make) { <span class="hljs-comment" style="color: rgb(147, 161, 161);">// 添加左、上边距约束 make.left.and.top.mas_equalTo(20);</span> <span class="hljs-comment" style="color: rgb(147, 161, 161);">// 添加右边距约束 </span>make<span class="hljs-variable" style="color: rgb(181, 137, 0);">.right</span><span class="hljs-variable" style="color: rgb(181, 137, 0);">.mas_equalTo</span>(-<span class="hljs-number" style="color: rgb(42, 161, 152);">20</span>); }]; view <span class="hljs-built_in" style="color: rgb(38, 139, 210);">UIView</span> *grayView = [<span class="hljs-built_in" style="color: rgb(38, 139, 210);">UIView</span> new]; grayView<span class="hljs-variable" style="color: rgb(181, 137, 0);">.backgroundColor</span> = [<span class="hljs-built_in" style="color: rgb(38, 139, 210);">UIColor</span> lightGrayColor]; [<span class="hljs-keyword" style="color: rgb(133, 153, 0);">self</span><span class="hljs-variable" style="color: rgb(181, 137, 0);">.view</span> addSubview:grayView]; <span class="hljs-comment" style="color: rgb(147, 161, 161);">// 给灰色view添加约束</span> [grayView mas_makeConstraints:^(MASConstraintMaker *make) { <span class="hljs-comment" style="color: rgb(147, 161, 161);">// 添加右、下边距约束 make.bottom.and.right.mas_equalTo(-20); </span><span class="hljs-comment" style="color: rgb(147, 161, 161);">// 添加高度约束，让高度等于blackview </span>make<span class="hljs-variable" style="color: rgb(181, 137, 0);">.height</span><span class="hljs-variable" style="color: rgb(181, 137, 0);">.equalTo</span>(blackView); <span class="hljs-comment" style="color: rgb(147, 161, 161);">// 添加上边距约束（上边距 = 黑色view的下边框 + 偏移量20） </span>make<span class="hljs-variable" style="color: rgb(181, 137, 0);">.top</span><span class="hljs-variable" style="color: rgb(181, 137, 0);">.equalTo</span>(blackView<span class="hljs-variable" style="color: rgb(181, 137, 0);">.mas_bottom</span>)<span class="hljs-variable" style="color: rgb(181, 137, 0);">.offset</span>(<span class="hljs-number" style="color: rgb(42, 161, 152);">20</span>); <span class="hljs-comment" style="color: rgb(147, 161, 161);">// 添加左边距（左边距 = 父容器纵轴中心 + 偏移量0） </span>make<span class="hljs-variable" style="color: rgb(181, 137, 0);">.left</span><span class="hljs-variable" style="color: rgb(181, 137, 0);">.equalTo</span>(weakSelf<span class="hljs-variable" style="color: rgb(181, 137, 0);">.view</span><span class="hljs-variable" style="color: rgb(181, 137, 0);">.mas_centerX</span>)<span class="hljs-variable" style="color: rgb(181, 137, 0);">.offset</span>(<span class="hljs-number" style="color: rgb(42, 161, 152);">0</span>); }];}<span class="hljs-keyword" style="color: rgb(133, 153, 0);">@end</span></code>

案例四：

要求：
当键盘挡住输入框时，输入框自动向上弹到键盘上方。
实现：
这里需要使用到Masonry的另外一个方法mas_updateConstraints。这个方法用于更新控件约束。
具体的实现方式可以下载Demo来看，这里只贴出键盘弹出时的处理代码：

<code class="objectivec" style="padding: 0px; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 12px; border: none; background-color: transparent;">- (<span class="hljs-keyword" style="color: rgb(133, 153, 0);">void</span>)keyboardWillChangeFrameNotification:(<span class="hljs-built_in" style="color: rgb(38, 139, 210);">NSNotification</span> *)notification { <span class="hljs-comment" style="color: rgb(147, 161, 161);">// 获取键盘基本信息（动画时长与键盘高度）</span> <span class="hljs-built_in" style="color: rgb(38, 139, 210);">NSDictionary</span> *userInfo = [notification userInfo]; <span class="hljs-built_in" style="color: rgb(38, 139, 210);">CGRect</span> rect = [userInfo[<span class="hljs-built_in" style="color: rgb(38, 139, 210);">UIKeyboardFrameBeginUserInfoKey</span>] <span class="hljs-built_in" style="color: rgb(38, 139, 210);">CGRectValue</span>]; <span class="hljs-built_in" style="color: rgb(38, 139, 210);">CGFloat</span> keyboardHeight = <span class="hljs-built_in" style="color: rgb(38, 139, 210);">CGRectGetHeight</span>(rect); <span class="hljs-built_in" style="color: rgb(38, 139, 210);">CGFloat</span> keyboardDuration = [userInfo[<span class="hljs-built_in" style="color: rgb(38, 139, 210);">UIKeyboardAnimationDurationUserInfoKey</span>] doubleValue]; <span class="hljs-comment" style="color: rgb(147, 161, 161);">// 修改下边距约束</span> [_textField mas_updateConstraints:^(MASConstraintMaker *make) { make<span class="hljs-variable" style="color: rgb(181, 137, 0);">.bottom</span><span class="hljs-variable" style="color: rgb(181, 137, 0);">.mas_equalTo</span>(-keyboardHeight); }]; <span class="hljs-comment" style="color: rgb(147, 161, 161);">// 更新约束</span> [<span class="hljs-built_in" style="color: rgb(38, 139, 210);">UIView</span> animateWithDuration:keyboardDuration animations:^{ [<span class="hljs-keyword" style="color: rgb(133, 153, 0);">self</span><span class="hljs-variable" style="color: rgb(181, 137, 0);">.view</span> layoutIfNeeded]; }];}</code>

总结：

1. 可以给控件添加left/right/top/bottom/size/height/width/insert约束；
2. 库提供了三个方法，mas_makeConstraints添加约束，mas_updateConstraints修改约束，mas_remakeConstraints清除以前约束并添加新约束；
3. 可以通过view.mas_bottom获得view的某个约束；
4. 在约束的block中，使用make来给当前控件添加约束。