如何为不同的屏幕尺寸设置不同的自动布局约束

时间:2016-06-24 11:25:07

标签: ios swift uitableview uiimageview ios-autolayout

我有一个带静态单元格的tableView。单元格包含一个完全填充它的ImageView。我还有另一个较小的ImageViews。我使用约束来定位这个ImageViews。我有一个关于调整约束的问题。 如何在不编程if / else循环的情况下,如何为不同的设备大小设置不同的约束常量。有没有办法在故事板中设置它?我对父布局有一个主要限制,例如,常数值为10.这对于iPhone 5屏幕是可以的,但在iPhone 6/6 plus屏幕上它应该高于10。

iPhone5 Autolayout

Screen Shot

iPhone6 Autolayout

Screen shot

4 个答案:

答案 0 :(得分:52)

很简单。您可以在Storyboard中更改差异大小类的常量值。我给你一些步骤,之后你就能掌握它。

首先我们在此视图中创建常量 enter image description here

接下来,我们选择我们想要更改其他大小类中的值的常量。 enter image description here

现在是棘手的部分。在选择常量后的属性检查器中,您可以看到常量的值。在你旁边可以看到加号(+)符号,左边是“常量”。 enter image description here

单击它并选择所需的尺寸等级。 在这里,我选择了常规高度常规宽度,即iPad尺寸。 enter image description here

接下来我们给它一个新值。因此,当在大小类的iPad大小类中渲染时,常量值(通常为61)将在10时起作用。 enter image description here

这是输出 - iPhone 4 - enter image description here

iPad Air - enter image description here

如您所见,相同的常量在运行时对应于不同的大小类具有不同的值。

希望我的解释对你有帮助。

答案 1 :(得分:5)

无需编写任何代码!

一旦我的初级开发人员问了我一个相同的问题,那就是当时我该如何区分iPhoneSE和iPhone6的某些约束,只有一个解决方案正在编写类似的东西

if device == iPhoneSE { 
   constant = 44 
} else if device == iPhone6 {
   constant = 52
}

为解决此问题,我创建了一个库Layout Helper,现在您无需编写任何代码即可更新每个设备的约束。

enter image description here

步骤1

将NSLayoutHelper分配给您的约束

enter image description here

步骤2

更新所需设备的约束

enter image description here

步骤3

运行该应用程序并查看MAGIC

enter image description here

答案 2 :(得分:4)

最后,我找到了适用于我的解决方案。

  1. 我把透明视图添加到Superview(背景图像)中的Align Center X / Y,其中所需的偏移量适合我的海报框架(在背景图像上) - Constraints for the transparent view
  2. 然后我将Equal宽度/高度添加到我的Superview(背景图像)以获得该透明视图并更改相等宽度的乘数(手动我选择了0.61)
  3. 之后,我登陆了我的一张海报。我还使用偏移量垂直和水平居中并使用这组约束 - 比例宽度到Superview,宽高比。
  4. 最后我用这个限制条件处理了我的第二张海报 - 领先的空间到Poster1,将中心对齐到Poster1(在我的情况下偏移)和等宽/高度。 Constraints for the Poster 1/2
  5. 结果,我有自适应的Autolayout,它在iPhone 5-6-6 +

    的iPhone上运行得非常好

答案 3 :(得分:1)

您可以使用BayKit来完成这项工作。

什么是BayKit

根据给定的屏幕尺寸和给定的偏移量来计算所有屏幕尺寸的全局偏移量。

如何使用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)

Offseter功能:

  • scaleFactor::您可以设置是否要大于或小于给定的偏移量(默认设置为1.0)。
  • 偏移量:被测设备中的首选常数。
  • 方向:您要寻找的方向,即(对于宽度,前导,尾部使用.horizo​​ntal,对于高度,顶部,底部使用.vertical)
  • currentDeviceBound::找到最合适的设备并将其设置为主设备。 BayKit将根据您最适合的屏幕来计算约束!

示例结果:

enter image description here