如何使用一个故事板用于带有自动布局的4“和3.5”iphone屏幕（ios 6 + ios7）？

Question

虽然有很多关于构建故事板布局的问题和答案，它可以在4“和3.5”屏幕尺寸上工作，但我找不到适合以下场景的解决方案。

我使用autolayout和ios6（和ios7），我不需要支持landscpae或ipad。我有一个带有几个子视图的UIView，它们必须看作下面的模型。 可以轻松地在故事板中设置自动布局约束以适应任一屏幕尺寸。我的问题是 - 如何根据运行时的屏幕尺寸选择自动布局选择正确的约束？

请注意，我不想使用2个不同的故事板。在我的整个应用程序中这样做将需要做很多工作，而且我必须在每个故事板上连接所有代理，出口和操作。屏幕上的变化需要我做两倍的工作。

我已经尝试了两种方法在一个故事板上完成这项工作，但我对其中任何一个都不满意。

• 加倍约束。较大的约束（50）具有比较低约束（30）更高的优先级。这种方法的问题在于，在3.5英寸的屏幕尺寸上，自动布局可能只选择几个较低优先级的约束 - 足以满足布局 - 但保留一些高优先级约束。

• 子类NSLayoutConstraint。在此方法中，故事板中的所有约束都设置为NSDualLayoutConstraint。在NSDualLayoutConstraint的初始化代码中，如果运行时屏幕大小为3.5“，则约束的常量将更改为3_5_constant的值。此方法更具确定性，但您无法在界面构建器预览中看到3.5”布局

---

如果只有界面构建器约束具有在屏幕大小为3.5“时应用的辅助常量值，那么它将解决我的问题。 所以我仍然坚持我的问​​题 - 如何才能正确使用单个故事板为4“和3.5”屏幕尺寸正确布局其子视图？

Answer 1

如果您只想使用一个故事板，并且您不想使用自动布局，这会使您的图表中显示的内容变得更加轻松，您将必须在代码中布局视图。 / p>

您只需要检测用户是否在4“设备上运行并相应地布局您的视图。

#define IS_568_SCREEN (fabs((double)[[UIScreen mainScreen]bounds].size.height - (double)568) < DBL_EPSILON)

if (IS_568_SCREEN) {
    // Lots of code to layout for 4" devices
} else {
    // Lots of code to layout for 3.5" devices
}

但是，如果你为此使用自动布局，你会发现它会为你节省大量的时间和代码。使用上面提到的解决方案而不必手动布局代码中的每个视图，您只需要根据设备更新y和高度约束。

考虑到此图表显示了自动布局将为您处理的内容以及您需要手动更新的内容，这可以帮助您更好地了解利用自动布局节省多少费用。

#define IS_568_SCREEN (fabs((double)[[UIScreen mainScreen]bounds].size.height - (double)568) < DBL_EPSILON)

if (IS_568_SCREEN) {
    self.layoutConstraintY.constant = 50.0f;
    self.layoutConstraintHeight.constant = 248.0f;
} else {
    self.layoutConstraintY.constant = 30.0f;
    self.layoutConstraintHeight.constant = 220.0f;
}
[self layoutIfNeeded];

Answer 2

这stackoverflow answer为我解决了同样的问题。

Key是将IBOutlet设为约束（例如height）。然后做这样的事情

- (void)updateViewConstraints {
    [super updateViewConstraints];

    self.myConstraintFromIB.constant =
        [UIScreen mainScreen].bounds.size.height > 480.0f ? 200 : 100;
}

Answer 3

您需要以编程方式编辑约束。 You may find this question helpful for that.

您还可以在一个故事板文件中有两个单独的Storyboard文件或两个viewController场景。

Answer 4

如何添加额外的视图并在其中包含方形视图？额外的视图应该是透明的，所以没有人看到它。设置额外视图的约束以使用屏幕大小进行扩展，并将方形视图的约束设置为在额外框中居中。选择相对于额外框

的方形视图大小的乘数