来自XIB的Autolayout Contraints视图 [英] Autolayout Contraints for a View from XIB

问题描述

我正在从圆圈加载一个视图（形状为圆圈）。我想确保，圆圈的大小适应各种屏幕尺寸。到目前为止，我尝试将视图放在另一个视图中，将边距固定到superview，然后将superview的宽高比设置为1：1。这给了我一个圆圈。但是，现在，我想改变它的大小。目前，superview的大小由其中的另一个子视图指定，即标签。根据标签的内容，superview的大小会发生变化（我已将标签的字体大小设置为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分

• Top == 10 points
• Bottom == 10 Points
• Leading == 10 points
• Trailing == 10 points

优先级== 1000

• Top> = 10分


• 底部> = 10分


• 领先> = 10分


• 尾随> = 10分

• Top >= 10 points
• Bottom >= 10 Points
• Leading >= 10 points
• Trailing >= 10 points

您可能会在执行此操作时看到错误/警告，因为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.)

点数应该在设备大小上保持一致 - 所以如果你有100x100平方在4英寸iPhone屏幕上，它在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点的边距。而在iPad Pro的12.9英寸这将是一个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：

把这一切放在一起，你通过自动布局定义的是一个非常好的最大化正方形尺寸的流动方式（或者在您的情况下，正方形变成圆形）。通过设置两组边距，一组等于但具有高优先级，您可以让自动布局知道它可能会超出所需的约束。 大于或等于值的第二个集合是 required 。

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的Autolayout Contraints视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！