xcode 如何在 Interface Builder 中为 3.5” 和 4” Retina 定位视图？

How do I position views in Interface Builder for both 3.5” and 4” Retina?

提问by jowie

I want to position a UIView so it appears in the centre on both 3.5” and 4” Retina screens. What is the best way to do this? If I turn off all the Autosizing bars I would expect it to align to the centre of the screen, but this doesn't seem to happen.

我想定位一个 UIView，使其在 3.5 英寸和 4 英寸 Retina 屏幕的中央显示。做这个的最好方式是什么？如果我关闭所有 Autosizing 栏，我希望它与屏幕中心对齐，但这似乎不会发生。

I am happy to use the new Autolayout, but I don't know how to get it to do this either.

我很高兴使用新的自动布局，但我也不知道如何让它做到这一点。

回答by jake_hetfield

Follow these steps for your XIB and you should be getting the correct resizing for your views:

为您的 XIB 执行以下步骤，您应该会为您的视图正确调整大小：

1. For seamless iOS4 compatibility, start by setting the top view Size to Retina 3.5 size.

2. Remove the size parameter for the top view and set it to "none". You should now have a main view with the correct size but without a fixed set size option.

3. Turn on all autosizing vertically for the top view under the "Size inspector" tab.

4. For each of the subviews do the following

   • Select the view and go to the Size Inspector tab
   • Select Arrangement (Center vertically or align)
   • If you want it centered, remove the both the alignment markers in the Autosizing box. Select one of them if you want it "sticky" or both if you want it to fill parent.
   • Select if it should be resized relatively or not by highlighting or unhighlighting the vertical "double pointed arrow"
   • Make sure that all elements are located on their intended places in your 3.5" view at this point - this is crucial for it to work on iOS4.

5. Save your changes. Check if you were successful with your autoresizing by selecting the top view and choose size: "Retina 4 Full Screen". When doing this, your view should look like your intended result.

6. Undo the change in 5 (so that the view in the xib has the 3.5 size again, but the Size option set to "None", save and run your app.

1. 为了无缝兼容 iOS4，首先将顶视图大小设置为 Retina 3.5 大小。

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

3. 在“尺寸检查器”选项卡下为顶部视图垂直打开所有自动调整大小。

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

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

5. 保存您的更改。通过选择顶视图并选择大小：“Retina 4 Full Screen”，检查您的自动调整大小是否成功。这样做时，您的视图应该看起来像您想要的结果。

6. 撤消 5 中的更改（以便 xib 中的视图再次具有 3.5 大小，但大小选项设置为“无”，保存并运行您的应用程序。

This works for iOS4 also, because the size of the view is already adapted for Retina 3.5 thus no autosizing is used for the older screen size.

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

In some occasions, it is not possible to get the exact right sizes/positioning for all the elements. In these cases you need to programmatically change the views sizes position for the 4" screen size.

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

回答by Vladimir

To center view in its parent (container) view in IB with autolayout:

使用自动布局在 IB 的父（容器）视图中居中视图：

• Select you view
• go to menu and select Editor->Align->Horizontal/Vertical Center in Container option

• 选择您查看
• 转到菜单并选择 Editor->Align->Horizo​​ntal/Vertical Center in Container 选项

However you can use autolayout only if you support iOS 6 and later, if you target earlier OS versions you'll have to use other approaches (e.g. setting centring view with code as Eric suggested)

但是，仅当您支持 iOS 6 及更高版本时才能使用自动布局，如果您针对早期的操作系统版本，则必须使用其他方法（例如，使用 Eric 建议的代码设置居中视图）

回答by Eric

Here's how you would do it manually (without AutoLayout):

以下是您手动完成的方法（没有 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];