如何在 Interface Builder 中定位 3.5” 和 4” Retina 的视图?

Posted

技术标签:

【中文标题】如何在 Interface Builder 中定位 3.5” 和 4” Retina 的视图?【英文标题】:How do I position views in Interface Builder for both 3.5” and 4” Retina? 【发布时间】:2012-11-11 01:18:37 【问题描述】:

我想定位一个 UIView,使它出现在 3.5” 和 4” Retina 屏幕的中心。做这个的最好方式是什么?如果我关闭所有 Autosizing 条,我希望它与屏幕中心对齐,但这似乎不会发生。

我很高兴使用新的 Autolayout,但我也不知道如何使用它。

【问题讨论】:

【参考方案1】:

为您的 XIB 执行以下步骤,您应该会为您的视图获得正确的大小调整:

    为了无缝兼容 ios4,首先将顶视图大小设置为 Retina 3.5 大小。

    移除顶视图的尺寸参数并将其设置为“无”。您现在应该有一个大小正确但没有固定设置大小选项的主视图。

    在“尺寸检查器”选项卡下为顶视图启用所有垂直自动调整大小。

    对每个子视图执行以下操作

    选择视图并转到尺寸检查器选项卡 选择排列(垂直居中或对齐) 如果您希望它居中,请删除自动调整大小框中的两个对齐标记。如果您希望它“粘性”,请选择其中之一,如果您希望它填充父项,请选择两者。 通过突出显示或取消突出显示垂直的“双尖箭头”来选择是否应相对调整大小 此时确保所有元素都位于 3.5 英寸视图中的预期位置 - 这对于它在 iOS4 上的工作至关重要。

    保存您的更改。通过选择顶视图并选择大小来检查您的自动调整大小是否成功:“Retina 4 Full Screen”。执行此操作时,您的视图应该看起来像您的预期结果。

    撤消 5 中的更改(使 xib 中的视图再次具有 3.5 大小,但 Size 选项设置为“None”,保存并运行您的应用。

这也适用于 iOS4,因为视图的大小已经针对 Retina 3.5 进行了调整,因此不会对旧屏幕大小使用自动调整大小。

在某些情况下,不可能为所有元素获得正确的尺寸/位置。在这些情况下,您需要以编程方式更改 4" 屏幕尺寸的视图尺寸位置。

【讨论】:

抱歉,我今天没有机会尝试这个...我会尽快告诉你我的进展情况,谢谢!我假设此方法关闭了自动布局? 恐怕我被困在第 3 点上。“查看”选项卡在哪里? Size 检查器是所有 Autosizing 参数所在的地方。 我还是投了赞成票,因为您关于为 3.5" 屏幕布置所有内容的观点是这里最重要的一点。但是,将尺寸参数更改为 "none" 似乎对我。我也可以很高兴地在 3.5" 和 4" 尺寸之间切换以检查它是否正常工作。使用旧的 Autosizing 方法调整新 iPhone 5 的参数大小似乎很奇怪! 抱歉回复晚了。是的,我刚刚看到我读错了,它应该是第 3 点中的尺寸检查器。切换到无可能没有效果,除非你可以在 Interface Builder 中更改视图的尺寸。但对我来说,不将其锁定为固定大小是有道理的。我希望你终于让它工作了=)【参考方案2】:

使用自动布局在 IB 的父(容器)视图中居中:

选择您的视图 进入菜单并选择Editor->Align->Horizo​​ntal/Vertical Center in Container 选项

但是,只有在您支持 iOS 6 及更高版本时才能使用自动布局,如果您针对较早的操作系统版本,则必须使用其他方法(例如,使用 Eric 建议的代码设置居中视图)

【讨论】:

谢谢!不过我忘了提一件事,我的应用程序适用于 iOS 4 及更高版本。这会好吗?我已将部署目标设置为 4.0,当我将它编译到我的 iOS 6 设备时它不会抱怨... 很遗憾,这不适用于我的 iPhone 4S。它在 iPod touch 5G 上可以正常显示,但是当我查看我的 iPhone(3.5 英寸显示屏)时,视图与屏幕底部对齐。 您必须首先在设计视图时考虑 3.5",然后设置自动调整大小选项以使其正确拉伸到 4"。您可以对其进行测试,使其在 Interface builder 中正常工作。请参阅我的回答,了解我是如何做到的。【参考方案3】:

以下是手动操作的方法(不使用 AutoLayout):

int screenWidth = [[UIScreen mainScreen] applicationFrame].size.height;
int screenHeight = [[UIScreen mainScreen] applicationFrame].size.width;

UIView *myView = [[UIView alloc] initWithFrame:CGRectMake(0,0,100,200)];
[myView setCenter:CGPointMake(screenWidth/2, screenHeight/2)];

[self.view addSubview:myView];

【讨论】:

我知道如何在代码中做到这一点,谢谢,但是因为我有很多 nib 文件,我更愿意在 Interface Builder 中学习如何做到这一点。

以上是关于如何在 Interface Builder 中定位 3.5” 和 4” Retina 的视图?的主要内容,如果未能解决你的问题,请参考以下文章

如何像 Interface Builder 一样调整 iOS UI 组件的大小

Interface Builder 以小增量降低情节提要、调整大小和重新定位视图

使用 Interface Builder 动态调整 UILabel 的大小并在其下方重新定位 UIView

有没有办法在 Interface Builder 中预加载 WKWebView?

如何在 Xcode Interface Builder 中显示占位符背景?

如何在 Xcode 6 Interface Builder 中使用模板渲染模式?