如何使用自动布局和约束调整 Xib 视图和按钮以适应所有设备答案

【问题标题】：How to adapt Xib views and buttons to fit all devices using Auto layout and contraints如何使用自动布局和约束调整 Xib 视图和按钮以适应所有设备
【发布时间】：2017-03-26 07:28:03
【问题描述】：

我将向您展示包含我在 Interface Builder 中呈现的第一个 UIViewController 的图像（使用 600x600 Any/Any View）。

MainViewController

现在，只需查看带有C 标签和播放按钮的UIButton。我向两者都添加了Align center x to: horizontal 约束。当我预览我所拥有的（忘记您看到的其他视图和按钮）时，这 2 个按钮正确居中。但是，当我切换不同的设备尺寸时，它们不会改变尺寸......这是有道理的。

我想要的方法是让这 2 个按钮保持成比例的圆形并以超级视图为中心，但根据设备大小调整它们的大小和 Y 位置。我需要附加哪些约束才能使其正常工作？我不希望按钮卡在您在图像中看到的位置，我希望它们适应设备尺寸。

进一步讨论这个问题。就将任何视图/图像/按钮/标签约束到某个 y 或 x 位置而言，游戏“颜色切换”似乎没有使用约束。从 5c 到 6s，就像看游戏的放大版。顶部的按钮和标题标签不限制在每个设备上的相同 y 位置。

【问题讨论】：

抱歉，只是澄清一下。你在我上传的图片上看到的每个圆圈都是一个独立的IBOutlet UIButton 属性。最初，我计算了所有必要的 x-y 坐标，以便在我的 iPhone 5c 上看起来不错。所以对于那个中间的播放按钮，我取它的宽度 / 2，然后从屏幕宽度 / 2 中减去它以使其居中。如果我只是在 Xib 尝试构建约束的情况下运行原始代码，所有按钮都会按比例放大以匹配新屏幕吗？
另外，您知道 Interface Builder 中有一个选项可以从 Any/Any 切换到 Compact/Regular 等吗？我可以在每个设备宽度/高度场景中创建我上传的图像吗？例如：对于 iPad 选项，只需将我所有的 UIImages 和 UIButtons 放大以适应屏幕。我有我的 .png 文件的 @2x 和 @3x 版本，所以设备应该补偿。我的应用程序不会包含设备旋转，因此也会取消一些场景。你怎么看？

标签： xcode uibutton autolayout interface-builder constraints

【解决方案1】：

您可以创建约束以将按钮置于顶层视图的中心，然后使其宽度与视图宽度成比例。然后在更大的屏幕上，按钮会更大，在更小的屏幕上，它们会更小。

【讨论】：

感谢您的回复，杰瑞。不幸的是，我已经尝试过了，但就大屏幕中的按钮位置而言，它们被限制在顶层视图的 y 位置。如果有办法让 y 位置以及宽度和高度适应新屏幕，那么我会研究它。但我还没有找到那个解决方案
删除所有约束，从两个开始，一个水平居中，一个垂直居中。