如何使用情节提要板为不同的设备设置自动布局

Question

我有一张冰岛地图，其中包含9个不同的区域按钮。每个按钮都有不同的大小。我希望地图可以在不同的设备上显示相同的内容。我只知道将中央按钮设置为水平放置在容器中，垂直放置在容器中。但是，其他按钮，无论我如何设置约束，在iphone SE或iPhone Plus上都会一团糟。 （我正常使用iPhone 8）

有人可以教我如何为左8个按钮设置约束吗？谢谢！

Answer 1

最好的做法是垂直UIStackView嵌套3个水平堆栈

MainStackView 约束

  

垂直和水平居中，宽度和高度与屏幕成比例

然后在其中放置3个stackViews设置 axis =水平，并为每个内部堆栈放置3个按钮

注意：对于所有堆栈，填充均相等，间距= 10

查看此Demo

Answer 2

我过去所做的事情是使用单个控件作为所有其他控件的锚点。

基本上，这意味着抓住中心按钮并将其固定在容器视图的中间（水平和垂直中心）

然后我将中间/顶部和底部控件（垂直空间和水平居中位置）限制在其中

从那里开始，将行中的每个控件约束为这些元素（水平间距和垂直居中）

您还可以考虑将大小限制为中央控件，因此所有控件共享相同的大小。对我来说，这意味着将控件的宽度限制为一个设置值，然后对高度应用宽高比。之所以这样做，是因为这样我就可以更改宽度约束的值，并且所有控件都会更改大小

由于iPhone 5s，iPhone，iPhone +，iPhone X都共享相同的“尺寸分类”，这使其变得更加困难（因为您无法应用特征-但您可以在iPad和iPhone上使用它；）

这时，我将中心控件的宽度约束（如果需要，还可以绑定高度）绑定到源代码，并且在加载视图时，确定设备的屏幕尺寸并对约束值进行较小的调整。 / p>

如果您希望使用完整的“故事板”解决方案，则可以将中央控件的宽度限制在超级视图上并应用修饰符

使用情节提要中的“设备”模板，为iPhone 5s和iPad Pro布置一个模板

总而言之，您有“选项”。您甚至可以考虑使用UIStackView来定义行，就我个人而言，将控件约束到中央锚点比较容易-但这是我的经验，您的需求可能会有所不同