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

How to set up different Auto Layout constraints for different screen sizes

提问by Vitya Shurapov

I have a tableView with static cells. The cell contains an ImageView which fills it completely. And I have another smaller ImageViews atop. I position this ImageViews with constraints. I have a question about resizing the constraints. How can I set different constraint constants for different devices sizes without programming if/else loops. Is there a way to set it in the storyboard? I have a leading constraint to parent layout for example with an constant value of 10. This is okay for the iPhone 5 screen, but on an iPhone 6/ 6 plus screen it should be higher than 10.

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

iPhone5 Autolayout

iPhone5 自动布局

iPhone6 Autolayout

iPhone6 自动布局

采纳答案by tryKuldeepTanwar

Without writing a single line of Code!

不用写一行代码！

Once my junior developer asked me the same question that how can I differentiate between iPhoneSE and iPhone6 for some constraint at that time there was only one solution that was writing some thing like

有一次我的初级开发人员问我同样的问题，当时我如何区分 iPhoneSE 和 iPhone6 的某些限制，当时只有一个解决方案正在编写类似的东西

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

To overcome this issue I created a library Layout Helperso now you can update constraint for each device without writing a single line of code.

为了解决这个问题，我创建了一个库Layout Helper，所以现在您可以更新每个设备的约束，而无需编写一行代码。

Step 1

第1步

Assign the NSLayoutHelper to your constraint

将 NSLayoutHelper 分配给您的约束

Step 2

第2步

Update the constraint for the device you want

更新所需设备的约束

Step 3

第 3 步

Run the app and see the MAGIC

运行应用程序并查看 MAGIC

回答by Saheb Roy

Very easy. You can change constants values for difference size classes in Storyboard. I am giving u a few steps after which you will be able to grasp it.

好简单。您可以在 Storyboard 中更改不同大小类的常量值。我给你几个步骤，之后你就能掌握它。

First we create constants as you can see on this view

首先，我们创建常量，如您在此视图中所见

Next we select the constant we want to change the value in other size classes.

接下来，我们选择要更改其他大小类中的值的常量。

Now comes the tricky part. In the attribute inspector after selecting the constant, you can see the value of the constant. Right beside you can see the PLUS (+)sign, left of the "constant".

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

Click on it and select your size class that you want. Here i have selected Regular Height Regular Width i.e for iPad sizes.

单击它并选择您想要的尺码等级。在这里，我为 iPad 尺寸选择了常规高度常规宽度。

Next we give it a new value. So the constant, which normally is of value 61, will function as 10 when rendered in a size class of iPad size classes.

接下来我们给它一个新的值。因此，通常值为 61 的常量在以 iPad 尺寸等级的尺寸等级呈现时将起到 10 的作用。

Here is the output --

这是输出——

iPhone 4:

iPhone 4：

iPad Air:

iPad Air：

As you can see, the same constants has different value in runtime corresponding to different size classes.

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

Hope my explanation helped you.

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

回答by Vitya Shurapov

Finally, I`ve found the solution which works in my case.

最后，我找到了适合我的解决方案。

1. I put the transparent view and added Align Center X/Y to Superview(background image) with the needed offset in the way which it suits my frame for posters(on the background image)- Constraints for the transparent view
2. Then I attach Equal width/height to my Superview(background image) for that transparent view and change multiplier in equal width(manually I picked 0.61)
3. After that, I landed my 1 poster. I also centered both vertically and horizontally with offset and used this set of constraints- Proportional width to Superview, Aspect ratio.
4. And the last I disposed my second poster with this constraints- Leading space to Poster1, Align CenterY to Poster1(with the offset in my case) and Equal width/height. Constraints for the Poster 1/2

1. 我把透明视图和对齐中心 X/Y 添加到 Superview（背景图像）与所需的偏移量，它适合我的海报框架（在背景图像上）-透明视图的约束
2. 然后我将等宽/高度附加到我的超级视图（背景图像）以获取该透明视图并更改等宽的乘数（我手动选择了 0.61）
3. 在那之后，我登陆了我的 1 张海报。我还使用偏移量垂直和水平居中，并使用了这组约束 - 与 Superview 的比例宽度，纵横比。
4. 最后我用这个约束处理了我的第二张海报 - 将空间引导到海报 1，将 CenterY 对齐到海报 1（在我的情况下有偏移）和等宽/高度。海报 1/2 的限制

As the result, I have really adaptive Autolayout which works almost great on iPhones 5-6-6+

结果，我有真正的自适应自动布局，它在 iPhone 5-6-6+ 上几乎很好用

回答by Jam

You can use BayKitfor this job.

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

What is BayKit:

什么是 BayKit：

Calculates the global offset for all screen sizes by depending on given screen size and given offset.

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

How to use BayKit:Usage is very easy, just import BayKit and set constant value with BayKit like this:

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

As you can see this line calculating offset for all screen sizes:

如您所见，此行计算所有屏幕尺寸的偏移量：

magicOffset.offseter(scaleFactor: 1.0, offset: 24, direction: .horizontal, currentDeviceBound: BayKit.DeviceList.iPhone5.screenWidth)

magicOffset.offseter(scaleFactor: 1.0, offset: 24, direction: .horizontal, currentDeviceBound: BayKit.DeviceList.iPhone5.screenWidth)

Offseter Features:

胶印机特点：

• scaleFactor:You can set if you want bigger or smaller then given offset(for default set 1.0).
• offset:Preferred constant in tested device.
• direction:Which direction are you looking for,i.e. (for width, leading, trailing use .horizontal,for height, top, bottom use .vertical)
• currentDeviceBound:Find your best fit device and set as a main device with this. BayKit will calculate constraints with depending on your best fit screen!

• scaleFactor：您可以设置是否要更大或更小，然后给定偏移量（默认设置为 1.0）。
• 偏移：测试设备中的首选常量。
• 方向：您要寻找哪个方向，即（宽度、前导、尾随使用 .horizo​​ntal，高度、顶部、底部使用 .vertical）
• currentDeviceBound：找到您最合适的设备并设置为主设备。BayKit 将根据您最适合的屏幕计算约束条件！

Example Result:

示例结果：