自动布局：原点和大小应根据宽度和高度因素而变化答案

【问题标题】：Autolayout: origin and size should change according to width and height factor自动布局：原点和大小应根据宽度和高度因素而变化
【发布时间】：2015-04-15 07:44:55
【问题描述】：

这是我需要的一个场景。

我在 IB（大小 iPhone4 英寸）上放置了一个 UIButton，其 IB 上的初始帧为 x:100,y:100,w:100,h:100。我希望原点和高度应根据设备大小而变化。例如 iPhone6 的宽度和高度是 375X667，因此宽度因子 (375/320=1.1718) 和高度因子 (667/568=1.1742)。在这个场景中，我想通过乘以 宽度因子 (1.1718) 来更改我的按钮原点 X 和宽度，并通过乘以 高度因子 (1.1782) 来更改原点 Y 和高度。在这种情况下，我的按钮应该显示在 x:100X1.1718, y:100X1.1742, w:100X1.1718, h:100X1.1742 上。

iPhone6+ 也需要同样的东西。

我可以通过设置 This autoresizing mask 来轻松实现这一点。我怎样才能通过使用自动布局来达到同样的效果？我应该遵循什么步骤，应该应用什么限制？

My previous question on this

我通过使用自动布局附加了一些我需要的屏幕截图（通过上图所示的自动调整大小蒙版实现）。

我的尝试：-

Step1:- 在 IB 上取一个大小为 100X100 的按钮。设置它的 X=100 和 y=100。 Step2:- 应用这个约束。

【问题讨论】：

您好，能否请您添加查看您想要的按钮的图像。如果您添加 iPhone 5,6 和 6 Plus 的屏幕截图会更好。即使它是使用自动调整大小掩码设置的。这会很有帮助。
@iOS_DK 我已经用附件更新了我的问题。请看一看。
嗨，看起来比以前更清楚了。但我的新问题是，您是否需要从顶部开始的确切高度和 y 位置？

标签： ios autolayout nslayoutconstraint iphone-6 adaptive-ui

【解决方案1】：

在您提出问题之前，您可以将此约束设置为您的 UIButton。

您不需要更改您为 UIButton 的高度和宽度设置的约束。

1.) 您需要为Button.Leading和Superview.Trailing设置水平间距。

设置 constant=0、Priority=1000 和 Multiplier=100:320，如下图所示。

2.) 您需要为Button.Top和Superview.Bottom设置水平间距。

设置 constant=0、Priority=1000 和 Multiplier=100:568，如下图所示。

结果

希望这能解决您的问题。

【讨论】：

@Mayank Jain 我已经编辑了答案，这是不使用垫片的最简单的解决方案，请看一下。
谢谢。任何进一步的查询请告诉我。快乐编码。
感谢@DhaivatVyas，我不知道如何解决这个问题以及应该如何解决（因为它不是自我解释的） - 但这是此处和其他地方建议的所有建议中最简单且可能更好的答案。
@EranMarom 谢谢你，我会尽我所能，以尽可能简单的方式提供自我解释的解决方案。

【解决方案2】：

使用约束的乘数。因此，设置一个约束，使按钮的宽度等于顶视图的宽度，乘数为 100:320（您可以使用此比率形式来表示乘数）。将约束的常数设置为 0。对与顶视图高度成比例的按钮高度（比率 100:568）执行相同操作。对于按钮的位置，以 100:320 的比例将按钮的前导约束到顶视图的宽度，以 100:568 的比例将按钮的顶部与顶视图的高度约束。

【讨论】：

您的建议非常适合高度和宽度，但原点没有相应改变。
编辑问题以显示您尝试过的内容。例如，在文档大纲中选择您为水平原点（按钮的前导）所做的约束，然后发布尺寸检查器的屏幕截图，其中将显示其详细信息。
你真的可以“限制按钮的通向顶视图的宽度”吗？我认为绝对不是IB。如果我错了，请举例说明。
不直接在 IB 中。但是，如果顶视图的原点位于 (0, 0)，则其尾部属性与其宽度相同。因此，在这种情况下，您可以使用乘数将按钮的前导限制到顶视图的尾随，以获得相同的效果。
您将按钮的顶部和前导设置为超级视图的顶部和前导（两者实际上都是 0）。乘数无关紧要，因为乘以 0 就是 0。常数是唯一有效的部分。您应该将按钮的前导与超级视图的 width（如果 IB 允许的话）或其 trailing 相关联。将常数设置为 0。乘数应该完成所有工作。按钮的顶部相对于超级视图的高度或尾部也是如此。

【解决方案3】：

如果您想完全在情节提要（或 XIB）中执行此操作，则需要使用间隔视图。

首先，在根视图的左上角放一个间隔视图。将其顶部和左侧边缘约束为与父视图的距离为零。将其宽度约束为其父视图宽度为 100:320（并确保约束的第一项是分隔符）。将其高度限制为 100:568 到其超级视图高度。这些宽度和高度约束将控制按钮的位置。

现在将按钮的上边缘约束到间隔的下边缘，并将按钮的左边缘约束到间隔的右边缘。在按钮和超级视图之间创建比例宽度和高度约束。

将间隔视图设置为隐藏。隐藏的视图不可见且不接收触摸，但仍参与布局。

...如果您想在代码中执行此操作，只需使用自动调整大小掩码并将translatesAutoresizingMaskIntoConstraints 设置为YES。

【讨论】：

这是正确的，我认为我可以更好地解释它，提问者应该自己判断，但我不得不多次编辑我的答案，如果不是这个我不会注意到回答。请注意，您有一个错字，它是 translatesAutoresizingMaskIntoConstraints，但那行甚至不是必需的。

【解决方案4】：

对于高度和宽度，在 Interface Builder 中创建一个“纵横比”约束，将按钮链接到超级视图。纵横比没有属性；它将使用创建时的值来设置乘数（如果 iPhone

对于原点，我认为没有办法将视图的原点和视图的大小联系起来。要根据屏幕大小将原点设置为任意高度或宽度，您确实需要创建一个间隔视图。不优雅，但必要。添加视图并将其设置为隐藏（并在左侧的对象大纲中将其命名，当在 IB 中使用自动布局时，您可能想要做所有事情以使约束可读，但绝对在这里，这样您就可以轻松地再次找到它） .将创建约束设置为零，将其链接到按钮和顶部布局指南，并将零链接到 superview.leading 和按钮前导。

要调整间距，您可以创建纵横比约束，同时设置超级视图宽度和超级视图高度，或者将其设置为等于按钮宽度和高度。

【讨论】：

【解决方案5】：

试试这个解决方案

将视图顶部对齐设置为超级视图 centerY 并设置乘数 84:240
将视图左对齐设置为超级视图中心 X 并设置乘数 100:160
使用乘数设置比例宽度 100:320 和比例高度 100:568

希望这能解决你的问题

【讨论】：

这不是我要找的。设置这些约束后，即使在 iPhone5 中也不会显示按钮。
@MayankJain 我已经添加了一个示例代码here 看看它。它对我来说很好