关闭

iOS中的Masonry纯代码适配屏幕例子

644人阅读 评论(0) 收藏 举报
分类:

文章来自http://www.brighttj.com/ios/ios-masonry-demo.html#comment-353

如果说自动布局解救了多屏幕适配,那众多三方库的出现就解救了系统自动布局的写法。Masonry就是其中一个。
在Github上,Masonry已经得到6000+个star,用法上也比较简单灵活,很大程度上替代了传统的NSLayoutConstraint布局方式。本文将利用几个案例来讲解Masonry的使用。
Masonry下载地址:
https://github.com/SnapKit/Masonry

本文Demo下载地址:
https://github.com/saitjr/MasonryDemo.git

环境信息:

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来给当前控件添加约束。
  • Masonry介绍与使用实践(快速上手Autolayout)
      — 前言1MagicNumber -> autoresizingMask -> autolayout 以上是纯手写代码所经历的关于页面布局的三个时期 在iphone1-iphone3gs时代 window的size固定为(320,480) 我们只需要简单计算一下相对位置就好了 在iphone4-iphone4s时代 苹果推出了retina屏 但是给了码农们非常大的福利:window的s
    HYY・ adad184.com →
  • 有趣的Autolayout示例-Masonry实现
      — 前言好久没有写Blog了,这段时间有点忙啊=。=本文举了3个比较有“特点”的Autolayout例子,源于微博上好友的提问,感觉比较有意思,也比较有代表性,就写了出来,分享给大家~至于为什么用Masonry,那是因为它好用啊!(被问到过有关Masonry的问题,就索性用它来实现吧=。=)。 效果图 Github地址https://github.com/zekunyan/AutolayoutExam
    HYY・ tutuge.me →
0
0

猜你在找
【直播】机器学习&数据挖掘7周实训--韦玮
【套餐】系统集成项目管理工程师顺利通关--徐朋
【直播】3小时掌握Docker最佳实战-徐西宁
【套餐】机器学习系列套餐(算法+实战)--唐宇迪
【直播】计算机视觉原理及实战--屈教授
【套餐】微信订阅号+服务号Java版 v2.0--翟东平
【直播】机器学习之矩阵--黄博士
【套餐】微信订阅号+服务号Java版 v2.0--翟东平
【直播】机器学习之凸优化--马博士
【套餐】Javascript 设计模式实战--曾亮
查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:885次
    • 积分:20
    • 等级:
    • 排名:千里之外
    • 原创:1篇
    • 转载:1篇
    • 译文:0篇
    • 评论:0条
    文章分类
    文章存档