iOS-StoryBoard 布局对比 CSS 的 Box Model 布局

在 iOS 端，布局分为可视化布局和纯代码布局；目前，主流是可视化，方便快捷，简单直观，节省时间，功能更多
在网页端，一般使用 CSS 的 Box Model 框模型进行布局，个人感觉没有移动端可视化布局灵活

---

CSS 框模型

CSS 框模型 (Box Model) 规定了元素框处理元素内容(Content)、内边距(Padding)、边框(Border) 和 外边距(Margin) 的方式。

CSS 框模型图例:

从图可以看出:

• 根据 CSS 框模型布局，HTML 的 Element 元素必须指定 Marge/Border/Padding, 才能定位元素的位置
• 而且是从外向内进行布局的

---

StoryBoard/XIB 布局元素

从外向内布局（从上往下布局）

从左至右，自上而下，按个设置大小和间距

从内向外布局

先定位中间的元素位置和大小
再向外进行约束
外面元素的大小会根据内部元素大小改变而改变

---

UILabel 部分属性详解

UILabel 在 iOS UI 界面中，使用的频率非常高

UILabel 可以根据字体大小和个数自适应自身尺寸
UILabel 也可以根据自身固定尺寸自适应字体的大小
可以实现自动换行

01 - Autoshrink - 自动收缩

• Fixed Font Size （根据字体大小自适应）
• Minimun Font Scale （最小字体大小比例）
• Mininum Font Size （最小字体大小）

---

02 - 尺寸大小约束的属性

Relation （相对关系）

• Less Than or Equal （<= 小于或等于某个尺寸）
• Equal （== 等于某个尺寸）
• Greater Than or Equal （>= 大于或等于某个尺寸）

Priority （约束的优先级）
- Required(1000) - 必须的，极高优先级
- High(750) - 一般，高优先级
- Low(250) - 低优先级

因优先级问题打印出 log 日志

Probably at least one of the constraints in the following list is one you don't want. 
Try this: 
    (1) look at each constraint and try to figure out which you don't expect; 
    (2) find the code that added the unwanted constraint or constraints and fix it.

当多个优先级发生冲突时，需要降低其中某个优先级

---

从内向外布局示例：

• 白色区域为 UILabel,
  
  • 最大宽度为 300
  • 最小高度为 21
  • 最大行数为 3
• 红色区域为 UIView
  
  • 由内向外设置位置
  • padding 为 10

具体动效示例：