如何使用自动布局将多个视图与背景图像元素对齐？

Question

以下是场景：我有一个背景图像有3个圆圈和3个水平线，在圆圈上方我有3个矩形形状的视图。我希望矩形直接位于圆圈上方，大致与圆圈一样宽，以及所有iPhone和iPad上的相同高度（从第一个水平条到顶部边距）。我在Sketch中构建了一个样本作为视觉辅助。任何帮助将非常感激！ visual aid

我所遇到的具体问题是我尝试过的限制是顶部保留固定在上边距但底部约束并没有真正按照不同的iPhone尺寸进行缩放。这是另一个屏幕截图。 bottom height issue 我正在使用的底部约束是一个垂直空间约束，第一个项目作为视图的底部，与矩形的底部具有相等的关系，它是相等的283个点。我明白为什么不会工作，283从底部到最后并没有在所有3台设备的同一位置，但我不明白如何解决它。

Answer 1

所以基本上当你改变矩形的高度时，你需要考虑整个视图的高度。你可能想要一个屏幕的设计高度，例如，我在这里选择600。所以我将使用以下函数来计算当前设备所需的实际高度。

    func actualHeight(height: CGFloat) -> CGFloat {
        return height / 600 * view.bounds.height
    }

因此，当您想将矩形的高度设置为600中的100时，我会改为使用actualHeight(100)。

请记住，如果您已在界面构建器中设置了高度约束，则无法通过直接设置视图的高度来实现。一种方法是与constaints合作。您必须为高度约束创建一个出口并更改约束的constant属性。

我在线获得此图片，但它显示了如何为约束创建插座。

所以你有一个IBOutlet：

@IBOutlet weak var heightConstaint: NSLayoutConstraint!

你将设置这样的高度：

heightConstaint.constant = actualHeight(400)

如果您不喜欢height constaint方法，可以使用transform：

// Scale the height by 1.1.
rect.transform = CGAffineTransformMakeScale(1.0, 1.1)

只要您在IB中正确设置了高度保持，这将在任何设备上进行缩放。