iOS自适应布局之Masonry(一)

前言

iPhone 5之前我们对应用布局停留在3.5寸一个屏幕的阶段,当时的安卓屌丝们是多么的羡慕iOS开发,不会被大量的屏幕适配所烦恼。随着iPhone产品的迭代,逐渐出现4寸、4.7寸、5.5寸….,你们说,iphone10+会有多少寸?O(∩_∩)O~

简介

正因为上面说的那样,屏幕的尺寸逐步增多,还沿用以前的方法布局显然是不行的,这时候为布局引进新的结局办法NSAutoLayout,但苹果提供的比较复杂麻烦,所以就有人在此基础上进行封装,而提供一种高效的框架—-Masonary

安装

如何安装框架?还是建议用CocoaPods,这里有我之前写的CocoaPods相关用法

         pod 'Masonry'

使用说明

使用参数功能说明表

开撸

1.居中显示一个View,并能时刻保持比屏幕的宽和高少60像素

UIView *view1=[[UIView alloc]init];

view1.backgroundColor=[UIColor brownColor];

[self.view addSubview:view1];

[view1 mas_makeConstraints:^(MASConstraintMaker *make) {
    make.center.equalTo(self.view);
    make.top.equalTo(self.view).with.offset(30);
    make.left.equalTo(self.view).with.offset(30);
    make.bottom.equalTo(self.view).with.offset(-30);
    make.right.equalTo(self.view).with.offset(-30);
}];

这里需要注意的是:控件用Masonry约束的时候必须先将控件用addSubview加载到父视图中才能进行约束,不然就会造成崩溃。

Masonry中有三个函数

  • (NSArray *)mas_makeConstraints:(void(^)(MASConstraintMaker *make))block;
  • (NSArray *)mas_updateConstraints:(void(^)(MASConstraintMaker *make))block;
  • (NSArray *)mas_remakeConstraints:(void(^)(MASConstraintMaker *make))block;

mas_makeConstraints 只负责增加约束,当对同一个控件两次调用这个函数就会造成崩溃。

mas_updateConstraints 更新约束,用mas_makeConstraints定义约束之后,可以用更新约束进行补充

mas_remakeConstraints 作用比较霸道,删除之前对该控件存在的所有约束,只保留block函数里面的最新约束。
上面的

    make.center.equalTo(self.view);

    make.top.equalTo(self.view).with.offset(30);

    make.left.equalTo(self.view).with.offset(30);

    make.bottom.equalTo(self.view).with.offset(-30);

    make.right.equalTo(self.view).with.offset(-30);

你是不是想更优雅,更棒一点呢?可以这样:

UIEdgeInsets padding = UIEdgeInsetsMake(30, 30, -30, -30);
 make.center.equalTo(self.view);

 make.top.equalTo(self.view).with.offset(padding.top);

 make.left.equalTo(self.view).with.offset(padding.left);

 make.bottom.equalTo(self.view).with.offset(padding.bottom);

  make.right.equalTo(self.view).with.offset(padding.right);

我们还可以简化为

make.edges.equalTo(self.view).with.insets(UIEdgeInsetsMake(10, 10, 10, 10));

也可以这样:

  make.top.left.bottom.and.right.equalTo(self.view).with.insets(UIEdgeInsetsMake(10, 10, 10, 10));

这一篇主要简单学习一下Masonry,下一篇会给大家带来高级应用,_

时间: 2024-09-20 20:18:11

iOS自适应布局之Masonry(一)的相关文章

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

iOS界面布局之四--使用第三方库Masonry进行autolayout布局 一.引言         在前面博客,我们讨论了使用iOS原生的框架代码来进行autolayout布局.在使用中,我们会发现,无论是代码量还是结构的清晰度,都十分不能让我们满意,在storyBoard中只需要几条线就可以搞定的事情,用代码缺要写冗余的一大堆.并且有些时候,故事版并不能解决所有问题,某些控件必须我们手写,这样的话,我们就不得不进行代码的autolayout布局,幸运的是,Masonry可以帮助我们轻松愉快

iOS界面布局之三——纯代码的autoLayout及布局动画

iOS界面布局之三--纯代码的autoLayout及布局动画 一.引言         关于界面布局,apple的策略已经趋于成熟,autolayout的优势在开发中也已经展现的淋漓尽致.除了使用storyBoard进行布局约束的拖拽,有时我们也需要在代码中进行autolayout的布局设置,Masonry库可以方便的创建约束属性,实际上,我们也没有必要再使用系统原生的代码来创建和设置约束,这篇博客只作为使用的方法备忘.前几篇布局介绍的链接如下: 使用autoresizing进行界面布局:htt

iOS文本布局探讨之一——文本布局框架TextKit浅析

iOS文本布局探讨之一--文本布局框架TextKit浅析 一.引言         在iOS开发中,处理文本的视图控件主要有4中,UILabel,UITextField,UITextView和UIWebView.其中UILabel与UITextField相对简单,UITextView是功能完备的文本布局展示类,通过它可以进行复杂的富文本布局,UIWebView主要用来加载网页或者pdf文件,其可以进行HTML,CSS和JS等文件的解析.         TextKit是一个偏上层的开发框架,在i

为iPhone 6设计自适应布局

Apple从iOS 6加入了Auto Layout后开始就比较委婉的开始鼓励.建议开发者使用自适应布局,但是到目前为止,我感觉大多数开发者一直在回避这个问题,不管是不是由于历史原因造成的,至少他们在心底还坚守着固定布局的老传统思想. 随着iPhone6.iPhone6 Plus的到来,使用自适应布局更是迫在眉睫的事,固定布局的老传统思想脆弱的不堪一击.现在的iPhone有4种尺寸,如果算上iPad,现在Apple的iOS设备有5种尺寸.我们在准备使用自适应布局设计应用界面之前,可以把这5种尺寸划

关于自适应布局的处理(利用浮动和margin负边距实现)

自适应布局在实际应用中越来越普遍了,今天分享几个自适应布局的demo,主要是浮动圣杯布局(也叫双飞翼布局,主要是利用浮动和margin负边距实现的),没有介绍绝对定位布局,都是我想,你能明白我下面的几个例子,绝对定位布局也是非常的简单了. PS:圣杯布局有个好处,符合前端开发中渐进增强的理念,因为浏览器解析是从DOM的上至下,圣杯布局能够把页面中重要的内容section放到DOM前面先解析,而次要的aside内容则放在DOM后面后解析. 下面的例子能够解决实际应用中绝大多数的自适应布局问题了,有

iOS界面布局之一——使用autoresizing进行动态布局

iOS界面布局之一--使用autoresizing进行动态布局 autoresizing是iOS中传统的界面自动布局方式,通过它,当父视图frame变换时,子视图会自动的做出相应的调整. 一.通过代码进行布局 任何一个view都有autoresizingMask这个属性,通过这个属性可以设置当前view与其父视图的相对关系.我们先来看UIViewAutoresizing这个枚举: ? 1 2 3 4 5 6 7 8 9 typedef NS_OPTIONS(NSUInteger, UIViewA

css多栏自适应布局

css多栏自适应布局还是需要总结一下的,都是基本功. 一般使用position属性布局,或者用float属性布局,也可以使用display属性. 看资料说position适合首页布局,因为首页内容往往可以完全控制.float适合模板布局,模板中填充的内容无法控制. 一.左侧尺寸固定右侧自适应 1.浮动实现 在css浮动一文已介绍过. .left{ width: 150px; float: left; } /*流体布局*/ .right { margin-left: 150px;} 原理:左侧定宽

iOS界面布局之二——初识autolayout布局模型

iOS界面布局之二--初识autolayout布局模型 一.引言      在上一篇博客中介绍了传统的布局方式:autoresizing.随着iphone型号的越来越多,屏幕的标准也更加多样化,通过autoresizing已经不能满足开发的需求,而进行两套布局或者动态代码控制又大大增加了开发者的工作量,autolayout的出现拯救个这一切,它让动态布局变的十分简单便捷.     autoresizing介绍:http://my.oschina.net/u/2340880/blog/423357

iOS文本布局探讨之三——使用TextKit框架进行富文本布局

iOS文本布局探讨之三--使用TextKit框架进行富文本布局 一.引言         关于图文混排,其实以前的博客已经讨论很多,在实际开发中,经常使用第三方的框架来完成排版的需求,其中RCLabel和RTLabel是两个比较好用的第三方库,他们的实现都是基于UIView的,通过更底层的CoreText相关API来进行图文处理.相关介绍博客地址如下: iOS中支持HTML标签渲染的MDHTMLLaebl:http://my.oschina.net/u/2340880/blog/703254.