iOS Autolayout - 在半透明导航栏下方正确定位视图

Posted 2023-03-08

【中文标题】iOS Autolayout - 在半透明导航栏下方正确定位视图

【英文标题】：iOS Autolayout - Position view correctly below translucent navigation bar

【发布时间】：2013-06-22 23:15:16

【问题描述】：

在我的故事板中，我有一个UIImageView，我想将其放置在半透明导航栏下方的固定距离处。我将视图控制器的模拟顶栏设置为半透明栏，我现在的约束是“顶部空间到 Superview 等于 52”，位于栏下方 8 点。

但是，当视图旋转到横向时，导航栏缩小到 34 点，而图像视图仍然像纵向一样在 52 点。

无论导航栏有多高，我可以在 IB 中使用什么约束将图像视图放置在导航栏下方 8 点处？

谢谢！

【参考方案1】：

选择您的UIImageView 并按住control 并拖动到顶部布局指南以创建约束。如果您不熟悉顶部布局指南，可以在左侧的结构视图中选择它。

【参考方案2】：

正如 Nestor 指出的那样，您正在设置视图顶部边缘的顶部间距，而不是最近的邻居，即导航栏。您应该使用顶部布局指南设置顶部间距约束，以使其固定，无论尺寸等级和方向是什么。

为此，在文档大纲视图中，按住 ctrl 单击并从UIImageView 拖动一条线到Top Layout Guide，然后从列表中选择Vertical Spacing。

【参考方案3】：

在storyBoard 中同时选择imageView 和topBar。在屏幕的右下角，您会看到一个看起来像 H 的按钮：

选择它并选择“垂直间距”。将约束设置为 8 个像素，它应该可以工作。

【讨论】：

谢谢。我似乎无法选择顶部栏，可能是因为它只是模拟指标？我实际上并没有在视图中添加导航栏元素。

您应该以编程方式进行，我知道这似乎很痛苦，但如果您使用 VLF 并没有那么难。

问题是“在 IB 中”。

【参考方案4】：

swift 4、ios11+、SnapKit

imageView.snp.makeConstraints  (maker) in
   maker.top.equalTo(view.safeAreaLayoutGuide.snp.top).offset(8)

【讨论】：

有没有办法在没有 SnapKit 的情况下做到这一点？

【参考方案5】：

如果您使用旧的 Xcode，您将使用 ViewController 的 can connect topLayoutGuide 或 bottomLayoutGuide。 但现在这种方式已被弃用。对于新操作系统的应用，you should usesafeAreaLayoutGuide的一个视图。

IB不支持区分操作系统，但你可以在IB中创建临时约束，并从代码中添加一个真正的约束：

然后在viewDidLoad的某个地方添加一个代码：

if #available(iOS 11.0, *) 
    label.topAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.topAnchor).isActive = true
 else 
    label.topAnchor.constraint(equalTo: self.topLayoutGuide.bottomAnchor).isActive = true