2015 Session 218 Mysteries of Auto Layout, Part 1

地址 Mysteries of Auto Layout, Part 1 (opens new window) 参考示例地址 QingSession (opens new window)

每一次的 session 笔记都不算是分享,一种简单的记录复习 & 感悟咯。还有因为不是全部都记录了,所以 强烈建议自己看一遍

# 涉及 Tip

  • 使用 UIStackView 布局,新一代的布局方案
  • Constraints 新特性
  • Self-Sizing Table View Cells

# 使用 UIStackView 布局,新一代的布局方案

参考示例:[2015-session-218] -> [2015-session-218]

看完了这部分的 session ,我们可以看到 UIStackView 是新一代的布局方案。我个人的理解是基于内容的布局。如何理解这个内容呢,如果你知道四大基本的设计规则,那这里就很好理解了。对比、重复、对齐,亲密性。这里主要相似的地方是亲密性和对齐,特别是亲密性。相关的内容我们用一个 UIStackView 包起来,按照块状原则布局。以上就是我的理解:块状 基于内容

我觉得 UIStackView 相比直接拉约束有以下几个优势:

  • 布局简单清晰
  • 基于内容,更清晰了
  • 上手难度比约束更容易,真的~
  • 更方便的布局集合视图(我不是在说 UICollectionView,比如我们需要一个 UIImageViewUILabel 上下组合,这个集合视图在某个 View 中居中呢,使用 UISlackView 就可以很愉快的完成)

更多的优势我希望去看这个 session ,你会明白为什么 UIStackView 是新一代的布局方案,很强大。

就不多说了,亲手来做一下官方示例的布局。

实际动手操作很重要~ UIStackView 布局学习起来还是很快的~ 多试试那些参数你就明白了~ 这里我自己不小心布局错了一个地方,Head 的部分我设置成了 Center 哈哈哈哈哈。。怪不得和视频的效果根本不一样。

有一些 Tip 可以注意下:

  • 在每个 Stack View 的选项左边都有一个加号,我们可以使用这个来做更多的布局,一般会用来适配 iPad 等。
  • control + shift 可以在 view 上直接显示 view 的层级供我们选择,一个快捷操作。
  • 多使用 Content Hugging Priority (撑的能力)和 Content Compression Resistance Priority (被挤压的能力)。

最后就像 Keynote 中的: Start with Stack View, use constraints as needed

# Constraints 新特性

# 在约束中我们有了新的 API

/* Convenience method that activates each constraint in the contained array, in the same manner as setting active=YES. This is often more efficient than activating each constraint individually. */
+ (void)activateConstraints:(NSArray<NSLayoutConstraint *> *)constraints NS_AVAILABLE(10_10, 8_0);

/* Convenience method that deactivates each constraint in the contained array, in the same manner as setting active=NO. This is often more efficient than deactivating each constraint individually. */
+ (void)deactivateConstraints:(NSArray<NSLayoutConstraint *> *)constraints NS_AVAILABLE(10_10, 8_0);

就是激活和不激活的效果~

官方推荐我们这样来操作约束,而不是之前的删除约束之类的。其实这样的激活概念更好一些。毕竟这样一来约束还是在的,只是没有选择使用罢了。

Kasia 给了一些需要注意的点:

  • Never deactivate self.view.constraints

# 使用 trailing 和 leading

为什么呢,原因很简单,适配不同语言的阅读方向。这个似乎不是新的哈

# Self-Sizing Table View Cells

参考示例:[2015-session-218] -> [2015-session-218-self-sizing]

这是一个有意思的东西。我们可能就不需要再做那么麻烦的高度布局了。这样的姿势可以帮助我们快速的处理 Cell 高的问题,而且几乎都是在 IB 上完成。

参照 Session 的例子做一个类似的。

这里推荐阅读:

首先在 viewDidLoad 中添加两行代码:

tableView.estimatedRowHeight = 158.0
tableView.rowHeight = UITableViewAutomaticDimension

剩下的事情就是在 IB 中拉约束啦。

没有什么非要注意的地方,和 Session 中提到的一样,记得设置一个 ContentLabel.height >= ContentImageView.height 就好了。