Ios 自动布局以保持视图大小成比例

我正在努力实现以下目标：

• 我的xib中有两个视图需要保持边缘20像素（两侧和顶部）
• 需要调整大小的两个视图大小不同
• 它们必须相距20像素
• 它们的宽度需要保持相对于父视图的宽度

我读了一篇关于这样做的教程，它确实有效，但问题是它要求两个视图具有相同的宽度，并且pin

宽度相等，这是我不想要的

以下是我尝试过的：


将左视图的前导空间约束添加为20像素
将左视图的顶部空间约束添加为20像素
将右视图的顶部空间约束添加为20像素
向右视图添加尾随空间约束，使其为20像素
将两个视图的水平间距限制添加为20像素

我遇到的问题是，左视图无法调整大小，右视图填充空间以保持20像素的水平空间

是否有一种方法可以使两个视图的大小与它们应该填充的空间成比例

以下是我的布局和约束的屏幕截图：


谢谢

编辑

尝试旋转设备时，我收到以下警告：

2012-10-11 08:59:00.435 AutolayoutTest[35672:c07] Unable to simultaneously satisfy constraints.
    Probably at least one of the constraints in the following list is one you don't want.
    Try this: (1) look at each constraint and try to figure out which you don't expect;
    (2) find the code that added the unwanted constraint or constraints and fix it. (Note:  
    If you're seeing NSAutoresizingMaskLayoutConstraints that you don't understand, refer to the documentation for the UIView property translatesAutoresizingMaskIntoConstraints) 
(
    "<NSLayoutConstraint:0x8a6b2b0 H:[UIView:0x8a6b1d0(170)]>",
    "<NSLayoutConstraint:0x8a68ad0 H:[UIView:0x8a69430(90)]>",
    "<NSLayoutConstraint:0x8a6ba40 H:[UIView:0x8a69430]-(20)-[UIView:0x8a6b1d0]>",
    "<NSLayoutConstraint:0x8a6ba00 H:[UIView:0x8a6b1d0]-(20)-|   (Names: '|':UIView:0x8a6b7e0 )>",
    "<NSLayoutConstraint:0x8a6b940 H:|-(20)-[UIView:0x8a69430]   (Names: '|':UIView:0x8a6b7e0 )>",
    "<NSAutoresizingMaskLayoutConstraint:0x7199aa0 h=--& v=--& V:[UIView:0x8a6b7e0(568)]>"
)

Will attempt to recover by breaking constraint 
<NSLayoutConstraint:0x8a6b2b0 H:[UIView:0x8a6b1d0(170)]>

2012-10-11 08:59:00.435自动布局测试[35672:c07]无法同时满足约束。
可能下面列表中至少有一个约束是您不想要的。
试着这样做：（1）看看每个约束，试着找出你不期望的约束；
（2） 找到添加了不需要的约束的代码，然后修复它。（注：
如果您看到不理解的NSAutoresizingMaskLayoutConstraints，请参阅UIView属性TranslatesAutoResizingMaskToConstraints的文档）
(
"",
"",
"",
"",
"",
""
)
将尝试通过打破约束进行恢复
我不确定您对自动布局有多熟悉，如果您已经知道了这些内容，请道歉：

使用“自动布局”时，可以将多个约束指定给同一特性。在某些情况下，这些约束可能相互矛盾。这就是你看到警告的原因

从您发布的屏幕抓图中可以看出，您已将多个约束设置为显式约束-例如，左侧的绿色视图有一个约束，表示“宽度（90）”，这意味着宽度必须正好等于90点

仅从屏幕截图上还不清楚您的其他约束映射到了什么，但这里可能发生的是这些明确的约束正在导致问题-您有自动调整大小的约束，即视图应该扩展或收缩以适应其可用区域，但这些视图有一些约束，要求它们具有精确的宽度

这可以通过多种方式解决-您可以删除视图上的那些显式宽度约束，也可以更改它们的优先级（默认情况下，约束是“必需的”，但您可以将它们更改为可选的）。
我对autolayout不熟悉，但遇到了您的问题，并认为这将是一个很好的挑战。（这是我的警告，以防这不是理想的解决方案！）

您需要在代码中添加宽度约束。我首先在NIB中添加了两个视图，没有宽度限制，从而实现了这一点。以下是第一个（左）视图的约束：


以下是我对第二个（右）视图的限制：


这会在第二个视图上留下一个额外的约束，即superview和第二个视图之间的前导空间，如下所示：


您不能在IB中删除该约束，因为它会留下不明确的布局（因为子视图上没有宽度）。但是，您可以在代码中删除它。首先，为其设置一个插座，并将其连接到IB中：

@property (nonatomic, strong) IBOutlet NSLayoutConstraint *view2superviewLeadingConstraint;

然后，在视图控制器的
viewDidLoad
中，可以使用以下方法将其删除：

[self.view removeConstraint:self.view2superviewLeadingConstraint];

最后，添加宽度约束。这里的关键是乘数参数，用于指示基于superview宽度的宽度百分比。还要注意的是，您必须将常量参数设置为等于IB中设置的前导/尾随总计：

NSLayoutConstraint *constraint1 = [NSLayoutConstraint constraintWithItem:self.view1 attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeWidth multiplier:0.3 constant:-20];
[self.view addConstraint:constraint1];

NSLayoutConstraint *constraint2 = [NSLayoutConstraint constraintWithItem:self.view2 attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeWidth multiplier:0.7 constant:-40];
[self.view addConstraint:constraint2];

删除代码中的两个宽度约束，或者在IB中减少它们的优先级，否则您将受到过度约束
添加约束以描述绿色视图和蓝色视图之间的宽度比，代码为：

// Assuming the ratio you want is green_view_width : blue_view_width = 1 : 2
NSLayoutConstraint *c = [NSLayoutConstraint constraintWithItem:greenView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeWidth multiplier:0.5f constant:0.f];
[commonSuperview addConstraint:c];


正如其他人提到的，关键是在“引脚宽度相等”约束上设置一个乘数，以便视图宽度最终是彼此的倍数。XCode 5.1应该增加在Interface Builder中设置此选项的功能，但在此之前，除了在代码中设置外，您还有另一个选项。如果创建“管脚宽度相等”约束，请转到右侧“实用程序”面板中的“标识检查器”，然后查找“用户定义的运行时属性”。添加一个新属性，其关键路径为“乘数”，键入“数字”，值等于所需的比率


这不会反映在Interface Builder中，但会在使用视图时应用。
这可以通过添加一个虚拟视图（dummyView）并将其约束设置为固定宽度来解决，高度并与Superview的中心对齐。然后将左视图和右视图水平间距约束添加到dummyView

在Interface Builder中，用右键拖动视图（只需稍微拖动一下即可显示黑色弹出窗口）。

在弹出菜单中选择
纵横比
 我提出解决方案的时间可能晚了，但实际上可以在IB中非常轻松地实现

首先，添加一个UIView并将其固定到superview的所有四条边上

然后，添加第一个子视图，并将其定位到accor