Question

我希望你的天才能轻松回答这个问题。

我有两个子视图的视图：UIImageView和UILabel。图像视图将保持不变，但标签文本内容将动态更改。我刚开始使用自动布局，所以没有多少经验。我希望这两个子视图看起来总是分组，并且＆＃34; group＆＃34;无论标签的内容如何，都在其超视图中以H和V为中心：

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

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

我不确定采用这种方式的最佳方式。到目前为止，我将这两个子视图添加到了一个＆＃34;占位符＆＃34;不可见的视图（让它称之为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]];

感谢您的帮助。

Answer 1

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

像这样改变：

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

它完美无缺。

Answer 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）我添加了Constraints

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

Horitantal Constraints：First Superview（|）-ImageView [image] - 5 px margin - lable [lable] - 5 pix margin- Superview（|）

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

现在为containerView添加Constraints将其添加到该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的中心

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

2 个答案: