25

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

我将自动布局与 ios6（和 ios7）一起使用，我不必支持 landscpae 或 ipad。我有一个带有几个子视图的 UIView，它们必须看起来像下面的模型。在故事板中设置自动布局约束以适应任何一种屏幕尺寸都很容易。我的问题是 -如何让自动布局在运行时根据屏幕大小选择正确的约束？

屏幕模型

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

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

  • 双重约束。较大的约束 (50) 具有比较低的约束 (30) 更高的优先级。这种方法的问题在于，在 3.5" 屏幕尺寸上，自动布局可能会选择一些较低优先级的约束——足以满足布局——但会留下一些高优先级的约束。

双重约束

  • 子类 NSLayoutConstraint。在这个方法中，storyboard 中的所有约束都设置为 NSDualLayoutConstraint。在 NSDualLayoutConstraint 的初始化代码中，将约束的常量更改为 3_5_constant 的值，以防运行时屏幕大小为 3.5"。这种方法更具确定性，但在界面生成器预览中看不到 3.5" 布局.

在此处输入图像描述

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

4

4 回答 4

6

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

您只需要检测用户是否在 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];
于 2014-01-22T14:02:46.343 回答
2

这个stackoverflow答案为我解决了同样的问题。

关键是为约束（例如高度）创建一个 IBOutlet。然后做这样的事情

- (void)updateViewConstraints {
    [super updateViewConstraints];

    self.myConstraintFromIB.constant =
        [UIScreen mainScreen].bounds.size.height > 480.0f ? 200 : 100;
}
于 2014-04-28T13:31:14.183 回答
1

您将需要以编程方式编辑您的约束。 您可能会发现这个问题对此很有帮助。

您还可以有两个单独的 Storyboard 文件，或者在一个 Storyboard 文件中包含两个 viewController 场景。

于 2013-11-21T22:03:07.197 回答
1

添加一个额外的视图并在其中包含方形视图怎么样？额外的视图应该是透明的，所以没有人看到它。将额外视图的约束设置为随屏幕大小扩展，并将方形视图的约束设置为在额外框中居中。选择相对于额外框的方形视图大小的乘数

于 2014-11-21T16:13:03.117 回答