很久没有写文章了,把之前整理出的一些文章进行发一发,也算是给自己进行复习,希望能够帮到有需要帮助的人
iOS目前的主流布局方式为 纯代码布局 和 XIB布局。
各自优缺点:
纯代码:
- 优点
- 万物皆可纯代码,修改灵活性较好。
- 只占用一个文件。
- 可以灵活使用多种布局框架辅助完成布局。
- 复用性好,差异不大的布局只需要拷贝过来修改少部分就可以。
- 版本管理友好,在codeReview时一目了然
- 纯代码界面加载速度和运行速度较快
- 缺点
-
布局繁琐,界面越复杂布局代码越多,调UI查看效果不直观。
-
相对简单的功能花费的时间较长
-
约束冲突不清晰,在编码过程中无法排查约束冲突
XIB布局:
- 优点
- XIB布局使用的是AutoLayout,布局效果支持预览,所见即所得,约束布局更直观。
- 相对复杂的布局,可读性好
- 在子控件低于60个左右时,界面加载速度和运行速度和纯代码差距不明显。
- 开发效率显著,布局层级清晰。
- 约束冲突清晰可见,在编码过程中可规避大部分约束问题
- 缺点
- 版本管理时,无法一目了然看清修改项
- 多占用一个资源文件,占用编译时间
- 没有形成统一规范时,XIB在迭代过程中将会是一个噩梦。
如何取舍:
基础规则:
XIB只适用于能够 StackView 布局,或者非常简单的常规布局。
封装的父View或者Cell 如果子控件多于60个,只能使用纯代码布局。
对于一级页面
-
-
为追求极致的体验,对于子控件多于30个的cell,使用纯代码布局。
-
子控件少于30个的cell,如果能够使用StackView进行布局的,优先推荐使用XIB,无法使用StackView布局的 Cell 使用纯代码布局。
-
对于View的封装和Cell的规则保持一致,同样适用于以上两点。
-
使用规范:
命名规范
如果使用的是 UIStackView 布局,在命名时需要将 axis 写出来,比如话题的水平约束view,可以命名为 topicHorizontalStackView。
增加subView时,请使用 addArrangedSubview 方式进行添加,布局是否隐藏请使用 isHidden。具体可 参考 HomeRecommendFeedInfoView
注释规范
将封装的 Cell 或者 View 写明注释,用于什么页面。
子控件代表什么
tip:
在布局的过程中,如果是纯代码布局,可能会出现(通过 运行时 → Debug → View Debugging → Capture View Hierarchy 查看)
出现这种问题的原因是布局过程中,在水平或者垂直方向上,约束缺失,相同的一个方向,不知道该优先缩放或者裁切哪个控件。
此时只需要指定优先级。
contentHuggingHorizontalPriority & contentHuggingVerticalPriority (水平抗压缩系数和垂直抗压缩系数)
默认值为 250,设置值越小代表越容易被拉伸,即越难被压缩。
举个例子:
label 设置水平249,那么就越容易被拉伸
label 设置水平为251,那么就比第二更难被拉伸
代码设置方式为
topicLabel.snp.contentHuggingHorizontalPriority = 251 或者 topicLabel.setContentHuggingPriority(UILayoutPriority(rawValue: 251), for: .vertical)
contentCompressionResistanceHorizontalPriority & contentCompressionResistanceVerticalPriority (水平优先裁剪系数和垂直优先裁剪系数)
默认值为 750,设置值越小代表越容易被裁剪。
举例说明:
第一 label 设置水平749,那么第一就越容易被裁剪
第一 label 设置水平751,那么第二就越容易被裁剪
布局规范
对于动态布局的卡片或者Cell,优先使用StackView进行布局。StackView可以自定义间隙,通过使用 setCustomSpacing(2, after: puNameL)
详细的StackView使用方法可以查看苹果官方文档 UIStackView官方文档
项目中的动态卡片如果使用XIB,不要通过使用 Constraint 进行约束更新,而应该使用UIStackView的isHidden属性
对于XIB布局,如何快速查看布局的层级
方案一:
打开XIB文件,例如:
将文本进行填充,将子控件进行颜色填充,层级效果一目了然,比如:
通过 Preview查看效果和约束
方案二:
通过 Debug View Hierarchy 进行查看,Cell的卡片层级一目了然
使用纯代码布局可使用方案二查看约束层级结构。
如果排查约束冲突:
通过设置 UIViewAlertForUnsatisfiableConstraints,可以将约束的冲突打印在控制台上