iOS Xib中AutoLayout介绍和使用

最近公司小伙伴在讨论项目中效率问题,决定要改用Xib来创建界面,个人一直使用,所以我就做了个PPT,打算在这里做一个简单的分享,话不多说,直接进入主题:

一、Xib中三种常用的约束面板

01常用约束面版.png
  • 1、Align: 对齐方式

02对齐方式.png
  • 2、Add New Constraint: 添加新的约束

03添加新约束01.png
当然除了这种约束方式 ,还有一种是右键长按,拖到到想要创建约束的控件上,按住command键可以添加多个约束,如图:
03添加新约束02

补充两点:

1. 添加新约束时,如果勾选了Constrain to margins,控件会自带20的内边距
margin.png
2. Aspect Ratio:设置视图的宽高比

使用场景:
视图宽度随着屏幕宽度变化拉伸时,让其高度自动进行等比例拉伸,保持该视图宽高比不变.


. Aspect Ratio.png
  • 3、Resolve Auto Layout Issues : 修复自动布局问题

04修复自动布局问题.png

二、AutoLayout的四大使用原则

AutoLayout是为了确定View的Frame(确定View的Point和Size)。

  • 1、至少添加四个约束,宽高和位置来确定frame

  • 2、避免约束冲突

1.如同一个View的宽设置两次,一个100,一个200,导致无法确定,形成冲突,冲突属于错误,须解决:
05避免约束冲突.png
2.如约束不够,无法确定View的frame时候也会报错:
06约束.png
  • 3、AutoLayout的警告

警告一般是Xib中添加好了约束,但是对应View没有移动到对应位置导致。这种情况程序运行起来之后会是正确约束的样子,而不是Xib中的样子。

1.选中View,update frame 或使用快捷键‘command’ + ‘option’ + ‘=’
2.如图:
07警告.png
  • 4、约束的修改

约束的修改有很多种方式,下面列举一种我常用的方式!

08约束的修改.png

注意:上面说的Add New Constaints面板只能添加新的约束,修改不能在那里。

补充一点:

约束可以理解为,两个界面元素之间必须满足的基于约束布局系统的关系。每个约束都是以下方式的线性表达式:

item1.attribute1 = multiplier × item2.attribute2 + constant

其中 item1, item2 表示两个界面元素,attribute1, attribute2是两个界面的布局属性,是自动布局系统在满足这些约束的过程中可以调整的变量,由 NSLayoutAttribute 定义,包括 left, right, top, bottom, leading, trailing, width, height, centerX, centerY 和 baseline等. 对于诸如英语这种从左至右阅读的语言,leading 和 trailing 与 left 和 right 完全一样,但是对于诸如 Hebrew 或者 Arabic 这种从右往左阅读的语言,leading 与 right 相同,trailing 与 left 相同,通常情况下,我们使用 leading 和 trailing 较多。
如下图可以理解为:view1.height = view2.height * 0.5 + 10


约束修改公式.png

一个有效的约束是指有且仅有一种方案满足所有约束。如果有多种方案或者没有一个方案满足所有约束,则这些自动布局都无效。对于 view 上的约束都是累加的,对于同一类型的约束不会覆盖,例如,如果你已对 view 添加了一个宽度约束,再次对该 view 添加宽度约束并不会将之前的宽度约束移除或者将之前的宽度约束值修改为新的约束值,你必须将之前添加的宽度约束值手动移除。
另外,约束不仅限于等量关系,它还可以是(>=)或者(<=)来描述两个属性之间的关系,由 NSLayoutRelation 定义。约束还有 1 ~ 1000的优先级(priority),优先级为1000的约束为必须满足,优先级为 1 ~ 999 的约束为可选约束,数字越大其优先级越高,其满足的可能性越高,自动布局系统在满足了所有优先级为 1000 的约束后,会按照优先级从高到低的顺序满足可选约束。默认情况下,所有约束优先级都是 1000,即必须满足。


约束的关系.png

三、XIB 给 UIView 添加 CALayer 相关的属性

09CALayer 相关的属性.png
1、设置圆角需要到的Key Path:

layer.cornerRadius , 注意该 key 对应 Value 的 type 应该设置为 String
layer.masksToBounds , 注意该 key 对应 Value 的 type 应该设置为 Boolean , 当右侧出现对号时为YES

2、设置边框需要到的Key Path:

layer.borderWidth , 注意该 key 对应 Value 的 type 应该设置为 String
layer.borderUIColor , 注意该 key 对应 Value 的 type 应该设置为 Color

3、设置阴影需要到的Key Path:

layer.shadowOffset , 注意该 key 对应 Value 的 type 应该设置为 Size
layer.shadowUIColor , 注意该 key 对应 Value 的 type 应该设置为 Color
layer.shadowOpacity,注意该 key 对应 Value 的 type 应该设置为 Number
layer.shadowRadius, 注意该 key 对应 Value 的 type 应该设置为 Number

4、设置UITextField的私有属性placeholderColor

placeholderLabel.textColor,注意该 key 对应 Value 的 type 应该设置为 Color

四、XIB 属性优先级

在运用过程中会发现并列的两个 label需要一个优先级的,就像下图:

10属性优先级01.png

但是运行起来发现事情并不是想像中的样子???如图:
11属性优先级02.png

那应该怎么办呢??选中右边的Label控件,修改它的Horizontal横向属性的优先级,如图:
12属性优先级03.png

神奇的事情发生了:
13属性优先级03.png

当然还有一种办法,拖拽两个Label的层级关系也是可以的

五、XIB 使用SizeClass适配不同屏幕

项目中如果有用到横竖屏幕效果图不一样的情况,可以用下面的方式:


14 SizeClass01.png
介绍图

在Xcode屏幕下方会有一个机型显示,点击显示如下:

15 SizeClass02.png

如下图。Introduce Variations Based On: 如果只选中Width是 wC hAny类型,只选中Height是wAny hC类型,选中Width和Height是wC hC类型
16 SizeClass03.png

如图展示,已经进入wC hC类型
17 SizeClass04.png

备注:如果需要进去这个模式,开始的时候需要点击Vary for Traits 和结束的时候需要点击 Done Varying

接下来是各种情况的总结:

iOS8推出的Size Class,可以让我们在一个工程的storyboard中进行所有尺寸屏幕的适配,把屏幕的宽和高分别分成两种情况:Compact-紧凑, Regular-正常(Any-任意,其实就是这2种的组合)
w:Compact h:Compact - (w:Any h:Compact , w:Compact h:Any , w:Any h:Any)
w:Compact h:Compact - (w:Any h:Compact , w:Compact h:Any , w:Any h:Any)
w:Compact h:Regular - (w:Any h:Regular , w:Compact h:Any , w:Any h:Any)
w:Compact h:Regular - (w:Any h:Regular , w:Compact h:Any , w:Any h:Any)

机型说明

iPhone4S,iPhone5/5s,iPhone6,iPhone7,iPhone8
竖屏:(w:Compact h:Regular)
横屏:(w:Compact h:Compact)

iPhone6 Plus,iPhone7Plus
竖屏:(w:Compact h:Regular)
横屏:(w:Regular h:Compact)

iPad
竖屏:(w:Regular h:Regular)
横屏:(w:Regular h:Regular)

18机型示意.png

备注:如果项目不支持横屏显示,使用w:Compact h:Regular(或者直接取消使用Size Class) 如果项目支持横屏显示,使用w:Compact h:Regular+w:Any h:Compact 对于一些公有的约束(任意组合中都适用),一般放在w:Any h:Any中设置

至此,Xib中的AutoLayout介绍和使用就已经写完了,如果还有什么项目中遇到的问题,或者有什么不明白的地方,欢迎各位私聊,我们一起探讨一下!(PS:时隔两年再次拾起了我的简书)

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

推荐阅读更多精彩内容