UIView灵活高度与NSLayoutConstraints

时间：2015-10-28 16:40:00

标签： ios objective-c uiview autolayout

我在代码中向UIViewController添加了一些观看次数，并使用NSLayoutConstraints将它们放置在屏幕上我想要的位置。在代码中成为NSLayoutConstraints的新手;我做了一个测试设置，并且在95％的路上。这是我目前的代码：

UIView *redView = [[UIView alloc] init];
    redView.backgroundColor = [UIColor redColor];
    redView.translatesAutoresizingMaskIntoConstraints = NO;

    [self.view addSubview:redView];

    [redView addConstraint:[NSLayoutConstraint constraintWithItem:redView
                                                        attribute:NSLayoutAttributeHeight
                                                        relatedBy:NSLayoutRelationEqual
                                                           toItem:nil attribute:0
                                                       multiplier:1
                                                         constant:100]];

    [redView addConstraint:[NSLayoutConstraint constraintWithItem:redView
                                                        attribute:NSLayoutAttributeWidth
                                                        relatedBy:NSLayoutRelationEqual
                                                           toItem:nil
                                                        attribute:0
                                                       multiplier:1
                                                         constant:693]];

    [self.view addConstraint:[NSLayoutConstraint constraintWithItem:redView
                                                          attribute:NSLayoutAttributeTop
                                                          relatedBy:NSLayoutRelationEqual
                                                             toItem:self.view
                                                          attribute:NSLayoutAttributeTop
                                                         multiplier:1
                                                           constant:60]];

    [self.view addConstraint:[NSLayoutConstraint constraintWithItem:redView
                                                          attribute:NSLayoutAttributeCenterX
                                                          relatedBy:NSLayoutRelationEqual
                                                             toItem:self.view
                                                          attribute:NSLayoutAttributeCenterX
                                                         multiplier:1
                                                           constant:0]];


    UIView *blueView = [[UIView alloc] init];
    blueView.backgroundColor = [UIColor blueColor];
    blueView.translatesAutoresizingMaskIntoConstraints = NO;

    [self.view addSubview:blueView];
    [blueView addConstraint:[NSLayoutConstraint constraintWithItem:blueView
                                                         attribute:NSLayoutAttributeHeight
                                                         relatedBy:NSLayoutRelationEqual
                                                            toItem:nil
                                                         attribute:0
                                                        multiplier:10
                                                          constant:50]];

    [blueView addConstraint:[NSLayoutConstraint constraintWithItem:blueView
                                                         attribute:NSLayoutAttributeWidth
                                                         relatedBy:NSLayoutRelationEqual
                                                            toItem:nil attribute:0
                                                        multiplier:1
                                                          constant:693]];

    [self.view addConstraint:[NSLayoutConstraint constraintWithItem:blueView
                                                          attribute:NSLayoutAttributeBottom
                                                          relatedBy:NSLayoutRelationEqual
                                                             toItem:redView attribute:NSLayoutAttributeBottom
                                                         multiplier:1 constant:70]];

    [self.view addConstraint:[NSLayoutConstraint constraintWithItem:blueView
                                                          attribute:NSLayoutAttributeCenterX
                                                          relatedBy:NSLayoutRelationEqual
                                                             toItem:redView
                                                          attribute:NSLayoutAttributeCenterX
                                                         multiplier:1
                                                           constant:0]];


    UIView *orangeView = [[UIView alloc] init];
    orangeView.backgroundColor = [UIColor orangeColor];
    orangeView.translatesAutoresizingMaskIntoConstraints = NO;

    [self.view addSubview:orangeView];
    [orangeView addConstraint:[NSLayoutConstraint constraintWithItem:orangeView
                                                           attribute:NSLayoutAttributeHeight
                                                           relatedBy:NSLayoutRelationEqual
                                                              toItem:nil
                                                           attribute:0
                                                          multiplier:1
                                                            constant:25]];

    [orangeView addConstraint:[NSLayoutConstraint constraintWithItem:orangeView
                                                           attribute:NSLayoutAttributeWidth
                                                           relatedBy:NSLayoutRelationEqual
                                                              toItem:nil
                                                           attribute:0
                                                          multiplier:1
                                                            constant:693]];

    [self.view addConstraint:[NSLayoutConstraint constraintWithItem:orangeView
                                                          attribute:NSLayoutAttributeBottom
                                                          relatedBy:NSLayoutRelationEqual
                                                             toItem:blueView
                                                          attribute:NSLayoutAttributeBottom
                                                         multiplier:1
                                                           constant:25]];

    [self.view addConstraint:[NSLayoutConstraint constraintWithItem:orangeView
                                                          attribute:NSLayoutAttributeCenterX
                                                          relatedBy:NSLayoutRelationEqual
                                                             toItem:blueView
                                                          attribute:NSLayoutAttributeCenterX
                                                         multiplier:1
                                                           constant:0]];

看起来像这样 - 我想要它:(忽略灰色背景 - 这就是superView） Which looks like this

现在我要做的是获取orangeView的高度，将屏幕的其余部分填充到superView的底部。但是，当我向orangeView添加底部约束时，它也会调整其他视图高度。

如何让橙色视图高度填充其下方的灰色区域？

编辑：

删除orangeView上的高度约束，并向superview添加一个底部约束，如下所示：

[self.view addConstraint:[NSLayoutConstraint constraintWithItem:orangeView
                                                          attribute:NSLayoutAttributeBottom
                                                          relatedBy:NSLayoutRelationEqual
                                                             toItem:self.view
                                                          attribute:NSLayoutAttributeBottom
                                                         multiplier:1
                                                           constant:0]];

像这样更改视图：

enter image description here

2 个答案:

答案 0 :(得分：2)

您在橙色视图上设置固定高度，那么它如何展开并填充整个视图？

另外我建议你将视图的顶部固定在上一个视图的底部，因为你可以轻松地改变视图大小并保持间距均匀，否则你将不得不在底部调整常量最底层的关系。

这是一个可以正常工作的代码：

UIView *redView = [[UIView alloc] init];
redView.backgroundColor = [UIColor redColor];
redView.translatesAutoresizingMaskIntoConstraints = NO;

[self.view addSubview:redView];

[redView addConstraint:[NSLayoutConstraint constraintWithItem:redView
                                                    attribute:NSLayoutAttributeHeight
                                                    relatedBy:NSLayoutRelationEqual
                                                       toItem:nil
                                                    attribute:0
                                                   multiplier:1
                                                     constant:100]];

[redView addConstraint:[NSLayoutConstraint constraintWithItem:redView
                                                    attribute:NSLayoutAttributeWidth
                                                    relatedBy:NSLayoutRelationEqual
                                                       toItem:nil
                                                    attribute:0
                                                   multiplier:1
                                                     constant:693]];

[self.view addConstraint:[NSLayoutConstraint constraintWithItem:redView
                                                      attribute:NSLayoutAttributeTop
                                                      relatedBy:NSLayoutRelationEqual
                                                         toItem:self.view
                                                      attribute:NSLayoutAttributeTop
                                                     multiplier:1
                                                       constant:60]];

[self.view addConstraint:[NSLayoutConstraint constraintWithItem:redView
                                                      attribute:NSLayoutAttributeCenterX
                                                      relatedBy:NSLayoutRelationEqual
                                                         toItem:self.view
                                                      attribute:NSLayoutAttributeCenterX
                                                     multiplier:1
                                                       constant:0]];


UIView *blueView = [[UIView alloc] init];
blueView.backgroundColor = [UIColor blueColor];
blueView.translatesAutoresizingMaskIntoConstraints = NO;

[self.view addSubview:blueView];
[blueView addConstraint:[NSLayoutConstraint constraintWithItem:blueView
                                                     attribute:NSLayoutAttributeHeight
                                                     relatedBy:NSLayoutRelationEqual
                                                        toItem:nil
                                                     attribute:0
                                                    multiplier:1
                                                      constant:50]];

[blueView addConstraint:[NSLayoutConstraint constraintWithItem:blueView
                                                     attribute:NSLayoutAttributeWidth
                                                     relatedBy:NSLayoutRelationEqual
                                                        toItem:nil attribute:0
                                                    multiplier:1
                                                      constant:693]];

[self.view addConstraint:[NSLayoutConstraint constraintWithItem:blueView
                                                      attribute:NSLayoutAttributeTop
                                                      relatedBy:NSLayoutRelationEqual
                                                         toItem:redView attribute:NSLayoutAttributeBottom
                                                     multiplier:1 constant:10]];

[self.view addConstraint:[NSLayoutConstraint constraintWithItem:blueView
                                                      attribute:NSLayoutAttributeCenterX
                                                      relatedBy:NSLayoutRelationEqual
                                                         toItem:redView
                                                      attribute:NSLayoutAttributeCenterX
                                                     multiplier:1
                                                       constant:0]];


UIView *orangeView = [[UIView alloc] init];
orangeView.backgroundColor = [UIColor orangeColor];
orangeView.translatesAutoresizingMaskIntoConstraints = NO;

[self.view addSubview:orangeView];

[orangeView addConstraint:[NSLayoutConstraint constraintWithItem:orangeView
                                                       attribute:NSLayoutAttributeWidth
                                                       relatedBy:NSLayoutRelationEqual
                                                          toItem:nil
                                                       attribute:0
                                                      multiplier:1
                                                        constant:693]];

[self.view addConstraint:[NSLayoutConstraint constraintWithItem:orangeView
                                                      attribute:NSLayoutAttributeTop
                                                      relatedBy:NSLayoutRelationEqual
                                                         toItem:blueView
                                                      attribute:NSLayoutAttributeBottom
                                                     multiplier:1
                                                       constant:25]];

[self.view addConstraint:[NSLayoutConstraint constraintWithItem:orangeView
                                                      attribute:NSLayoutAttributeBottom
                                                      relatedBy:NSLayoutRelationEqual
                                                         toItem:self.view
                                                      attribute:NSLayoutAttributeBottom
                                                     multiplier:1
                                                       constant:0]];

[self.view addConstraint:[NSLayoutConstraint constraintWithItem:orangeView
                                                      attribute:NSLayoutAttributeCenterX
                                                      relatedBy:NSLayoutRelationEqual
                                                         toItem:blueView
                                                      attribute:NSLayoutAttributeCenterX
                                                     multiplier:1
                                                       constant:0]];

答案 1 :(得分：1)

您需要将Y constraints设置为橙色视图：设置bottomLayout约束和蓝色视图的垂直间距。如果XCode用橙色警告警告你，请阅读这些警告，它通常会说“你的视图需要X约束”。

[self.view addConstraints:[NSLayoutConstraint
constraintsWithVisualFormat:@"V:|-[yourViewHere(300)]-50-|"
options:0
metrics:nil
views:NSDictionaryOfVariableBindings(yourViewHere)]];

(300)是视图的宽度。该代码修剪器将bottomLayout中的约束设置为您的视图。如上所述添加类似的约束。

相关问题
最新问题