来自 XIB 的视图的自动布局约束 [英] Autolayout Contraints for a View from XIB

问题描述

我正在从一个圆加载一个视图(一个圆的形状).我想确保圆圈的大小适应各种屏幕尺寸.到目前为止，我尝试将视图放在另一个视图中，将边距固定到超级视图，然后将超级视图的纵横比设置为 1:1.这给了我一个圆圈.但是，现在，我想更改其大小.目前，superview 的大小由其中的另一个 subview 指定，一个标签.根据标签的内容，超级视图的大小会发生变化(我已将标签的字体大小设置为 Autoshrink).如果我尝试向边距约束添加一个常量，它会起作用，但在不同的屏幕尺寸上看起来大小相同.此外，我尝试添加一个乘数，而乘数适用于尾随和底部边距，顶部和前边距不会受到设置乘数的影响.下面是 IB 的屏幕截图(今日视图是问题中的形状).

I am loading a view (shaped a circle) from a circle. I want to make sure, the circle's size adapts to various screen sizes. So far I tried placing the view inside another view, pinning the margins to the superview and then setting the superview's aspect ratio to 1:1. This gives me a circle. However, now, I want to change its size. Currently, the superview's size is specified by another subview in it, a label. Depending on the contents of the label, the superview's size changes (I have set the label's font size to Autoshrink). If I try to add a constant to the margin constraints it works, but looks the same size across different screen sizes. Also, I tried adding a multiplier, while the multiplier works for trailing and bottom margins, top and leading margins don't get affected by setting the multiplier. Below is a screenshot of the IB (Today View is the shape in the question).

推荐答案

你有一个好的开始 - 对齐两个中心 X &Y，1:1 的比例.您需要添加的只是两组具有不同优先级的顶部/底部和前导/尾随约束.这是一个示例，结合您拥有的三个约束，可以将所有方向的视图居中，并沿较窄的轴设置 10 点边框:

You have a good start - aligning both center X & Y, 1:1 ratio. All you need to add is two sets of top/bottom and leading/trailing constraints with different priorities. Here's an example, which combined with the three constraints you have, would center a view in all orientations with a 10 point border along the narrower axis:

优先级 == 750

• 顶部 == 10 分
• 底部 == 10 分
• 领先 == 10 分
• 尾随 == 10 分

优先级 == 1000

• 顶部 >= 10 分
• 底部 >= 10 分
• 领先 >= 10 分
• 落后 >= 10 分

执行此操作时您可能会看到错误/警告，因为 IB 不知道如何渲染它，但是一旦您完成此操作，您将拥有所需的内容.

You may see errors/warnings while doing this because IB doesn't know how to render it, but once you've completed this, you'll have what you need.

从记忆中，有点和像素.在可能的时间和地点，尝试从要点的角度思考.关于像素，您可能唯一希望考虑的是图像.(可能还有其他图形测量方法，但同样，我是凭记忆写的.)

From memory, there are points and pixels. When and where possible, try to think in terms of points. About the only time you may wish to think in terms of pixels is with images. (There may be other measurements of graphics, but again, I'm writing from memory.)

点应该在设备尺寸上保持一致 - 因此，如果您在 4 英寸 iPhone 屏幕上有一个 100x100 的正方形，那么它在 12.9 英寸 iPad Pro 上的尺寸将相同.

Points should be consistent across device size - so if you have a 100x100 square in a 4 inch iPhone screen, it will be the same size on a 12.9 inch iPad Pro.

更重要的是，边距可以使用自动布局设置相同.这两个屏幕上的 25 点边距是相同的.因此，在我上面的示例中，您将在所有设备上获得几乎最大的矩形，因为您设置的是边距，而不是视图大小.

More importantly, the margins can be set the same using auto layout. A 25 point margin will be the same on both of those screen. So in my example above, you will get pretty much the largest rectangle possible across all devices since you are setting margins, not view size.

去年我深入研究了屏幕尺寸，这些是当前的屏幕尺寸:

I did a dive into screen sizes last year, and these are the current screen sizes:

//iPad Pro        1366x1024
//iPad            1024x768
//iPad Mini       1024x468
//iPhone 6 Plus   736x414
//iPhone 6        677x375
//iPhone 5        568x320
//iPhone 4        480x320

因此，基于此，上述约束将在 iPhone 4(也包括 iPhone SE)上产生一个 300x300 的正方形，因为最窄的轴将是 320 减去两个 10 点的边距.在 12.9 英寸 iPad Pro 上，它将是一个 1004x1004 的正方形.

So based on this the above constraints would yield a 300x300 square on an iPhone 4 (iPhone SE also) as the narrowest axis will be 320 less two 10 point margins. And on an iPad Pro 12.9 inch it will be a 1004x1004 square.

在代码中创建约束时，您还可以使用以下代码创建layoutMarginGuide:

When you create constraints in code, you can also create a layoutMarginGuide with this code:

    let margins = view.layoutMarginsGuide

这应该与在 IB 中选中包含边距"复选框相同.本质上，这是每个设备的推荐边距大小.(我相信这还应该包括状态栏、标签和导航栏，甚至 iPhone 的电话顶部横幅(原文如此)".但我遇到了一些问题，所以 YMMV.)

This should be the same thing as keeping the "contain to margins" checkbox checked in IB. Essentially this is the recommended size of margins for each device. (I believe this should also include the status bar, tab and navigation bars, and even the iPhone "phone call top banner (sic)". But I've had some issues with this so YMMV.)

编辑 2:

将所有这些放在一起，您通过自动布局"定义的是一种非常流畅的最大化正方形大小(或者在您的情况下，正方形变成圆形)的方法.通过设置两组边距，一组 等于，但具有 高 优先级，您可以让自动布局知道它可能会突破所需的约束.大于或等于值的第二组是必需的.

Putting this all together, what you are defining through "auto layout" is a very fluid way of maximizing the size of a square (or in your case, a square turned into a circle). By setting two sets of margins, one set equal to but with a high priority, you are letting auto layout know that it may break this over required constraints. The second set with greater than or equal to values is required.

因此，在 480x320 设备中，无法满足(等于")的顶部/底部边距约束可以被打破，而在横向中，无法满足的前导/尾随限制将被打破.请记住，您已经设置了中心 X/Y，因此视图将居中，并且您设置了 1:1 比例，因此它将是方形的.(只要您没有触及优先级 - 默认是必需的.

Thus, in a 480x320 device, the top/bottom margin constraints that cannot be met ("equal to") can be broken, and in landscape the leading/trailing ones that cannot be met will be broken. Remember, you already set the center X/Y, so the view will be centered, and you set the 1:1 ratio so it will be square. (As long as you did not touch the priorities - the default is required.

这篇关于来自 XIB 的视图的自动布局约束的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！