ios - 在 ib 中布局应用程序时的格式与在模拟器中不同

Question

我只是在学习如何制作应用程序，我注意到的第一件事是当我在界面构建器中以图形方式布置我的应用程序时，当我在模拟器或我自己的设备上运行它时并不相同。我有两张正在发生的事情的屏幕截图..

注意段和开关之间的空间......它们是不同的，当我想向上移动开关时会导致问题......

我怎样才能解决这个问题？看起来可能与较新 iPhone 的更大屏幕尺寸有关，这不是我的模拟器中运行的内容......如果是这样，在设计在两部手机上看起来都不错的应用程序时，我应该知道哪些事情？

Answer 1

我认为您诊断出的问题是 Interface Builder 向您显示 4" 屏幕，但您的模拟器向您显示 3.5" 屏幕。在 Interface Builder 中，您可以单击主面板右下角的以下按钮在 4" 和 3.5" 显示之间切换：

您也可以在模拟器中，从“硬件”菜单中选择您的“设备”为 3.5 英寸屏幕或 4 英寸屏幕，这样您就可以模拟在两个大小的应用屏幕上运行您的应用。顺便说一句，当你进入“视网膜”模拟器时，它会在屏幕上显示两倍大（因为屏幕的分辨率是原来的两倍）。但是您可以通过使用模拟器“窗口”菜单上的“缩放”选项来控制模拟器窗口的大小。这只会改变模拟器在 Mac 屏幕上再现模拟设备的大小。但是，如果您在较小的 Mac 屏幕上工作，有时您会发现这个“缩放”选项也很有用。

但是你真的想确保你的应用程序运行良好，不管屏幕大小，所以你真的应该测试这两种尺寸的应用程序。您希望您的应用程序在 iPhone 4 设备和 iPhone 5 设备上都能很好地呈现。幸运的是，您可以通过一个故事板来实现这一点。

就两种尺寸屏幕上控件布局的规定而言，这取决于您是否使用自动布局。您可以通过单击最右侧面板的第一个选项卡并选中或取消选中“使用自动布局”复选框来控制它：

如果不使用自动布局（例如，如果您的应用程序要在 iOS 5 上运行，这很重要），您可以转到自动调整大小的蒙版选项卡并控制决定布局的“弹簧和支柱”。例如，如果您单击场景中的某个控件，则可以通过查看“尺寸检查器”选项卡来控制边距是否应随着尺寸的变化而变化，或者布局是否应该变化：

如果您将鼠标悬停在该“示例”窗口上，它将动画化大小将如何随着其父视图的大小而变化（例如，iPhone 是否具有 3.5" 屏幕或 4" 屏幕）。

另一方面，如果您使用自动布局（仅适用于运行 iOS 6 及更高版本的设备），屏幕上的布局由您为视图定义的“约束”决定（请参阅后半部分）下图）：

Answer 2

如果您想完美控制布局，您应该有 2 个不同的 XIB，一个用于标准屏幕 (320 x 480)，另一个用于新 iPhone 5 屏幕 (320 x 568)。这样，您可以准确指定每个元素将出现的位置，并且您不会对不同的屏幕尺寸感到惊讶。

但是在任何情况下，您都应该始终对放入 XIB 中的每个元素的锚定和自动调整大小进行良好配置。

以下内容来自本教程。

当屏幕在 iOS 设备上旋转时，您可以管理 UI 对象如何改变它们的位置，或者它们是否拉伸以填充新窗口。这一切都可以通过 Interface Builder 中的这个简单的小工具来管理。

左边的框是您决定对象如何缩放的地方，右边的框是在修改布局框架时对象将如何执行的动画可视化。左侧的外框是您设置“锚点”或对象将锁定在哪一侧的位置。当屏幕尺寸发生变化时，选择的任何一侧都会使对象粘在该一侧。内部正方形具有用于拉伸的控件。当对象被锁定在两侧并且屏幕改变其宽度时，可以告诉对象与屏幕一起拉伸。值得一试这些设置并查看不同配置的结果。