以编程方式一个接一个地添加视图

Question

我是 Swift 新手（使用 4 个版本）。 我有 HTML 文本，里面可以包含图片链接。

some text 
<img src=""/>
some text

我想让内容可滚动，所以我将容器（简单的 UIView）包装到 UIScrollview。

然后我将 HTML 文本解析为多个部分：“文本”和“图像链接”到一个数组（数据和类型）中。 然后遍历我观察的那个数组，如果类型是文本 - 我输入带有约束的标签：

如果它是容器的第一个元素，那么左、上、右、下是匹配的。 如果不是，则 top 匹配容器中前一个视图的底部（如链）。

但由于某种原因，它不起作用。 我究竟做错了什么？ 我把我的代码：

    var lastView = containerView!
    var label : UILabel
    var imageView : UIImageView

    for item in articleContent {
        if (item.type == RenderDetailBlogObject.TYPE_TEXT) {
            label = UILabel()

            label.numberOfLines = 0
            label.attributedText = item.data.html2AttributedString
            containerView.addSubview(label)

            label.translatesAutoresizingMaskIntoConstraints = false

            NSLayoutConstraint.activate([
                label.leftAnchor.constraint(equalTo: containerView.leftAnchor),
                label.rightAnchor.constraint(equalTo: containerView.rightAnchor),
                ])

            if (lastView == containerView) {
                print("ADDING LABEL lastView == containerView")
                label.topAnchor.constraint(equalTo: containerView.topAnchor, constant: 0.0).isActive = true
            } else {
                  print("ADDING LABEL lastView != containerView")
                 label.topAnchor.constraint(equalTo: lastView.bottomAnchor, constant: 0.0).isActive = true
            }

            lastView = label
        } else {
            imageView = UIImageView()

            imageView.sd_setImage(with: URL(string: item.data))
            containerView.addSubview(imageView)

            imageView.translatesAutoresizingMaskIntoConstraints = false

            NSLayoutConstraint.activate([

                imageView.leftAnchor.constraint(equalTo: containerView.leftAnchor),
                imageView.rightAnchor.constraint(equalTo: containerView.rightAnchor),
                ])

            if (lastView == containerView) {
                print("ADDING AN IMAGE lastView == containerView")
                 imageView.topAnchor.constraint(equalTo: containerView.topAnchor, constant: 0.0).isActive = true
            } else {
                 print("ADDING AN IMAGE lastView != containerView")
                imageView.topAnchor.constraint(equalTo: lastView.bottomAnchor, constant: 0.0).isActive = true
            }

            lastView = imageView
        }

        lastView.bottomAnchor.constraint(equalTo: containerView.bottomAnchor, constant: 0.0)
    }

编辑： 代码似乎是正确的，并且视图添加正确，但约束不允许滚动视图。

我测试了约束（中心 Y - 向它添加了 200 多个范围并开始滚动，但它是硬编码值，所以它可能有更合法的解决方案吗？） 没有这个约束，它就会出错并且根本不起作用。

Answer 1

我相信这条线是你的麻烦来源：

lastView.bottomAnchor.constraint(equalTo: containerView.bottomAnchor, constant: 0.0)

现在，当您遍历项目时，您将每个标签/图像视图约束为将底部锚点约束到 containerView 的底部。我希望这会导致不可满足的约束警告（检查您的控制台）。您想要约束添加到容器的最后一个标签/imageView 的底部。因此，只需将该行移出其后面的 for 循环即可：

var lastView = containerView!
var label : UILabel
var imageView : UIImageView

for item in articleContent {
    if (item.type == RenderDetailBlogObject.TYPE_TEXT) {
        label = UILabel()

        label.numberOfLines = 0
        label.attributedText = item.data.html2AttributedString
        containerView.addSubview(label)

        label.translatesAutoresizingMaskIntoConstraints = false

        NSLayoutConstraint.activate([
            label.leftAnchor.constraint(equalTo: containerView.leftAnchor),
            label.rightAnchor.constraint(equalTo: containerView.rightAnchor),
            ])

        if lastView == containerView {
            print("ADDING LABEL lastView == containerView")
            label.topAnchor.constraint(equalTo: containerView.topAnchor, constant: 0.0).isActive = true
        } else {
              print("ADDING LABEL lastView != containerView")
            label.topAnchor.constraint(equalTo: lastView.bottomAnchor, constant: 0.0).isActive = true
        }

        lastView = label
    } else {
        imageView = UIImageView()

        imageView.sd_setImage(with: URL(string: item.data))
        containerView.addSubview(imageView)

        imageView.translatesAutoresizingMaskIntoConstraints = false

        NSLayoutConstraint.activate([

            imageView.leftAnchor.constraint(equalTo: containerView.leftAnchor),
            imageView.rightAnchor.constraint(equalTo: containerView.rightAnchor),
            ])

        if lastView == containerView {
            print("ADDING AN IMAGE lastView == containerView")
            imageView.topAnchor.constraint(equalTo: containerView.topAnchor, constant: 0.0).isActive = true
        } else {
            print("ADDING AN IMAGE lastView != containerView")
            imageView.topAnchor.constraint(equalTo: lastView.bottomAnchor, constant: 0.0).isActive = true
        }

        lastView = imageView
    }
}
// Constrain the bottom only for the last view that was added
lastView.bottomAnchor.constraint(equalTo: containerView.bottomAnchor, constant: 0.0).isActive = true

如果根据这个答案进行重构不能解决滚动问题，我建议检查containerView 和scrollView 之间的约束 - 您可以使用this answer 作为参考。

Answer 2

也许更简洁的方法是在滚动视图中使用UIStackView，这样您就可以将任何其他视图作为子视图添加到UIStackView。这样你就不必自己处理约束了。

所以您的视图层次结构应该类似于下面的内容。

->UIView
    ->UIScrollView
        ->UIView
            ->UIStackView

然后将约束添加到 scrollView 为 top-left-bottom-right

另外添加另一个 UIView 到 UIScrollView 作为 Wrapper View 并将约束添加为 top-left-bottom-right 并添加两个约束到此 wrapper view 等于宽度 并且 等于高度 相对于主视图。这将使UIScrollView 使用动态高度，更多信息请参见post

现在将约束添加到堆栈视图，因为 top-left-right-bottom 还添加了带有插座连接的高度约束。

现在，当您将任何视图添加到堆栈视图时，只需更改 UIStackView 的高度常量，您的 UIScrollView 就会自动扩展。