自动布局,编码 vs. 接口生成器

3

只需添加一个视图,该视图与其他两个相关视图位于相同的父视图中。

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 黄色垂直图片如下: yellow vertical 黄色水平图片如下: yellow horizontal 绿色垂直图片如下: green vertical 绿色水平图片如下: green horizontal
1个回答

0
发现了我的错误。我将listadoView的底部约束设置为与其父视图为10,即+10,而应该是-10。这样,界面就像其他.xib一样显示(带有黄色正方形)。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接