使用自动布局对齐两个 uiviews

Posted 2023-03-15

【中文标题】使用自动布局对齐两个 uiviews

【英文标题】：Align two uiviews below each other using autoloayout

【发布时间】：2014-03-19 14:42:29

【问题描述】：

我正在拼命地尝试将两个视图相互对齐并使用自动布局，希望在未来为它们设置动画，并且相对位置这使得它比设置框架和更新等更加严格......

所以代码：

// 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]];

```

我做错了什么？

提前致谢！

【问题讨论】：

使用 Interface Builder 完成此任务要容易得多。

【参考方案1】：

这两行说明了一切：

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

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

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

像这样声明自动布局的视图：

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

【讨论】：

抱歉回复晚了，但它有效！非常感谢！！

很高兴有帮助:-)

【参考方案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]];

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