ios - 如何使用内部 XIB 为动态 UIStackView 设置对齐方式

Question

我原来的 ViewController 只包含一个这样的 ScrollView :

现在我也有了自己的xib文件(CheckBoxView)，主要由一个按钮组成，看这个截图:

我动态创建了一些 UIStackView 并将它们添加到 ScrollView 在这些 UIStackView 中我添加了我的 xib 的多个实例 文件。

我想要实现的是，StackViews 只是垂直堆叠。在 StackViews 中，我的 xib 文件中的 UIView 也应该垂直堆叠。

目前它看起来像这样:

所以 xib-Views 不在整个 View 中。由于我使用的是多操作系统引擎，因此我无法提供 swift/obj-c 代码。但这是我的 Java 代码:

for (ItemConfiguration config : itemInstance.getConfigurations()) {

            List<DLRadioButton> radioButtons = new ArrayList<DLRadioButton>();

            UIStackView configView = UIStackView.alloc().initWithFrame(new CGRect(new CGPoint(0, barHeight), new CGSize(displayWidth, displayHeight - barHeight)));
            configView.setAxis(UILayoutConstraintAxis.Vertical);
            configView.setDistribution(UIStackViewDistribution.EqualSpacing);
            configView.setAlignment(UIStackViewAlignment.Center);
            configView.setSpacing(30);


            for (ConfigurationOption option : config.getOptions()) {
                UIView checkBox = instantiateFromNib("CheckBoxView");
                for (UIView v : checkBox.subviews()) {
                    if (v instanceof DLRadioButton) {
                        ((DLRadioButton) v).setTitleForState(option.getName(), UIControlState.Normal);
                        //((DLRadioButton) v).setIconSquare(true);
                        radioButtons.add((DLRadioButton) v);
                    }
                }
                configView.addArrangedSubview(checkBox);
            }
            // group radiobuttons
            //groupRadioButtons(radioButtons);

            configView.setTranslatesAutoresizingMaskIntoConstraints(false);
            scrollView().addSubview(configView);

            configView.centerXAnchor().constraintEqualToAnchor(scrollView().centerXAnchor()).setActive(true);
            configView.centerYAnchor().constraintEqualToAnchor(scrollView().centerYAnchor()).setActive(true);
        }


private UIView instantiateFromNib(String name) {
    return (UIView) UINib.nibWithNibNameBundle(name, null).instantiateWithOwnerOptions(null, null).firstObject();
}

我需要如何设置对齐方式等来实现我想要的。它应该看起来像这样:

Answer 1

我不知道是否有理由不使用UITableView ，我强烈推荐您的案例。如果不可能，您可以在下面找到一些应该有所帮助的建议。

---

如果您使用自动布局，则应该为代码中实例化的所有 View 设置约束。 iOS 必须全面了解每个 View 的位置和大小。

删除多余的约束

configView.centerXAnchor().constraintEqualToAnchor(scrollView().centerXAnchor()).setActive(true);
configView.centerYAnchor().constraintEqualToAnchor(scrollView().centerYAnchor()).setActive(true);

这两个约束对我来说没有意义。您需要将 stackview 堆叠在 ScrollView 中，但不居中。如果我正确理解你的目标，这应该被删除

为 UIStackView 设置宽度/x 位置约束

configView.setTranslatesAutoresizingMaskIntoConstraints(false);
scrollView().addSubview(configView);

将堆栈 View 添加到 ScrollView 后，您需要为其设置约束。我将用 swift 提供我的代码，但它看起来与您的 Java 代码正在执行的操作非常相似，因此希望您能够毫无困难地转译它:

NSLayoutConstraint.activate([
  configView.leadingAnchor.constraintEqualToAnchor(scrollView.leadingAnchor),
  configView.trailingAnchor.constraintEqualToAnchor(scrollView.trailingAnchor)
]);

设置 UIStackView 的高度约束

每当您在其中添加排列 View 时，StackViews 都不会更改其大小。因此，您需要自己计算所需的 stackview 大小并通过约束显式指定它。它应该足以容纳元素和它们之间的空间。我认为所有项目应该具有相同的大小，让它为 32 点，那么高度应该是:

let stackViewHeight = items.count * 32 + stackView.space * (items.count + 1)

并为堆栈 View 设置新的高度约束:

configView.heightAnchor.constraint(equalToConstant: stackViewHeight).isActive = true

设置 UIStackView 的 y 位置

这是一个更具挑战性的部分，但对于 View 在 ScrollView 中正常工作来说最重要。

1)更改循环以了解 UIStackView 的索引

ScrollView 应该始终了解其内容的高度，因此您需要了解哪个堆栈 View 是顶部 View ，哪个是底部 View 。为此，您需要将每个循环更改为 for(;;) 循环:

for (int i = 0; i < itemInstance.getConfigurations().length; i++) {
  ItemConfiguration config = itemInstance.getConfigurations()[i]
  ...
}

我不知道你的数组是什么类型，所以如果它没有下标功能，只需替换为相应的方法即可。

2) 设置堆栈 View 的顶部 anchor

对于数组中的第一个堆栈 View ，顶部 anchor 应等于 ScrollView 顶部 anchor ，对于其他堆栈 View ，顶部 anchor 应等于前一个堆栈 View 的底部 anchor + 它们之间的间距(例如，本例中为 8 点):

if i == 0 {
  configView.topAnchor.constraintEqualToAnchor(scrollView.topAnchor, constant: 8).isActive = true
} else {
  let previousConfigView = itemInstance.getConfigurations()[i - 1]
  configView.topAnchor.constraintEqualToAnchor(previousConfigView.bottomAnchor, constant: 8).isActive = true
}

3)为最后一个堆栈 View 设置底部 anchor

正如前面所说 - 为了让 ScrollView 了解内容大小，我们需要指定相应的约束:

if i == itemInstance.getConfigurations() - 1 {
  configView.bottomAnchor.constraintEqualToAnchor(scrollView.bottomAnchor, constant: 8).isActive = true
}

注意:请注意，所有约束都应设置在已添加到 ScrollView 中的 View 上。