iOS自动布局-保持两个视图（分组）在superview中居中，内容动态更改

我希望你们这些天才能很容易地回答这个问题

我有一个包含两个子视图的视图：UIImageView和UILabel。图像视图将保持不变，但标签文本内容将动态更改。我刚刚开始使用自动布局，所以没有太多的经验。我希望这两个子视图始终看起来像是分组的，并且该组在其superview中以H和V为中心，而不考虑标签的内容：

+---------------------+ | | | +---+ +-----+ | || Img | |短文本|| | +---+ +-----+ | | | +---------------------+

+---------------------+ | | | +---+ +----------+ | || Img | |长文本|| | +---+ +----------+ | | | +---------------------+

我不确定最好的方法是什么。到目前为止，我已将这两个子视图添加到占位符不可见视图（我们称之为groupView）中，并添加了约束以使其在superview中居中。它可以与初始标签文本一起工作，但当文本开始更改时，groupView原点保持固定且不居中

代码如下：

UIView *containerView = [[UIView alloc] init];
containerView.translatesAutoresizingMaskIntoConstraints = NO;
UIView *groupView = [[UIView alloc] init];
groupView.translatesAutoresizingMaskIntoConstraints = NO;
UIImageView *imgView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"img"]];
imgView.translatesAutoresizingMaskIntoConstraints = NO;
[groupView addSubview:imgView];
titleLabel = [[UILabel alloc] init];
titleLabel.translatesAutoresizingMaskIntoConstraints = NO;
titleLabel.text = @"Title";
[groupView addSubview:titleLabel];
[containerView addSubview:groupView];

NSDictionary *viewDictionary = NSDictionaryOfVariableBindings(containerView, groupView, imgView, titleLabel);
[groupView addConstraint:[NSLayoutConstraint constraintWithItem:imgView attribute:NSLayoutAttributeCenterY relatedBy:NSLayoutRelationEqual toItem:groupView attribute:NSLayoutAttributeCenterY multiplier:1.0 constant:0]];
[groupView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:[imgView]-[titleLabel]" options:NSLayoutFormatAlignAllCenterY metrics:nil views:viewDictionary]];
[containerView addConstraint:[NSLayoutConstraint constraintWithItem:groupView attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:containerView attribute:NSLayoutAttributeCenterX multiplier:1.0 constant:0]];
[containerView addConstraint:[NSLayoutConstraint constraintWithItem:groupView attribute:NSLayoutAttributeCenterY relatedBy:NSLayoutRelationEqual toItem:containerView attribute:NSLayoutAttributeCenterY multiplier:1.0 constant:0]];

---

谢谢你的帮助。

事实上，修复非常简单。设置约束以对齐图像视图和标签时，我忘记在VFL字符串中包含superview符号|，因此我认为groupView没有正确计算其固有大小

这样改变它：

[groupView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[imgView]-[titleLabel]|" options:NSLayoutFormatAlignAllCenterY metrics:nil views:viewDictionary]];

而且它工作得很好。

试试下面的一个

 UIView *containerView = [[UIView alloc] init];
containerView.translatesAutoresizingMaskIntoConstraints = NO;
[containerView setBackgroundColor:[UIColor redColor]];

UIImageView *imgView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"120.png"]];
imgView.translatesAutoresizingMaskIntoConstraints = NO;
[containerView addSubview:imgView];

titleLabel = [[UILabel alloc] init];
titleLabel.translatesAutoresizingMaskIntoConstraints = NO;
titleLabel.text = @"Title1";
[containerView addSubview:titleLabel];

[self.view addSubview:containerView];

一个图像和文本中的一个容器将根据图像大小和文本大小添加 首先，我为内部视图添加了约束，因此它的superviewcontainerView中添加了约束

 id innerView=@{@"image":imgView,@"lable":titleLabel};
  [containerView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-[image]-5-[lable]-5-|" options:NSLayoutFormatAlignAllCenterY metrics:nil views:innerView]];
   [containerView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-5-[image]-5-|" options:0 metrics:nil views:innerView]];

水平约束：第一个Superview |-ImageView[image]-5像素边距-标签[lable]-5像素边距-Superview|

垂直约束：SuperView-5[顶视图]-[图像]-5[边距]-[超级视图]

现在为containerView添加约束将其添加到superviewself.view

  id logoV=@{@"containerView":containerView};
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-20-[containerView]" options:0 metrics:nil views:logoV]];
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:containerView attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterX multiplier:1 constant:0]];

垂直约束：-superview-20[边距]-[containerView]

---

水平约束：其X的中心

您可以为imageView指定宽度和高度，为contentView和label指定高度，为label指定水平空间。此外，增加标签的拥抱优先权。因此，标签宽度将因其“固有大小”而增加。