如何设置不同的变化取决于不同的iPhone设备？

Question

我是Swift编程新手，我想知道人们如何适应不同大小的iPhone屏幕。

如果我正确理解的话，所有的纵向iPhone设备(比如iPhone 4到iPhone 11)都具有紧凑的宽度和规则的高度。因此，我不能改变UI的大小取决于iPhone设备。对于我的个人项目，下面的图片是我正在做的事情，但是，由于我不能根据iPhone设备更改UI的大小，所以当我将设备更改为iPhone 4并且文本字段对于iPhone SE和iPhone 4都太大时，我看不到按钮。

iPhone 11

​

​

iPhone SE

​

​

iPhone 4

​

​

我可以调整iPhone 4或iPhone SE的UI大小，但是它会使iPhone 8、10、11的UI太小。我看到一些人在谷歌上问这个问题，但答案是在不同的宽度和高度的大小上增加变化，这不是我想要的。

我想知道如何对不同的iPhone设备(它们都是相同的紧凑宽度和规则高度)进行UI更改，还想知道开发人员是如何适应通用设计的(我的iPhone 4和iPhone 11的UI非常不同)。我希望不再有很多人使用iPhone 4，但我现在很困惑.

另外，首先制作屏幕尺寸最小的UI更好吗？因此，在我的例子中，首先使用iPhone 4创建UI (我不认为很多人正在使用它)，以避免像我这样的UI问题。

顺便说一句，我现在使用的是故事板，而不是Swift UI。

Answer 1

您应该使用自动布局与约束根据屏幕大小和定义的规则自动计算元素的位置。

我不完全确定所有设备上的视图应该是什么样子，但我将举一个例子。由于彼此之间有3个textfields和1个按钮，所以可以将它们放在垂直堆栈视图中，然后将该堆栈视图与图像一起放置在另一个堆栈视图中，并将约束直接应用于父堆栈视图。例如，将其集中在视图中。

所以看起来是这样的：

• 视图
  • 垂直堆栈视图-在此上应用H/W中心约束
    • 图像

    - Vertical Stackview

        - Textfield
        - Textfield
        - Textfield
        - Button

通过使用两个堆栈视图，您可以在输入元素之间定义一个间隔，并且在Image和输入堆栈视图之间有更大的空间。

这视频似乎是对约束的一个很好的介绍。