视图是水平，并与复杂的布局垂直暧昧 [英] Views are Horizontally and Vertically Ambiguous with complex layout

问题描述

我有一个的UIViewController 我的故事板在水平方向有2子视图一侧到另一侧。我添加的约束来固定前缘和后缘至恒定（20分），和另一约束保持的宽度相等。如果我假定以下，它应该可以计算了每个子视图的宽度将需要：

I have a UIViewController on my storyboard that has 2 subviews side-to-side horizontally. I added constraints to fix the leading and trailing edges to a constant (20 pts), and another constraint to keep the widths equal. If I assume the following, it should be possible to calculate what the width of each subview will need to be:

• 子视图不重叠


• 有没有其他意见present（水平，至少）


• 的屏幕（上海华）的宽度被称为

然而，X code给我一个警告，我的观点是模棱两可的水平。我猜这意味着X code未使这些假设之一，但哪一个是什么呢？ ，是有办法，我指示X code键使这样的假设？

However, XCode gives me a warning that my views are horizontally ambiguous. I'm guessing that means that XCode is not making one of these assumptions, but which one is it? And is there a way for me to instruct XCode to make that assumption?

编辑：好的，打了它一下，得到了警告消失，但它看起来像它不是做第一个假设 - 这是每个子视图的宽度只设置为 superview.width - 40 ，并愉快地埋另下面一个视图。所以，问题是我如何阻止他们重叠？

Okay, played with it a bit and got the warning to go away, but it looks like it's not making the first assumption - it's just setting each subview's width to superview.width - 40, and happily burying one view underneath the other. So the question is how to I stop them from overlapping?

编辑2：好了，我的实际屏幕是很多比我简单的例子更加复杂。下面是我的了：

EDIT 2: Okay, my actual screen is a lot more complicated than my simple example. Here's what I got:

因此​​，在此设置我有垂直和水平方向错开4次。我想所有的蓝色，红色，紫色的看法是一样的 subview.frame.size.width = superview.width - 60 。蓝色和紫色在左侧列列队，红色是独自在右列中，并且所有的间隙（两列之间和各列之间和它的最近的边缘）是在一个恒定的（20分）。这3个表具有可变的高度，这在的詹姆斯的回答这里。在底部是绵延的宽度屏幕（减去间隙），并坐在下面无论是紫色或红色的看法恒定的20分粉红色的看法，以较低者为准（我正在试图通过给做一个每个视图> = 20的间距限制，我希望它会挑选其中一个正好是20）。由于所有的高度是动态的，不一定适合在屏幕上在同一时间，我做了他们的SuperView的的UIScrollView 而不是普通的的UIView 。

So in this setup I have 4 views that are vertically and horizontally staggered.  I want the blue, red, and purple views to all be the same subview.frame.size.width = superview.width - 60. The blue and purple are lined up in the left column, and the red is alone in the right column, and all the gaps (between the two columns and between each column and it's nearest edge) are at a constant (20 pts). These 3 tables have a variable height, which I will be setting programmatically as described in James's answer here. At the bottom is a pink view that stretches the width of the screen (minus gaps), and sits at a constant 20 pts below either the purple or the red view, whichever is lower (which I'm attempting to do by giving it a spacing constraint of >= 20 to each view, and I hope that it will pick exactly 20 for one of them). Since all of the heights are dynamic and may not necessarily fit on the screen at the same time, I made their superview a UIScrollView instead of the normal UIView.

当一切都说过和做过，我仍然得到一个警告，我的看法所有4水平暧昧，那粉红色的酒吧是暧昧的垂直。我认为这是有问题认识什么是应该去旁边，这是什么，为什么它认为它的水平暧昧。而且我认为这是不拾取放置粉红色的酒吧正好是20点以下无论是紫色或红色的看法，这就是为什么它认为它是垂直模糊。任何人都可以证实或否认这些猜疑？或建议变通的办法？当我在结束时运行它，我只是得到这个（我做了滚动视图的黄色背景，你不能在故事板截图告诉）：

When all is said and done, I'm still getting a warning that all 4 of my views are horizontally ambiguous, and that the pink bar is vertically ambiguous. I think it's having trouble realizing what is supposed to go next to what, which is why it thinks it's horizontally ambiguous. And I think it's not picking to place the pink bar exactly 20 pts below either the purple or red views, which is why it thinks it's vertically ambiguous. Can anyone confirm or deny any of these suspicions? Or suggest a way around it? When I run it in the end, I just get this (I made the background of the scroll view yellow, which you can't tell in the storyboard screenshot):

推荐答案

好吧，我想我已经解决了垂直暧昧的一部分。我加了粉红色和紫色的意见和粉红色和红色视图之间两个垂直约束之间两个垂直的约束。对于每一对，在第一约束是它们之间的间距必须> 20分，它具有1000的优先级。第二个约束是该间距是= 20分，但它仅具有800的优先级。

Vertically Ambiguous

Okay, I think I've solved the vertical ambiguous part. I added two vertical constraints between the pink and purple views and two vertical constraints between the pink and red views. For each pair, the first constraint is that the spacing between them must be > 20 pts, and it has 1000 priority. The second constraint is that the spacing is = 20 pts, but it only has an 800 priority.

例如，如果紫视图的底部最终被比红色视图的底部降低（因为它是我的第一张截图），X code应尽量设置的粉红色之间的垂直距离，红色次= 20，但它会认识到，与条件相冲突的紫色和粉红色感之间的空间> = 20。由于> =约束具有更高的优先级，则=约束将被忽略。现在，当X code着眼于紫色和粉红色视图之间的间距为= 20约束，它会检查针对该粉红色和红色必须至少20分离。由于红显示的底部的约束视图比紫视图底部越高，红色和粉红色之间> = 20约束还是通过了。

For example, if the bottom of the purple view ends up being lower than the bottom of the red view (as it is in my first screenshot), Xcode should try to set the vertical distance between the pink and red views = 20, but it will realize that that conflicts with condition that the space between the purple and pink being >= 20. Since the >= constraint has higher priority, the = constraint will be ignored. Now, when Xcode looks at the constraint that the spacing between the purple and pink views being = 20, it checks that against the constraint that the pink and red must be separated by at least 20. Since the bottom of the red view is higher than the bottom of the purple view, the >= 20 constraint between the red and the pink still passes.

所以TL; DR，您可以设置一个观点给它一个> = X的约束与1000的优先级，并给它一个= X约束有从最极端的多个视图给定值（x）的间距以＆lt; 1000优先权每个查看您正在考虑 - 我的垂直模糊的问题已经解决。我还没有对意见全部4个水平模糊性的解决方案。

So TL;DR, you can set up a view to have a spacing at a given value (x) from the most extreme of multiple views by giving it a >= x constraint with 1000 priority and giving it a = x constraint with <1000 priority for each view you are considering - and my vertical ambiguity problem has been solved. I do not yet have a solution for the horizontal ambiguity for all 4 of the views.

好吧，我现在固定为好水平暧昧的一部分。什么它归结为是，在滚动视图（因此表视图）的限制不同的工作比其他任何一种说法去做。下面是步骤一步的样子。

Okay, I got the horizontally ambiguous part fixed now as well. What it boils down to is that constraints in scroll views (and therefore table views) work differently than they do for any other kind of view. Here's what the step-by-step looks like.

• 将在的UIScrollView


• 将一个的UIView 到的UIScrollView 来作为内容查看为滚动视图


• 添加约束到引脚内容查看来的所有4个角滚动视图和PIN它的宽度和高度（6这样的内容查看，它是上海华制约 - 2比平常多）。请注意，宽度和高度可以固定的东西比普通的屏幕尺寸，这可能是为什么要大得多您使用的是滚动视图开始。


• 添加您的所有其他视图你想要的的UIScrollView （ UIButtons ， UILabels ，等等 - 我只是要承担的UILabel 从这里，所以我不必尽可能多的类型，但任何一种的UIView 子类工作）为子视图的内容查看，不能直接作为的UIScrollView的子视图

• Place the UIScrollView
• Place a UIView into the UIScrollView to serve as a "contentView" for that scroll view
• Add constraints to pin the contentView to all 4 corners of the scroll view AND pin it's width and height (so 6 constraints between the contentView and it's superview - 2 more than usual). Note that the width and the height can be pinned to something much larger than the normal screen size, which is probably why you are using a scroll view to begin with.
• Add all of your other views you want in the UIScrollView (UIButtons, UILabels, etc. - I'm just going to assume UILabel from here on so I don't have to type as much, but any kind of UIView subclass will work) as subviews of the contentView, NOT directly as subviews of the UIScrollView

通过这种设置，被给定约束自己的上海华在的UILabel 旨意约束到内容查看，其中有一个定义的大小，所以没有什么是不明确的。

With this setup, the UILabels that are given constraints to their superview will constrain to the contentView, which has a defined size, so nothing is ambiguous.

另外，如果你想解决您的的UILabel S（或动态地计算它们，这取决于你的应用程序的功能），并让<$ C $的大小C>内容查看扩大追究他们：

Alternatively, if you want to fix the sizes of your UILabels (or dynamically calculate them, depending on the functionality of your app) and let the contentView expand to hold them:

• 将在的UIScrollView


• 将一个的UIView 到的UIScrollView 来作为内容查看为滚动视图


• 添加约束到引脚内容查看来的所有4个角滚动视图和PIN它的宽度和高度


• 创建为宽度的出口在内容查看（让我们说，我们将其命名为 contentViewWidthConstraint ）


• 将在的UILabel 取值


• 修正的UILabel 取值
的大小

• 创建一个出口为宽度在的UILabel 取值
限制

• Place the UIScrollView
• Place a UIView into the UIScrollView to serve as a "contentView" for that scroll view
• Add constraints to pin the contentView to all 4 corners of the scroll view AND pin it's width and height
• create an outlet for the width constraints on the contentView (let's say we name it contentViewWidthConstraint)
• place the UILabels
• fix the sizes of the UILabels
• create an outlet for the width constraints on the UILabels

然后在code为 viewWillLayoutSubviews

• 加起来所有的的UILabel 和你希望他们之间（以 CGFloat的任何间隙的宽度，我称之为 totalWidth ）


• 设置 contentViewWidthConstraint.constant = totalWidth

• add up the widths of all of the UILabels and any gaps you want between them (as a CGFloat, which I'll call totalWidth)
• set contentViewWidthConstraint.constant = totalWidth

和你去好！注意，我假定你在大多数本实施例的设置宽度，但它应该是一样适用于高度。

And you're good to go! Note that I assumed you were setting the width in most of this example, but it should be just as applicable to height.

这篇关于视图是水平，并与复杂的布局垂直暧昧的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！