StackView & frame

很久没有写文章了,把之前整理出的一些文章进行发一发,也算是给自己进行复习,希望能够帮到有需要帮助的人

iOS目前的主流布局方式为 纯代码布局 和 XIB布局。

各自优缺点:

纯代码

  • 优点
  1. 万物皆可纯代码,修改灵活性较好。
  2. 只占用一个文件。
  3. 可以灵活使用多种布局框架辅助完成布局。
  4. 复用性好,差异不大的布局只需要拷贝过来修改少部分就可以。
  5. 版本管理友好,在codeReview时一目了然
  6. 纯代码界面加载速度和运行速度较快
  • 缺点
  1. 布局繁琐,界面越复杂布局代码越多,调UI查看效果不直观。

  2. 相对简单的功能花费的时间较长

  3. 约束冲突不清晰,在编码过程中无法排查约束冲突

XIB布局:

  • 优点
  1. XIB布局使用的是AutoLayout,布局效果支持预览,所见即所得,约束布局更直观。
  2. 相对复杂的布局,可读性好
  3. 在子控件低于60个左右时,界面加载速度和运行速度和纯代码差距不明显。
  4. 开发效率显著,布局层级清晰。
  5. 约束冲突清晰可见,在编码过程中可规避大部分约束问题
  • 缺点
  1. 版本管理时,无法一目了然看清修改项
  2. 多占用一个资源文件,占用编译时间
  3. 没有形成统一规范时,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 写明注释,用于什么页面。

    子控件代表什么

image2022-2-18_15-29-54.png

tip:
在布局的过程中,如果是纯代码布局,可能会出现(通过 运行时 → Debug → View Debugging → Capture View Hierarchy 查看)

image2022-2-21_10-58-12.png

出现这种问题的原因是布局过程中,在水平或者垂直方向上,约束缺失,相同的一个方向,不知道该优先缩放或者裁切哪个控件。

此时只需要指定优先级。

image2022-2-23_13-44-43.png

contentHuggingHorizontalPriority & contentHuggingVerticalPriority (水平抗压缩系数和垂直抗压缩系数)

默认值为 250,设置值越小代表越容易被拉伸,即越难被压缩。

举个例子:

label 设置水平249,那么就越容易被拉伸

image2022-2-21_11-10-46.png

label 设置水平为251,那么就比第二更难被拉伸

image2022-2-21_11-11-40.png

代码设置方式为 

topicLabel.snp.contentHuggingHorizontalPriority = 251 或者 topicLabel.setContentHuggingPriority(UILayoutPriority(rawValue: 251), for: .vertical)

contentCompressionResistanceHorizontalPriority & contentCompressionResistanceVerticalPriority (水平优先裁剪系数和垂直优先裁剪系数)

默认值为 750,设置值越小代表越容易被裁剪。

举例说明:

第一 label 设置水平749,那么第一就越容易被裁剪

image2022-2-21_11-16-21.png

第一 label 设置水平751,那么第二就越容易被裁剪

image2022-2-21_11-20-24.png

布局规范

对于动态布局的卡片或者Cell,优先使用StackView进行布局。StackView可以自定义间隙,通过使用  setCustomSpacing(2, after: puNameL)

详细的StackView使用方法可以查看苹果官方文档 UIStackView官方文档

项目中的动态卡片如果使用XIB,不要通过使用 Constraint 进行约束更新,而应该使用UIStackView的isHidden属性

对于XIB布局,如何快速查看布局的层级

方案一:

打开XIB文件,例如:

image2022-2-23_13-49-37.png

将文本进行填充,将子控件进行颜色填充,层级效果一目了然,比如:

image2022-2-23_13-52-25.png

通过 Preview查看效果和约束

image2022-2-23_13-53-18 (1).png

方案二:

通过 Debug View Hierarchy 进行查看,Cell的卡片层级一目了然

1688623394852.jpg

使用纯代码布局可使用方案二查看约束层级结构。

如果排查约束冲突:

通过设置 UIViewAlertForUnsatisfiableConstraints,可以将约束的冲突打印在控制台上

image2022-2-23_14-13-45.png

© 版权声明
THE END
喜欢就支持一下吧
点赞0

Warning: mysqli_query(): (HY000/3): Error writing file '/tmp/MYwRAg64' (Errcode: 28 - No space left on device) in /www/wwwroot/583.cn/wp-includes/class-wpdb.php on line 2345
admin的头像-五八三
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

图形验证码
取消
昵称代码图片