xcode 如何排列 UI 元素，使其适合 iOS 中的所有屏幕尺寸

How to arrange UI elements so they fit in all screen sizes in iOS

提问by Rob8861

I've been struggling with this issue for a while and hours of research and experimentation didn't produce any acceptable results.

我一直在为这个问题苦苦挣扎，数小时的研究和实验没有产生任何可接受的结果。

I have a login screen that contains a lot of UI elements. The view looks great on iphone 7 and 6 variations but when I test it on SE or 4S the constraints fail to position the elements so they fit nicely on their tiny screen. Simply there is not enough room. I read that I must support all screen sizes but at this point I am not sure how can I get all the ui elements to fit in the smaller screens. I watched hours of youtube videos and tried all possible ways including a vertical stack view but no matter what I try, it either looks good on 7 and 6 but terrible on SE/4S or vice versa (good on SE/4S but way too much white space on 7/6).

我有一个包含很多 UI 元素的登录屏幕。该视图在 iphone 7 和 6 变体上看起来很棒，但是当我在 SE 或 4S 上测试时，约束无法定位元素，因此它们非常适合它们的小屏幕。只是没有足够的空间。我读到我必须支持所有屏幕尺寸，但此时我不确定如何让所有 ui 元素适合较小的屏幕。我看了几个小时的 youtube 视频并尝试了所有可能的方法，包括垂直堆栈视图，但无论我尝试什么，它要么在 7 和 6 上看起来不错，但在 SE/4S 上看起来很糟糕，反之亦然（在 SE/4S 上很好，但太多了7/6 上的空白）。

At this point I am not sure what else I can do. I know it is not possible to design a UI just for a specific screen size and vary for traits is not what I need because I only intend to support vertical orientation.

在这一点上，我不确定我还能做什么。我知道不可能只为特定的屏幕尺寸设计 UI，并且不同的特征不是我需要的，因为我只打算支持垂直方向。

Any help or suggestion will be greatly appreciated.

任何帮助或建议将不胜感激。

采纳答案by Ali Beadle

As you have said in your own comment, you can restrict the device sizes indirectly by restricting the iOS version. However that is not a good solution: If you are creating the app for commercial reasons that will unnecessarily restrict your market (there are a lot of 4S users out there); If you are learning app development, now is a good time to work out how to manage GUI layout problems properly (there will always be a wide range of display sizes to cope with).

正如您在自己的评论中所说，您可以通过限制 iOS 版本来间接限制设备尺寸。然而，这不是一个好的解决方案：如果您出于商业原因创建应用程序，这会不必要地限制您的市场（那里有很多 4S 用户）；如果您正在学习应用程序开发，现在是研究如何正确管理 GUI 布局问题的好时机（总会有各种各样的显示尺寸需要处理）。

There are several tools available to assist:

有多种工具可以提供帮助：

Auto Layout

自动布局

As others have said in comments, Auto Layout can help a lot. Don't just use it to position things though, but also to resize them to make best use of the available space.

正如其他人在评论中所说，自动布局可以提供很多帮助。不要只是用它来定位东西，还要调整它们的大小以充分利用可用空间。

Understanding Auto Layout (Apple)

了解自动布局 (Apple)

Size Classes

尺码等级

Size Classes allow you to use different constraints and turn on or off controls depending on the general size and orientation of your user's device. For example, where space is restricted you could hide individual controls and instead display a single control to take the user to them elsewhere (another view or a popover for example).

尺寸类允许您根据用户设备的一般尺寸和方向使用不同的约束并打开或关闭控件。例如，在空间受限的情况下，您可以隐藏单个控件，而是显示单个控件以将用户带到其他地方（例如另一个视图或弹出窗口）。

Size-Class-Specific Layout (Apple)

特定于尺寸类的布局 (Apple)

Scroll Views

滚动视图

You can make part or all of your GUI a scroll view that on larger devices will show all the controls whilst on smaller devices initially show just the top ones but still give your users access to the others (don't forget to flash the scroll bars when the view first appears to show them that there is more to see though).

您可以将部分或全部 GUI 设置为滚动视图，在较大的设备上将显示所有控件，而在较小的设备上最初仅显示顶部的控件，但仍允许您的用户访问其他控件（不要忘记闪烁滚动条当视图第一次出现向他们表明还有更多可看的时候）。

Separate Storyboards

单独的故事板

Although you have not mentioned iPad support, you can also specify completely separate storyboards to help layout universal apps.

虽然你没有提到 iPad 支持，但你也可以指定完全独立的故事板来帮助布局通用应用程序。

See this SO answerand it's linked reference for details.

有关详细信息，请参阅此 SO 答案及其链接参考。