使用 XIB 和自动布局操作视图层次结构

Posted 2023-03-15

【中文标题】使用 XIB 和自动布局操作视图层次结构

【英文标题】：Manipulate view hierarchy using XIBs and auto-layout

【发布时间】：2013-05-28 22:05:16

【问题描述】：

我想要完成的事情看起来很简单，但我已经做了一整天了，我想不通。

我有一个带有分页滚动视图的场景的故事板（尚未使用自动布局）。我还有 2 个 XIB，我在代码中实例化。第一个 XIB (A) 有一个UILabel 和一个通用的UIView。第二个 XIB (B) 在 + 排列中只有 5 个UIButtons。最终目标是将B加载到A中的通用视图中（水平居中和标签下方的“默认值”），并使A在滚动视图中占据一整页。

当我调整 XIB A 的视图大小时，通用视图的大小会扩大和缩小，但始终保持标签下方的默认值。当我调整 XIB B 的视图大小时，按钮排列保持居中（这是我想要的）。这是我想要的行为。

但是，使用以下代码，它不起作用：

View A *viewA = [[ViewA alloc] initWithFrame:CGRectZero];
viewA.textLabel.text = @"A label with a rather long text";

ViewB *viewB = [[ViewB alloc] initWithFrame:CGRectZero];

[viewA setTranslatesAutoresizingMaskIntoConstraints:NO];
[viewB setTranslatesAutoresizingMaskIntoConstraints:NO];

[viewA.customView addSubview:viewB]; // customView is the generic view

这给了我以下信息：

（白色区域是滚动视图，红色区域是视图A，绿色区域是视图B。）

我尝试添加一个约束，让视图 B 占据其父视图的整个宽度：

[viewA.customView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"|[viewB]|" options:0 metrics:0 views:NSDictionaryOfVariableBindings(viewB)]];

但结果是这样的：

如何使按钮位于绿色区域的中心？我不在乎绿色区域是否完全被红色区域覆盖，或者红色区域是否正好位于绿色区域的中心。

【参考方案1】：

您提到不在 xibs 中使用自动布局，所以我假设在代码中添加约束的效果为零。您应该尝试对代码中添加的视图使用适当的 AutoresizingMasks。尝试在 xibs 中（正确地）使用自动布局，除非有充分的理由不这样做。

下面是一个Mask的例子，你需要弄清楚你需要哪些，不能通过你的例子来说明。

yourView.translatesAutoresizingMaskIntoConstraints = NO;
[yourView setAutoresizingMask:UIViewAutoresizingFlexibleWidth|UIViewAutoresizingFlexibleHeight];

【讨论】：

XIB 中启用了自动布局，但情节提要仍然适用于支柱和弹簧。

您是否检查过绿色视图的框架是否大小合适，看起来它超出了可见区域并且按钮可能居中