AutoLayout 详解

一、适配基础准则:

1、在一些比较简单、固定的界面。比如登录、注册或者其他只是进行内容展示的界面使用XIB、StoryBoard开发起来会更简单快一些,这个时候我们也应该使用XIB、StoryBoard开发。

2、在一些复杂、控件较多和功能多的界面尽量使用代码进行布局开发。因为控件多功能复杂的界面如果使用XIB、StoryBoard。那么通过拉线的形式添加约束布局,大家应该都有经历过,一个XIB里拉满了密密麻麻的约束线,可以肯定的是过不了多久连自己都看晕了。如果这个模块要交给第二个人维护,那么这些密密麻麻的约束线肯定是一个让人头疼的问题。因为XIB中约束过多的话,首先可读性是非常差的,带来的后续问题是开发思路不清晰、维护难。

3、需要复用的模块尽量使用代码布局。如果使用XIB、StoryBoard则无法很好的对代码模块进行复用。


二、布局技巧

约束主要分为以下几种(欢迎补充):

(1)相对于父 view 的约束。如:距离上边距 10,左边距 10。

(2)相对于前一个元素的约束。如:距离上一个元素 20,距离左边的元素 5 等。

(3)对齐类约束。如:跟父 view 左对齐,跟上一个元素居中对齐等。

(4)相等约束:.如:跟父 view 等宽。


双视图妙用:懒得天天写 @pro(nontimic,strong)。command+alt+enter 打开双视图窗口  command+ enter 回到标准窗口。打开双视图,如果是控件连接,按住contol+鼠标,如果是方法直接用鼠标。

control键妙用:从父view空白处往当前控件、从一个控件拖往另外一个控件、从当前控件往当前控件。

三等分:  

(1)固定宽高,中间间距进行三等分。     

方案1:用等宽View代替间距。

方案2:纯代码写。https://my.oschina.net/u/1418722/blog/353437

方案3:直接界面布局,除了方案一,貌似其他方案了。

(2)间距固定,宽不固定。

方案1:第一个元素距离左边一定距离;最后一个元素距离右边一定距离;三者高度都固定,宽度相等。1和2、2和3的横向间距固定。

(3)约束优先级用处

三个view     第一个view 距离第二个view  20px,第二距离第三个view 也是20px。如果删除第二个view。 可以设置 第三个view距离第一个view 也是20px。不过优先级 要比 第三个距离第二个弱。

(4)multiplier用处

使用multiplier来进行布局,即百分比布局是最佳选择。

(5)ratio用处

有一些横竖屏。或者 不同屏幕要保持同样的款高比,就需要用到了。


三.masonry

万能公式 firstitem=seconditemt*multiplier+constvalue;

mas_equalTo 尽量都是用这个。

[self.lbl10 mas_makeConstraints:^(MASConstraintMaker*make) {

//make.left.equalTo(self.lbl7.mas_left).offset(0);

//make.top.equalTo(self.lbl7.mas_top).offset(40);

//

//make.width.equalTo(self.lbl7.mas_width);

//make.height.equalTo(self.lbl7.mas_height);

//同等代码

make.left.equalTo(self.lbl7).offset(0);

make.top.equalTo(self.lbl7).offset(40);

make.width.equalTo(self.lbl7);

make.height.equalTo(self.lbl7);

//make.width.mas_equalTo(100);

//make.height.mas_equalTo(21);

//同等代码1

//make.width.equalTo(@100);//equalTo支持对象。所有必须包装成对象

//make.height.equalTo(@21);

//同等代码2

//make.size.mas_equalTo(CGSizeMake(100,21));

//make.top.equalTo(self.lbl7.mas_top).offset(40);

//同等代码

//make.top.equalTo(self.lbl7.mas_top).multipliedBy(1.0).offset(40);//跟上面那句一样万能公式

}];


//删除之前的约束,重新建立约束慎用

[self.lbl10 mas_remakeConstraints:^(MASConstraintMaker*make) {

}];

//更新约束

[self.lbl10 mas_updateConstraints:^(MASConstraintMaker*make) {

}];


4.约束优先级是改变不了。不能一会高一会低。

一开始就确定好。那比如 cell 有没有 图片。没有图片隐藏图片,cell 高度也要自动减少的处理。 可以把图片imageview的高度改为0.


5.笔者也推荐大家使用Masonry时,使用mas_left/mas_right,但是使用xib/storyboard上的约束时,使用heading/trailing最多。效果是一样。


6.setNeedsLayout和layoutIfNeeded 区别

- (void)setEdgeInsets:(UIEdgeInsets)edgeInsets {

_edgeInsets = edgeInsets;

[self setNeedsLayout];//Indicates that the view needs to be laid out

//at next update or at next call of layoutIfNeeded,

//whichever comes first

[self layoutIfNeeded];//Calls layoutSubviews if flag is set

}

这里强化一下,next update cycle的概念,例如两个视图控制器A,B,正在显示A视图,如果B视图需要刷新绘图或者布局,那么,iOS基于优化的角度,不会马上更新B视图,而是在适当的时机更新B视图。


⚠ 1.修改tableView的tableHeaderView界面时,界面并不能及时刷新,可手动调用layoutIfNeeded 此时view高度为理想高度

2.tableViewHeader高度变化时,界面也不能及时刷新 需要重新将headerView设置为tableView的tableHeaderView,界面即可正确显示了

3.当然,使用auto layout时,约束条件必须充分 才能计算出正确高度哦^^

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

推荐阅读更多精彩内容