自动版式保持视图大小成正比 [英] AutoLayout to keep view sizes proportional

问题描述

我想实现如下：

• 我在厦门国际银行2次需要保持20个像素关闭的边缘（两侧和顶部）


• 需要调整2次都不相同尺寸


• 他们必须相距20像素


• 它们的宽度需要保持相对于父视图的宽度

我读了教程的只是这样做，和它的作品，但它存在的问题是，它需要双方的观点有相同的宽度和销宽度同样，我不想要的。

下面是我的尝试：

• 添加前导空格制约左视图为20个像素


• 添加顶部空间限制，以左视图为20个像素


• 添加顶部空间的约束，以正确的观点是20像素


• 添加拖尾空间限制，以正确的观点是20像素


• 添加水平间距约束两种观点是20像素

我运行到的问题是，在左侧视图中不调整大小和右视图填写的空间，以保持20个像素的水平空间。

有没有一种方法可以让我得到两个视图按比例调整到它们应该被填充的空间？

下面是我的布局和约束的截图：

谢谢！

修改

我得到以下警告，当我试图旋转我的设备：

  2012年10月11日08：59：00.435 AutolayoutTest [35672：C07]无法同时满足约束条件。
    大概在以下列表中的约束条件中的至少一个是一个你不想要的。
    试试这个：（1）看一下每个约束和揣摩，你不要指望;
    （2）找到code，它增加了不必要的约束或限制并修复它。 （注意：
    如果你看到你不明白NSAutoresizingMaskLayoutConstraints，请参考UIView的财产translatesAutoresizingMaskIntoConstraints的文档）
（
    ＆所述; NSLayoutConstraint：0x8a6b2b0 H：[UIView的：0x8a6b1d0（170）]＆gt;中，
    ＆所述; NSLayoutConstraint：0x8a68ad0 H：[UIView的：0x8a69430（90）] gt;中，
    ＆所述; NSLayoutConstraint：0x8a6ba40 H：[UIView的：0x8a69430]  - （20） -  [UIView的：0x8a6b1d0]＆gt;中，
    ＆LT; NSLayoutConstraint：0x8a6ba00 H：[UIView的：0x8a6b1d0]  - （20） -  |（名称：'|'：的UIView：0x8a6b7e0）＆gt;中，
    ＆LT; NSLayoutConstraint：0x8a6b940 H：|  - （20） -  [UIView的：0x8a69430]（名称：'|'：的UIView：0x8a6b7e0）＆gt;中，
    ＆所述; NSAutoresizingMaskLayoutConstraint：0x7199aa0 H =  - ＆放大器; V =  - ＆放大器;五：[UIView的：0x8a6b7e0（568）]＆gt;中
）将试图打破约束恢复
＆所述; NSLayoutConstraint：0x8a6b2b0 H：[UIView的：0x8a6b1d0（170）]≥
 

解决方案

这可以通过增加一个虚拟视图解析（ dummyView ）与其限制设置为固定宽度，高度和对齐的centerX Superview.Then添加左视图，右视图水平间距约束的 dummyView 。

I'm trying to achieve the following:

• I have 2 views in my xib that need to stay 20 pixels off the edge (both sides and top)
• The 2 views that need to resize aren't the same size
• They have to be 20 pixels apart
• Their width needs to stay relative to the width of the parent view

I read a tutorial about doing just that and it works but the problem with it is that it requires both views to have the same width and pin Widths equally, which I don't want.

Here's what I tried:

• Add leading space constraint to left view to be 20 pixels
• Add top space constraint to left view to be 20 pixels
• Add top space constraint to right view to be 20 pixels
• Add tailing space constraint to right view to be 20 pixels
• Add horizontal spacing constraint to both views to be 20 pixels

The problem I'm running into is that the left view doesn't resize and the right view fills out the space to keep the 20 pixels horizontal space.

Is there a way I can get both views to resize proportionally to the space they should be filling?

Here are the screenshots of my layout and constraints:

Thanks!

EDIT

I get the following warning when I try to rotate my device:

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)]>

解决方案

This can be resolved by adding one more dummy view(dummyView) with its constraints set to Fixed width, height and aligned to centerX of Superview.Then add left view and right view Horizontal spacing constraint to dummyView.

这篇关于自动版式保持视图大小成正比的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！