使用autolayout将两个uiviews彼此对齐

Question

我正在拼命地将两个视图彼此对齐，并希望在将来为它们设置动画，并且相对位置这使得它比仅设置框架和更新等更加严格...

所以代码：

// create two views
UIView *one = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 50, 50)];
UIView *two = [[UIView alloc] initWithFrame:CGRectMake(0, 150, 50, 50)];

// add some color
[one setBackgroundColor:[UIColor whiteColor]];
[two setBackgroundColor:[UIColor redColor]];

// add them to self ( self = uiview )
[self addSubview:one];
[self addSubview:two];

// make dict
NSDictionary *views = NSDictionaryOfVariableBindings(one, two);

// add constraints to make the views as wide as the container ( self )
[self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[one]|"
                                                             options:0
                                                             metrics:nil
                                                               views:views]];

[self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[two]|"
                                                             options:0
                                                             metrics:nil
                                                               views:views]];

// add constraint to make the second ( two ) item 10px below the first ( one )
[self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[one]-10-[two]"
                                                             options:0
                                                             metrics:nil
                                                               views:views]];

```

＆lt; - 结果

＆lt; - 目标

我做错了什么？

提前致谢！

Answer 1

这两行解释了这一切：

UIView *one = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 50, 50)];
UIView *two = [[UIView alloc] initWithFrame:CGRectMake(0, 150, 50, 50)];

这正是您所看到的结果：两个视图的大小均为50x50，而视图二的视图位于x = 0和y = 150。

使用自动布局时，您需要忘记关于帧和rects的所有内容。说明你想要的约束，对于每个视图和视图之间，让autolayout在幕后创建框架。

为autolayout声明视图，如下所示：

UIView *one = [[UIView alloc] init];
one.translatesAutoresizingMaskIntoConstraints = NO;
UIView *two = [[UIView alloc] init];
two.translatesAutoresizingMaskIntoConstraints = NO;

Answer 2

使用约束时不应设置框架。这就是约束的目的。 约束是原因，框架是效果

// create two views
UIView *one = [[UIView alloc] init];
UIView *two = [[UIView alloc] init];
one.translatesAutoresizingMaskIntoConstraints = NO;
two.translatesAutoresizingMaskIntoConstraints = NO;

// add some color
[one setBackgroundColor:[UIColor whiteColor]];
[two setBackgroundColor:[UIColor redColor]];

// add them to self ( self = uiview )
[self addSubview:one];
[self addSubview:two];

// make dict
NSDictionary *views = NSDictionaryOfVariableBindings(one, two);

// add constraints to make the views as wide as the container ( self )
[self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[one]|"
                                                             options:0
                                                             metrics:nil
                                                               views:views]];

[self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[two]|"
                                                             options:0
                                                             metrics:nil
                                                               views:views]];

// add constraint to make the second ( two ) item 10px below the first ( one )
[self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[one]-10-[two]|"
                                                             options:0
                                                             metrics:nil
                                                               views:views]];

注意：我在最后一行更改了约束。您的约束没有指定视图2的高度。它会给你一个“AMBIGUOUS”布局。