iOS学习之Autolayout
转载自:http://vit0.com/blog/2013/12/07/iosxue-xi-zhi-autolayout/
学习资料
文章
- Beginning Auto Layout Tutorial in iOS 7: Part 1
- Beginning Auto Layout Tutorial in iOS 7: Part 2
- Auto Layout Guide(官方)
前两篇文章对如何在xcode 5中使用autolayout讲得已经很详细了。我使用了一段时间autolayout的感觉是,一般情况下都可以通过xcode的ib上直接设置autolayout的各种属性完成项目需求,除非遇到需求比较复杂的布局。
官方的Auto Layout Guide讲得详细易懂,推荐
WWDC视频
2012
- 202 – Introduction to Auto Layout for iOS and OS X
- 228 – Best Practices for Mastering Auto Layout
- 232 – Auto Layout by Example
- 以及obj.io对这三个视频的总结
2013
一些学习到的知识点整理
用代码创建一个 NSLayoutConstraint
下面的方法遵循一个计算公式:
view1.attribute1
= multiplier × view2.attribute2 + constant
1 |
|
例子:
- Button.centerX = Superview.centerX
1 |
|
- Button.bottom = Superview.bottom –
1 |
|
创建完 NSLayoutConstraint 接下来要将它添加到 view 里,添加方法很简单,用 view 的-
添加。但是应该添加到哪个 view 里呢?
(void)addConstraint:(NSLayoutConstraint *)constraint
兄弟 view 的 Constraint 添加到他们的 superview
两个 view 的父 view 是兄弟关系的,Constraint 添加到父 view 的 superview 上
如果两个 view 是 parent-child 关系,Constraint 添加到 parent view上
跨层级 view 之间的 Constraint
有如下的视图层级:
- View
- UIScrollView
- UISwitch
- UIButton
其中UISwitch相对 UIScrollView 水平居中,和 ScrollView 同一层级有一个 UIButton,现在要始终保持 UIButton 的水平中点位置和 UISwitch 的水平中点位置在同一条线上。
为 UISwitch 的水平居中 Constraint 建立一个 IBOutlet。
1 |
|
上面的的代码就实现了跨层级视图之间的 Constraint 设置。其实就是这么简单
设置Autolayout有两个原则
- Ambiguous Layout(The constraints must be suficient)
- Unsatisfiable Constraints(The constraints must not conflict)
在 IB 中设置明确的宽度
设置宽度有几个原则:
- 如果一个 View 的宽高在显示的时候是不确定的:让 view 根据内容改变大小(size to fit size)
- 如果一个 View 有确定的大小:改变其宽度的 Constraint Relation 为 >=
- 正确的设置Content Hugging Priority(内容压缩优先级) 与 Content
Compression Resistance Priority(内容抗压缩优先级)
Relation(Greater/Less) 与 Priority
Greater/Less 一般与 Priority 一起使用,为一个 Constraint 设置了 Greater/Less 后,调整 Priority。如果 Constraint 的 Priority 的值越大,程序优先设置它的 Constraint 效果。
如果两个 View 不在同一个层级,此时想要设置他们之间的 Constraint,只能通过代码实现。简单的方式是:先在 Xcode 中设置了 Constraint,然后为这个 Constraint 建立一个 IBOutlet,回到代码中,移除想要替换的 Constraint。
Content Hugging Priority 与 Content Compression Resistance Priority
含义:
- Content Hugging Priority(内容压缩优先级)
- Content Compression Resistance Priority(内容抗压缩优先级)。
如果 Constraint 发生冲突时,会先找优先级高的UIView,满足优先级高的UIView 的Constraint 后再依次找优先级低的 Constraint 满足,最后改变 View 的 Frame。如果发生多个 Constraint不能同时满足的情况,就发生了Unsatisfiable
Constraints的错误。
Visual Format Language
VFL(Visual Format Language),提供了一种让代码以一种可视化的方式来设置不同 views 之间的 Constraint。
1 |
|
Examples:
Property | Examples |
---|---|
Inequality,Priority | [wideView(>=60@700)] |
Vertical:Flush Views,Equal Heights | V:[redBox][yellowBox(==redBox)] |
Combination | H:|–[Find]–[FindNext]–[FindField(>=20)]–| |
Constraint 在什么时候更新
UIView中
-setNeesdDisplay
-setNeedsLayout
-setNeedsUpdateConstraints
UIView/UIWindow中
-layoutIfNeeded
关于 intrinsicContentSize
在 UIView 中有个方法-intrinsicContentSize
,用于指定一个
view 的 width 和 height,设置了-intrinsicContentSize
相当于设置一个不可变的长度或者宽度。有点像
UISlider 只能设置宽度,不能设置高度那样。
Debug
在 Xcode 中,设置 Autolayout 时可能出现3种状态,分别会出现黄色、红色、蓝色的线或线框。
- 出现黄色的线或者线框表示:View 根据设置的 Constraints 最后计算出的 frame 位置和在xib 中 view 目前显示的位置不一致。此时并没有错误,只要更新一下
Update frames 以下就好 - 出现红色的线或者线框表示:出现了Ambiguous
Layout(Constraints 太少以至不能确定一个 view 的位置)或者Unsatisfiable Constraints(Constraints
有冲突,确定 view 一个方向上的 Constraints 超过1个)。这种情况要找到没有正确设置 Constraints 的 View 添加缺失的 Constraints 或者删除多余的 Constraints。 - 蓝色线条或者线框表示这个 view 的 Constraints 正确设置,并且 view 目前显示的位置和 Constraints 计算得出的最终位置是在同一个地方。
- 出现黄色的线或者线框表示:View 根据设置的 Constraints 最后计算出的 frame 位置和在xib 中 view 目前显示的位置不一致。此时并没有错误,只要更新一下
在代码添加 Constraints 的 Debug 方法。
- 在控制台输出AutolayoutTrace:
po
。如果此时有Ambiguous Layout或Unsatisfiable
[[UIWindow keyWindow] _autolayoutTrace]
Constraints,可以在输出的代码中看到。
- 在控制台输出AutolayoutTrace:
有用的 debugging defaults
- 双倍的国际化字符串:
NSDoubleLocalizedStrings
YES - 显示视图的对齐框:
UIViewShowAlignmentRects
YES
- 双倍的国际化字符串:
AutoresizingMask自动转化成 Constraint
view有一个 translatesAutoresizingMaskIntoConstraints 属性,如果设置为 NO,那么在运行时,程序不会自动将AutoresizingMask转化成 Constraint。
Animation
关键是在 UIView Animation 中调用[view
layoutIfNeeded]
1 |
|
Github上一些好用的Autolayout第三方库
Comments
最新文章
- C++类成员函数的重载、覆盖和隐藏区别?
- Codeforces Round #235 (Div. 2) A. Vanya and Cards
- java.net.SocketException: Too many open files
- [转] iOS开发之使用lipo命令制作模拟器与真机通用静态库
- C++ API设计
- [SAM4N学习笔记]按键程序(查询方式)
- OpenCV——CvSeq动态结构序列
- wcf契约随记
- Java基础第3章
- 初识vue——语法初解
- JPA(三)之实体关系一对多(多对一)
- DAY16 模块和包的导入
- 微软Microsoft SQL server 之 MDS connection问题
- java与eclipse的工作小结
- Asp.net中web.config配置文件详解(二)
- 解决ubuntu下音乐播放器Rhythmbox乱码问题
- C#编程经验-选择结构和循环结构
- 安装VS2017后打开项目提示 asp.net 4.0尚未web服务器注册
- Imu_tk算法流程及数据采集要求和标定程序参数设置
- 【BZOJ】4013: [HNOI2015]实验比较
热门文章
- Python文件操作——读写图片,音频,视频
- Java日志规范(转载)
- JDK + Tomcat 安装 + 制作自定义镜像【第 2 篇 Tomcat】
- 少勇 #import和@class的区别
- 使用Eclipse开发Java应用并部署到SAP云平台SCP上去
- python基础:流程控制案例:
- shell 中的通配符:
- 牛客小白月赛19 E 「火」烈火燎原 (思维,树)
- 如何发布一个npm包?
- 【leetcode】1269. Number of Ways to Stay in the Same Place After Some Steps