iOS Auto Layout - 保持两个视图（分组）在超级视图中居中，内容动态变化答案

【问题标题】：iOS Auto Layout - Keep two views (grouped) centered in superview, content changes dynamicallyiOS Auto Layout - 保持两个视图（分组）在超级视图中居中，内容动态变化
【发布时间】：2014-10-01 18:12:03
【问题描述】：

希望各位高手能轻松回答这个问题。

我有一个包含两个子视图的视图：一个 UIImageView 和一个 UILabel。图像视图将保持不变，但标签文本内容会动态变化。我刚刚开始使用自动布局，所以没有太多经验。我希望这两个子视图始终看起来像是分组的，并且无论标签的内容如何，“组”都在其父视图中以 H 和 V 为中心：

+------------------------------------------+ | | | +-----+ +----------+ | | | Img | | ShortText| | | +-----+ +----------+ | | | +------------------------------------------+

+------------------------------------------+ | | | +-----+ +-------------------+ | | | Img | | LongText | | | +-----+ +-------------------+ | | | +------------------------------------------+

我不确定解决此问题的最佳方法是什么。到目前为止，我将两个子视图添加到一个“占位符”不可见视图（我们称之为 groupView）中，并添加了约束以使其在超级视图中居中。它适用于初始标签文本，但是当文本开始更改时，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]];

感谢您的帮助。

【问题讨论】：

你可以为imageView指定宽高，为contentView和label指定高度，为label指定水平间距。另外增加标签的拥抱优先级。因此，标签宽度会由于其固有尺寸而增加。

标签： ios objective-c autolayout

【解决方案1】：

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

这样改：

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

而且效果很好。

【讨论】：

【解决方案2】：

试试下面的...

 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];

一个容器中的一个图片和文字会根据图片大小和文字大小添加首先，我为内部视图添加了约束，因此我在其 superview(containerView) 中添加了约束

 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 px margin - lable[lable] - 5 pix margin- Superview(|)

垂直约束：SuperView - 5 [top margin] -[image] - 5 [margin] - [superview]

现在为containerView添加约束将它添加到那个superview(self.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 [margin] - [containerView]

水平约束：X 的中心

【讨论】：