将 UIImageView 与自动布局对齐

Question

我想要的是将图像添加为子视图，然后将其沿 X 轴居中对齐，距离父视图底部 10 个点。我只需要使用自动布局，最好使用视觉格式化语言。

- (void)viewDidLoad
{
    [super viewDidLoad];

    self.imageView = [[UIImageView alloc] initWithFrame:CGRectZero];
    [self.imageView setTranslatesAutoresizingMaskIntoConstraints:NO];
    [self.imageView setImage:[UIImage imageNamed:@"06-arrow-south"]];
    self.imageView.contentMode = UIViewContentModeScaleAspectFit;
    [self.view addSubview:self.imageView];
    [self addConstraints];

    self.imageView.layer.borderColor = [[UIColor redColor] CGColor];

    self.imageView.layer.borderWidth = 1.0;
}

- (void)addConstraints {

    NSDictionary *viewsDictionary = @{@"arrowImage":self.imageView};

    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-[arrowImage(==40)]-|"
                                                                 options:0
                                                                 metrics:nil
                                                                   views:viewsDictionary]];

    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-[arrowImage(==40)]-10-|"
                                                                 options:0
                                                                 metrics:nil
                                                                   views:viewsDictionary]];
}

这是我得到的：

Answer 1

V:|-[arrowImage]-10-|

这会对齐图像视图，使其距父视图顶部为标准长度 (20pt)，距底部为 10。您想要的只是将其固定到底部：

V:[arrowImage]-10-|

我不确定超级视图中的居中是否可以通过视觉格式完成，但您可以创建一个约束来居中：

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

不需要设置图像视图的高度或宽度；它的大小将由它的内容决定。

所以，这是您的 addConstraints 方法的完整代码：

- (void)addConstraints {

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

    NSDictionary *viewsDictionary = @{@"arrowImage":self.imageView};

    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:[arrowImage]-10-|"
                                                                 options:0
                                                                 metrics:nil
                                                                   views:viewsDictionary]];
}

Answer 2

您当前所做的是说 arrowImage 应该是视图的完整大小，在左侧、右侧和顶部减去 20px，但从底部减去 10px。

以 x 为中心执行以下操作。

 [self.view addConstraint:[NSLayoutConstraint constraintWithItem:arrowImage attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterX multiplier:1.0 constant:0.0];

然后正如@Austin 指出的那样，去掉从顶部减去 8 和从底部减去 10 的需要：

V:[arrowImage]-10-|

顺便说一句，当您将同级视图连接到父级时，默认值为负 20：（请参阅下面的评论）

|-[