使用自动布局的基于百分比的保证金

Question

我正在尝试根据父视图的宽度将子视图放在左边距.这听起来很简单,但我无法弄清楚如何使用autolayout来做到这一点.

从逻辑上讲,我只需要将左边距值设置为父宽度的某个百分比值,但此刻,我无法将该逻辑转换为自动布局.

这是我目前的代码:

var view = UIView();
view.backgroundColor = UIColor.redColor();
view.frame = CGRectMake(0, 0, 320, 400);

var sview = UIView();
sview.setTranslatesAutoresizingMaskIntoConstraints(false);
sview.backgroundColor = UIColor.yellowColor();
//sview.frame = CGRectMake(0, 0, 50, 50);
view.addSubview(sview);

var dict = Dictionary<String, UIView>()
dict["box"] = sview;

var con1 = NSLayoutConstraint(item: sview, attribute: NSLayoutAttribute.Top, relatedBy: NSLayoutRelation.Equal, toItem: view, attribute: NSLayoutAttribute.Top, multiplier: 1.0, constant: 20.0);
view.addConstraint(con1);

var con2 = NSLayoutConstraint(item: sview, attribute: NSLayoutAttribute.Left, relatedBy: NSLayoutRelation.Equal, toItem: view, attribute: NSLayoutAttribute.Width, multiplier: 0.75, constant: 0.0);
view.addConstraint(con2);

var con3 = NSLayoutConstraint(item: sview, attribute: NSLayoutAttribute.Width, relatedBy: NSLayoutRelation.Equal, toItem: view, attribute: NSLayoutAttribute.Width, multiplier: 1.0, constant: 0.0);
view.addConstraint(con3);

var con4 = NSLayoutConstraint(item: sview, attribute: NSLayoutAttribute.Height, relatedBy: NSLayoutRelation.Equal, toItem: view, attribute: NSLayoutAttribute.Height, multiplier: 1.0, constant: 0.0);
view.addConstraint(con4);

这是代码返回错误的位置:

var con2 = NSLayoutConstraint(item: sview, attribute: NSLayoutAttribute.Left, relatedBy: NSLayoutRelation.Equal, toItem: view, attribute: NSLayoutAttribute.Width, multiplier: 0.75, constant: 0.0);
view.addConstraint(con2);

错误:

*由于未捕获的异常'NSInvalidArgumentException'而终止应用程序,原因:'* + [NSLayoutConstraint constraintWithItem:attribute:relatedBy:toItem:attribute:multiplier:constant:]:布局属性的无效配对'

有没有人知道如何实现这一目标？我只想让左边距为父视图宽度的0.75%.

谢谢.

Answer 1

你想要的是在左边的sview 某个点的 左边,view而你正在编写你希望左边的sview某个点的宽度view不是正确的布局属性配对,就像你的错误所说的那样.

这是你需要做的:

NSLayoutConstraint(item: sview, 
              attribute: NSLayoutAttribute.Left, 
              relatedBy: NSLayoutRelation.Equal, 
                 toItem: view, 
              attribute: NSLayoutAttribute.Left, 
             multiplier: 1, 
               constant: (CGRectGetWidth(view.bounds) * 0.75));

希望能帮助到你!

编辑

我发现了一篇关于基于Percented边距的精彩文章:
http ://simblestudios.com/blog/development/percentage-width-in-autolayout.html
甚至更简单: http://simblestudios.com/blog/development/easier-percentage
-width功能于autolayout.html

Answer 2

可以使用子视图与其超级视图之间的自动布局约束创建基于百分比的边距.随着超视图的大小变化,边距将动态变化.例如,这是如何创建10%的追踪保证金.

1. 在视图和超级视图之间创建一个尾随约束.
2. 确保第一个约束项是子视图,第二个项是超级视图.这可以通过单击第一个项目下拉菜单并选择反向第一个和第二个项目来完成.
3. 在属性检查器中将约束的常量值更改为零.
4. 将乘数值更改为0.9.

这是手动方法的一个问题 - 例如,它不适用于从右到左的语言,阿拉伯语.从右到左的布局需要对约束进行一些不同的设置,但我们不能将它们保留在一个故事板中.

这是我编写的一个库,可以让您创建基于百分比的约束.它确实处理从右到左的语言案例.

https://github.com/exchangegroup/PercentageMargin