NSLayoutConstraints 代碼使視圖居中並保持其縱橫比

Question

我希望我的子視圖是一個以父視圖頂部為中心的 16:9 矩形。 換句話說，我希望它：

1. 與其父視圖一樣寬，但不超過 400 像素（UI 可以旋轉到橫向），
2. 當它比它的父視圖窄時水平居中，
3. 將其頂部固定在其父視圖的頂部，並且
4. 更改其高度以保持 16:9 的縱橫比。

這段代碼幾乎可以做到，除了我很難使水平約束起作用並且不會受到過度或不足的約束......

- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    
    UIView *contentView = [[UIView alloc] init];
    contentView.backgroundColor = [UIColor redColor];
    [self.view addSubview:contentView];
    
    contentView.translatesAutoresizingMaskIntoConstraints = NO;
    
    NSDictionary *views = NSDictionaryOfVariableBindings(contentView);
    NSMutableArray *constraints = [NSMutableArray array];

    // this layout string is more like 'wishful coding'.  I don't see why it wouldn't work
    // but clearly this one is the problem
    [constraints addObjectsFromArray:[NSLayoutConstraint
                                      constraintsWithVisualFormat:@"H:|-(>=0)-[contentView(<=400)-(>=0)-]"
                                      options:0 metrics:0 views:views]];
    
    // this centering constraint below almost does the job, but doesn't give me a way
    // to specify width, changing the one above to just @"H:[contentView(<=400)]"
    // doesn't work either
    [constraints addObject:
     [NSLayoutConstraint constraintWithItem:contentView
                                  attribute:NSLayoutAttributeCenterY
                                  relatedBy:NSLayoutRelationEqual
                                     toItem:self.view
                                  attribute:NSLayoutAttributeCenterY
                                 multiplier:1.f constant:0.f]];

    // 9:16 works fine, I think
    [constraints addObject:
     [NSLayoutConstraint constraintWithItem:contentView
                                  attribute:NSLayoutAttributeHeight
                                  relatedBy:NSLayoutRelationEqual
                                     toItem:contentView attribute:NSLayoutAttributeWidth
                                 multiplier:9.0/16.0 constant:0.0]];
    
    // pin the tops works fine, I think
    [constraints addObjectsFromArray:
     [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-0-[contentView]"
                                             options:0 metrics:0 views:views]];

    [self.view addConstraints:constraints];
}

Answer 1

如果您想將紅色框水平居中，那么您需要等同於視圖的 CenterX，而不是 CenterY。 所以這個約束應該是這樣的：

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

然后在第一個約束上，您的約束不明確，因為有不止一種方法可以滿足每邊>=0邊距和寬度<=400 。 更好的辦法是說正是你在你的問題，這是你所需要的寬度為<= 400表示願與你的利潤如果有可能為0。

所以像這樣：

[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-(0@900)-[contentView(<=400)]-(0@900)-|"
                                        options:0 metrics:0 views:views]];

我相信這會讓你想要你想要的？

Answer 2

有時，我認為還有另一種解決方案，我在這里復制了我的解決方案。

如果你想水平對齊，就用它[parentView addConstraint:[NSLayoutConstraint constraintWithItem:subView attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:parentView attribute:NSLayoutAttributeCenterX multiplier:1 constant:0]];

如果你想垂直對齊，只需使用它[parentView addConstraint:[NSLayoutConstraint constraintWithItem:subView attribute:NSLayoutAttributeCenterY relatedBy:NSLayoutRelationEqual toItem:parentView attribute:NSLayoutAttributeCenterY multiplier:1 constant:0]];

這個解決方案對我有用，我希望我把它分享給其他人。