在 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