首页 > 解决方案 > 在缩放按钮时保持按钮距离彼此成比例

问题描述

我有 2 个按钮。1 号和 2 号。无论设备屏幕尺寸如何,我都希望它们之间保持成比例的距离。类似于图 1

因为按钮彼此对角线,所以自动布局不允许我将约束设置到最近的按钮(至少在我的理解中)。例如,我无法将按钮 2 的约束设置为按钮 1。它只提供了基于视图设置约束的选项。

我已经将按钮设置为像现在一样缩放,但是按钮并没有像我想要的那样按比例排列。当设置为较小的设备时,按钮彼此远离(图 2)。当设置为更大的设备时,按钮会重叠(图 3)。

我尝试将乘数功能用于前导和顶部约束,但它似乎没有任何效果。

谢谢

图1

图1

图 2

在此处输入图像描述

图 3

在此处输入图像描述

标签: swiftxcodeautolayout

解决方案


将您的第二个视图的水平中心和垂直中心约束到第一个视图的,您在此处设置的常数无关紧要,但我建议将其设置为您期望视图的间距,以便它在您的故事板中看起来正确。在视图控制器中为这两个约束创建一个出口。在您的控制器viewDidLayoutSubviews()更新每个约束constant到它的匹配轴(x = 宽度,y = 高度)。

@IBOutlet weak var secondViewCenterXConstraint: NSLayoutConstraint!
@IBOutlet weak var secondViewCenterYConstraint: NSLayoutConstraint!

override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()
    secondViewCenterXConstraint.constant = secondView.frame.size.width
    secondViewCenterYConstraint.constant = secondView.frame.size.height
}

中心X约束 centerY约束 苹果手机 平板电脑

您会在我的屏幕截图中看到第二个视图的左上角与第一个视图的右下角匹配。如果您想将它们与屏幕截图中的内容更相似,那么您可以使用如下所示的内容。我只是对计算进行猜测,您必须根据要完成的间距对其进行编辑。但是你对这些常量所做的所有计算都应该基于视图宽度和高度的某种乘数。

secondViewCenterXConstraint.constant = secondView.frame.size.width * 0.9
secondViewCenterYConstraint.constant = secondView.frame.size.height * 0.5

我创建了一个repo以更好地展示我的示例。


推荐阅读