如何为不同的屏幕尺寸设置不同的自动布局约束
How to set up different Auto Layout constraints for different screen sizes
我有一个带有静态单元格的 tableView。该单元格包含一个完全填充它的 ImageView。我在上面还有另一个较小的 ImageView。我将此 ImageViews 放置在约束条件下。我有一个关于调整约束的问题。
如何在不编程 if/else 循环的情况下为不同的设备尺寸设置不同的约束常量。有没有办法在情节提要中设置它？例如，我对父布局有一个前导约束，其常量值为 10。这对于 iPhone 5 屏幕是可以的，但在 iPhone 6/ 6 plus 屏幕上它应该高于 10。
iPhone5 自动布局
iPhone6 自动布局
很简单。您可以在 Storyboard 中更改不同大小 classes 的常量值。我给你几个步骤，之后你就可以掌握它了。
首先我们创建常量，如您在此视图中所见
接下来我们 select 我们要更改其他大小的值的常量 classes.
棘手的部分来了。在 selecting 常量后的属性检查器中，您可以看到常量的值。在你旁边可以看到 PLUS (+) 标志，在 "constant".
左边
单击它并 select 您想要的尺码 class。
这里我有 selected 常规高度常规宽度即 iPad 尺寸。
接下来我们给它一个新的值。因此，通常值为 61 的常量在以 iPad 大小 classes.
的大小 class 呈现时将作为 10
这是输出--
iPhone 4:
iPad空气：
如您所见，相同的常量在运行时具有不同的值，对应于不同的大小classes。
希望我的解释对你有所帮助。
最后，我找到了适用于我的情况的解决方案。
- 我将透明视图添加到 Superview（背景图像）的对齐中心 X/Y，并以适合我的海报框架（在背景图像上）的方式进行所需的偏移- Constraints for the transparent view
- 然后我将 Equal width/height 附加到我的透明视图的 Superview（背景图像）并更改等宽的乘数（我手动选择 0.61）
- 在那之后，我得到了我的 1 张海报。我还使用偏移量在垂直和水平方向居中并使用了这组约束 - 与 Superview 成比例的宽度，纵横比。
- 最后我用这个约束处理了我的第二张海报 - 引导 space 到 Poster1，将 CenterY 对齐到 Poster1（在我的例子中有偏移量）和等于 width/height。 Constraints for the Poster 1/2
因此，我拥有真正自适应的自动布局，它在 iPhone 5-6-6+ 上几乎可以正常工作
不写一行代码！
有一次我的初级开发人员问我同样的问题，即我如何区分 iPhoneSE 和 iPhone6 以解决当时的某些限制，只有一个解决方案正在编写类似
的内容
if device == iPhoneSE {
constant = 44
} else if device == iPhone6 {
constant = 52
}
为了克服这个问题，我创建了一个库 Layout Helper 因此现在您无需编写一行代码就可以更新每个设备的约束。
第 1 步
将 NSLayoutHelper 分配给您的约束
第 2 步
更新所需设备的约束条件
步骤 3
运行 应用程序并查看 MAGIC
您可以使用 BayKit 完成这项工作。
什么是 BayKit:
Calculates the global offset for all screen sizes by depending on given screen size and given offset.
如何使用BayKit：
使用非常简单，只需导入 BayKit 并使用 BayKit 设置常量值，如下所示：
import BayKit
class MyViewController: UIViewController {
lazy var box = UIView()
let magicOffset = BayKit()
override func viewDidLoad() {
super.viewDidLoad()
view.addSubview(box)
box.translatesAutoresizingMaskIntoConstraints = false
box.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: magicOffset.offseter(scaleFactor: 1.0,
offset: 24, direction: .horizontal, currentDeviceBound: BayKit.DeviceList.iPhone5.screenWidth)).isActive = true
}
}
如您所见，此行计算所有屏幕尺寸的偏移量：
magicOffset.offseter(scaleFactor: 1.0, offset: 24, direction: .horizontal, currentDeviceBound: BayKit.DeviceList.iPhone5.screenWidth)
偏移器特点：
- scaleFactor: 如果你想要比给定的偏移量更大或更小，你可以设置（默认设置为 1.0）。
- 偏移量： 测试设备中的首选常数。
- 方向：你要找哪个方向，即（对于宽度、前导、尾随使用 .horizontal，对于高度、顶部、底部使用 .vertical）
- currentDeviceBound: 找到您最适合的设备并以此设置为主设备。 BayKit 将根据您最适合的屏幕计算约束条件！
示例结果：
我有一个带有静态单元格的 tableView。该单元格包含一个完全填充它的 ImageView。我在上面还有另一个较小的 ImageView。我将此 ImageViews 放置在约束条件下。我有一个关于调整约束的问题。 如何在不编程 if/else 循环的情况下为不同的设备尺寸设置不同的约束常量。有没有办法在情节提要中设置它？例如，我对父布局有一个前导约束，其常量值为 10。这对于 iPhone 5 屏幕是可以的，但在 iPhone 6/ 6 plus 屏幕上它应该高于 10。
iPhone5 自动布局
iPhone6 自动布局
很简单。您可以在 Storyboard 中更改不同大小 classes 的常量值。我给你几个步骤，之后你就可以掌握它了。
首先我们创建常量，如您在此视图中所见
接下来我们 select 我们要更改其他大小的值的常量 classes.
棘手的部分来了。在 selecting 常量后的属性检查器中，您可以看到常量的值。在你旁边可以看到 PLUS (+) 标志，在 "constant".
左边单击它并 select 您想要的尺码 class。 这里我有 selected 常规高度常规宽度即 iPad 尺寸。
接下来我们给它一个新的值。因此，通常值为 61 的常量在以 iPad 大小 classes.
的大小 class 呈现时将作为 10这是输出--
iPhone 4:
iPad空气：
如您所见，相同的常量在运行时具有不同的值，对应于不同的大小classes。
希望我的解释对你有所帮助。
最后，我找到了适用于我的情况的解决方案。
- 我将透明视图添加到 Superview（背景图像）的对齐中心 X/Y，并以适合我的海报框架（在背景图像上）的方式进行所需的偏移- Constraints for the transparent view
- 然后我将 Equal width/height 附加到我的透明视图的 Superview（背景图像）并更改等宽的乘数（我手动选择 0.61）
- 在那之后，我得到了我的 1 张海报。我还使用偏移量在垂直和水平方向居中并使用了这组约束 - 与 Superview 成比例的宽度，纵横比。
- 最后我用这个约束处理了我的第二张海报 - 引导 space 到 Poster1，将 CenterY 对齐到 Poster1（在我的例子中有偏移量）和等于 width/height。 Constraints for the Poster 1/2
因此，我拥有真正自适应的自动布局，它在 iPhone 5-6-6+ 上几乎可以正常工作
不写一行代码！
有一次我的初级开发人员问我同样的问题，即我如何区分 iPhoneSE 和 iPhone6 以解决当时的某些限制，只有一个解决方案正在编写类似
的内容if device == iPhoneSE {
constant = 44
} else if device == iPhone6 {
constant = 52
}
为了克服这个问题，我创建了一个库 Layout Helper 因此现在您无需编写一行代码就可以更新每个设备的约束。
第 1 步
将 NSLayoutHelper 分配给您的约束
第 2 步
更新所需设备的约束条件
步骤 3
运行 应用程序并查看 MAGIC
您可以使用 BayKit 完成这项工作。
什么是 BayKit:
Calculates the global offset for all screen sizes by depending on given screen size and given offset.
如何使用BayKit： 使用非常简单，只需导入 BayKit 并使用 BayKit 设置常量值，如下所示：
import BayKit
class MyViewController: UIViewController {
lazy var box = UIView()
let magicOffset = BayKit()
override func viewDidLoad() {
super.viewDidLoad()
view.addSubview(box)
box.translatesAutoresizingMaskIntoConstraints = false
box.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: magicOffset.offseter(scaleFactor: 1.0,
offset: 24, direction: .horizontal, currentDeviceBound: BayKit.DeviceList.iPhone5.screenWidth)).isActive = true
}
}
如您所见，此行计算所有屏幕尺寸的偏移量：
magicOffset.offseter(scaleFactor: 1.0, offset: 24, direction: .horizontal, currentDeviceBound: BayKit.DeviceList.iPhone5.screenWidth)
偏移器特点：
- scaleFactor: 如果你想要比给定的偏移量更大或更小，你可以设置（默认设置为 1.0）。
- 偏移量： 测试设备中的首选常数。
- 方向：你要找哪个方向，即（对于宽度、前导、尾随使用 .horizontal，对于高度、顶部、底部使用 .vertical）
- currentDeviceBound: 找到您最适合的设备并以此设置为主设备。 BayKit 将根据您最适合的屏幕计算约束条件！
示例结果：