NSLayoutConstraints 代码使视图居中并保持其纵横比答案

【问题标题】：NSLayoutConstraints code to center a view and maintain its aspect ratioNSLayoutConstraints 代码使视图居中并保持其纵横比
【发布时间】：2013-08-14 03:36:13
【问题描述】：

我希望我的子视图是一个 16:9 的矩形，位于其父视图的顶部。换句话说，我希望它：

与其父视图一样宽，但不超过 400 像素（UI 可以旋转到横向），
当它比其父视图窄时水平居中，
将其顶部固定到其超级视图的顶部，并且
更改其高度以保持 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];
}

【问题讨论】：

标签： iphone ios autolayout

【解决方案1】：

如果您想将红色框水平居中，那么您需要等同于视图的 CenterX，而不是 CenterY。所以这个约束应该是这样的：

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

然后在第一个约束中，您所拥有的约束是不明确的，因为有不止一种方法可以满足每边的>=0 边距和宽度上的<=400。更好的方法是准确说出您在问题中所说的内容，即您需要宽度为喜欢边距为 0如果可能的话。

所以是这样的：

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

我相信这会得到你想要的？

【讨论】：

确实如此。非常有用的答案。谢谢。

【解决方案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]];

这个解决方案对我有用，我希望我把它分享给其他人。

【讨论】：