只需添加一个视图,该视图与其他两个相关视图位于相同的父视图中。
self.vDist = [[UILabel alloc] initWithFrame:CGRectMake(20, 20, 42, 21)];
[self.vDist setTranslatesAutoresizingMaskIntoConstraints:NO];
[self.view addSubview:self.vDist];
NSLayoutConstraint *lc;
lc = [NSLayoutConstraint constraintWithItem:self.vDist attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1.0 constant:20.0];
[self.view addConstraint:lc];
lc = [NSLayoutConstraint constraintWithItem:self.vDist attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeft multiplier:1.0 constant:20.0];
[self.view addConstraint:lc];
然后,我在顶部创建了小正方形视图。
/*********************** video view */
self.videoView = [[UIView alloc] initWithFrame:CGRectMake(90, 20, 140, 140)];
[self.videoView setBackgroundColor:[UIColor greenColor]];
[self.videoView setTranslatesAutoresizingMaskIntoConstraints:NO];
[self.view addSubview:self.videoView];
// width & height constraints, as UIViews don't have intrinsic constraints
lc = [NSLayoutConstraint constraintWithItem:self.videoView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:140.0];
[self.videoView addConstraint:lc];
lc = [NSLayoutConstraint constraintWithItem:self.videoView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:140.0];
[self.videoView addConstraint:lc];
// center constraint
lc = [NSLayoutConstraint constraintWithItem:self.videoView attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterX multiplier:1.0 constant:0.0];
[self.view addConstraint:lc];
// top constraint with its parent view
lc = [NSLayoutConstraint constraintWithItem:self.videoView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1.0 constant:20.0];
[self.view addConstraint:lc];
这个正方形视图在任何设备方向下都能正常显示。
现在我在屏幕下部创建了第二个视图。在这里,它的尺寸并不重要,因为我会为每个大小属性创建一个约束。
/*********************** listado view */
self.listadoView = [[UIView alloc] initWithFrame:CGRectMake(5, 248, 310, 100)];
[self.listadoView setTranslatesAutoresizingMaskIntoConstraints:NO];
[self.listadoView setBackgroundColor:[UIColor whiteColor]];
[self.view addSubview:self.listadoView];
// height and width constraints as UIView don't have intrinsic constraints
lc = [NSLayoutConstraint constraintWithItem:self.listadoView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:310];
[self.listadoView addConstraint:lc];
lc = [NSLayoutConstraint constraintWithItem:self.listadoView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:300];
// make it weak to be able to squeeze contents
lc.priority = 250;
[self.listadoView addConstraint:lc];
// top with videoView's bottom
lc = [NSLayoutConstraint constraintWithItem:self.listadoView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationLessThanOrEqual toItem:self.videoView attribute:NSLayoutAttributeBottom multiplier:1.0 constant:88.0];
[self.view addConstraint:lc];
// top with parent's view top
lc = [NSLayoutConstraint constraintWithItem:self.listadoView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeBottom multiplier:1.0 constant:248.0];
[self.view addConstraint:lc];
// center constraint
lc = [NSLayoutConstraint constraintWithItem:self.listadoView attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterX multiplier:1.0 constant:0.0];
[self.view addConstraint:lc];
尝试复制IB在其他视图中使用的约束
lc = [NSLayoutConstraint constraintWithItem:self.listadoView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeft multiplier:1.0 constant:5];
[self.view addConstraint:lc];
lc = [NSLayoutConstraint constraintWithItem:self.listadoView attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeBottom multiplier:1.0 constant:10];
[self.view addConstraint:lc];
以下是带有绿色正方形的结果屏幕。垂直的绿色屏幕显示了我所期望的内容(请参见下面的黄色图像),但是在绿色水平屏幕中,正如您所看到的,listadoView 的底部边缘低于屏幕的边缘,尽管我为黄色屏幕设置了 IB 设置的所有约束条件,以及我在黄色屏幕上设置的约束条件。
对于如何设置约束条件,您有什么建议吗?...也许创建它们的顺序与此有关?因为有时我删除一个约束条件它就可以工作,然后我重新添加该约束条件,它仍然可以工作!再次运行带有所有约束条件的代码,然后停止工作(什么?!)。虽然很难成功重现它以便提交错误,但它确实发生了。
我已经在 iOS5.1 和 6.x 下的 XCode 4.6 中以及在 iOS6.1 下的 xCode 5 中测试了此代码。
约束设置在 IB 中的图片如下:
![constraints settings in IB](https://istack.dev59.com/p6ZAk.webp)
![yellow vertical](https://istack.dev59.com/lB8RS.webp)
![yellow horizontal](https://istack.dev59.com/oMf9H.webp)
![green vertical](https://istack.dev59.com/VXRi1.webp)
![green horizontal](https://istack.dev59.com/TtKUc.webp)