Autolayout：原点和大小应根据宽度和高度因子而变化

Question

这是我需要的场景。

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

iPhone6 +需要同样的东西。

我可以通过设置此自动调整遮罩来轻松实现此目的。如何使用autolayout实现相同目的？我应该遵循什么步骤，应该应用哪些约束？

My previous question on this

我通过使用Autolayout附加了一些我需要的屏幕截图（实现了上图中显示的自动调整遮罩）。

我的尝试： -

步骤1： - 在IB上按一个尺寸为100X100的按钮。设置其X = 100和y = 100。 第2步： - 应用此约束。

Answer 1

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

---

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

---

1。）您需要将水平空间设置为 Button.Leading 和 Superview.Trailing 。

设置常数= 0 ，优先级= 1000 和乘数= 100：320 ，因为我已在下图中设置。

---

2。）您需要将水平空间设置为 Button.Top 和 Superview.Bottom 。

设置常数= 0 ，优先级= 1000 和乘数= 100：568 ，因为我已在下图中设置。

---

<强>结果

---

希望这能解决你的问题。

Answer 2

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

Answer 3

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

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

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

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

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

Answer 4

对于高度和宽度，创建一个＆＃34;宽高比＆＃34; Interface Builder中的约束将按钮链接到superview。宽高比没有属性;它将使用创建时的值来设置乘数（如果iPhone <= 5宽度并将超级视图链接到按钮宽度，则为320：100）。为纵横比添加第二个约束，将按钮高度链接到超视图高度（如果您不希望使用iPhone 5拉伸高度，则可以将按钮纵横比链接到自身。）。

对于原产地，我认为没有办法将观点的来源和观点的大小联系起来。要根据屏幕大小将原点设置为任意高度或宽度，您需要创建间隔视图。不雅，但必要。添加视图并将其设置为隐藏（并将其命名为左侧的对象轮廓，在IB中使用autolayout时，您可能希望对所有内容进行操作以使约束可读，但绝对可以在此处轻松找到它） 。将创建约束设置为零将其链接到按钮和顶部布局指南，并将零设置为superview.leading和按钮前导。

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

Answer 5

试试这个解决方案

1. 将视图顶部对齐设置为superviews centerY并设置乘数 84：240
2. 将视图左对齐设置为超视图中心X并进行设置 乘数100：160
3. 使用乘数设置比例宽度 100：320和比例高度100：568





希望这能解决您的问题

Answer 6

您可以使用2个辅助视图在IB中完成所有操作。一个Top helper和一个Left Helper。其余的只是设置它，以便每个高度和宽度适当地与视图的大小成比例。我举了一个例子。这里有几个截图和不同的视图大小。