ios - StackView 内的 ScrollView

Question

我创建了垂直 stackView: screenshot

并在其中添加 ScrollView :

let scrollView = UIScrollView()
scrollView.translatesAutoresizingMaskIntoConstraints = false
scrollView.contentMode = .scaleToFill
scrollView.clipsToBounds = true
self.addArrangedSubview(scrollView)
scrollView.leftAnchor.constraint(equalTo: self.leftAnchor, constant: 0).isActive = true
scrollView.topAnchor.constraint(equalTo: label.bottomAnchor, constant: 0).isActive = true
scrollView.rightAnchor.constraint(equalTo: self.rightAnchor, constant: 0).isActive = true
scrollView.heightAnchor.constraint(equalToConstant: 100).isActive = true

在这个 ScrollView 中我添加了水平 ScrollView :

let imageStack = UIStackView()
imageStack.spacing = 5
imageStack.axis = .horizontal
imageStack.alignment = .center
imageStack.contentMode = .left
imageStack.distribution = .fillProportionally
imageStack.translatesAutoresizingMaskIntoConstraints = false
scrollView.addSubview(imageStack)
imageStack.heightAnchor.constraint(equalToConstant: 100).isActive = true
imageStack.topAnchor.constraint(equalTo: scrollView.topAnchor, constant: 0).isActive = true
imageStack.leftAnchor.constraint(equalTo: scrollView.leftAnchor, constant: 0).isActive = true
imageStack.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor, constant: 0).isActive = true
imageStack.rightAnchor.constraint(equalTo: scrollView.rightAnchor, constant: 0).isActive = true

在此 imageStack 中，我以编程方式插入图像。但是当有很多图像(超过 4 个)时，它们会相互叠加并且滚动不起作用。

是否可以在垂直 stackView 中对排列的 subview 使用水平滚动？或者 subview 的宽度不可能超过垂直 stackView 的宽度？

已编辑

我尝试编辑@beyowulf 推荐的约束，但没有任何改变。看screenshot .我向 imageStack 添加了 5 张图像，但如果它们和滚动不起作用，则只有一部分可见

已编辑 查看我找到 imageStack 并将图像添加到其中的代码:

let scrollView = self.dynamicView.subviews.first(where: {$0 is UIScrollView}) as! UIScrollView
let filesView = scrollView.subviews.first(where: { $0 is UIStackView } ) as! UIStackView
var filesCount = filesView.arrangedSubviews.count - 1

for image in images {
    let imgView = UIImageView()
    imgView.translatesAutoresizingMaskIntoConstraints = false
    let imageViewWidthConstraint = NSLayoutConstraint(item: imgView, attribute: .width, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1, constant: 100)
    let imageViewHeightConstraint = NSLayoutConstraint(item: imgView, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1, constant: 100)
    imgView.addConstraints([imageViewWidthConstraint, imageViewHeightConstraint])
    imgView.contentMode = .scaleAspectFill
    imgView.clipsToBounds = true
    imgView.image = image
    imgView.isUserInteractionEnabled = true
    let swipeToTopRecognizer = UISwipeGestureRecognizer(target: self, action: #selector(imageDelete))
    swipeToTopRecognizer.direction = .up
    let tapRecognizer = UITapGestureRecognizer(target: self, action: #selector(imageTapped))
    imgView.addGestureRecognizer(tapRecognizer)
    imgView.addGestureRecognizer(swipeToTopRecognizer)
    filesView.insertArrangedSubview(imgView, at: filesCount)
    filesCount += 1
}

Answer 1

如果您的目标是 iOS 11 或更高版本，您可以使用 UIScrollView的 contentLayoutGuide和 frameLayoutGuide区分何时要限制 ScrollView 的内容或 ScrollView 的框架。例如这里:

scrollView.leftAnchor.constraint(equalTo: self.leftAnchor, constant: 0).isActive = true
scrollView.topAnchor.constraint(equalTo: label.bottomAnchor, constant: 0).isActive = true
scrollView.rightAnchor.constraint(equalTo: self.rightAnchor, constant: 0).isActive = true
scrollView.heightAnchor.constraint(equalToConstant: 100).isActive = true

例如你可以尝试:

scrollView.frameLayoutGuide.heightAnchor.constraint(equalToConstant: 100).isActive = true
scrollView.frameLayoutGuide.widthAnchor.constraint(equalTo: self.widthAnchor).isActive = true

您正在添加更适用于 ScrollView 框架的约束。在这里:

imageStack.topAnchor.constraint(equalTo: scrollView.topAnchor, constant: 0).isActive = true
imageStack.leftAnchor.constraint(equalTo: scrollView.leftAnchor, constant: 0).isActive = true
imageStack.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor, constant: 0).isActive = true
imageStack.rightAnchor.constraint(equalTo: scrollView.rightAnchor, constant: 0).isActive = true

您正在添加约束，这些约束将更恰本地规定 ScrollView 的内容大小。

例如你可以尝试:

imageStack.topAnchor.constraint(equalTo: scrollView.contentLayoutGuide.topAnchor, constant: 0).isActive = true
imageStack.leftAnchor.constraint(equalTo: scrollView.contentLayoutGuide.leftAnchor, constant: 0).isActive = true
imageStack.bottomAnchor.constraint(equalTo: scrollView.contentLayoutGuide.bottomAnchor, constant: 0).isActive = true
imageStack.rightAnchor.constraint(equalTo: scrollView.contentLayoutGuide.rightAnchor, constant: 0).isActive = true

也就是说，您添加的约束比绝对必要的多，这通常是不好的，并且可能导致布局冲突。如果您要将已排列的 subview 添加到 UIStackView你真的应该只添加大小限制，因为定位将由 axis 的组合决定, alignment , distribution , 和 spacing .相反，你对 imageStack 的约束，当您固定四个边时，您也不需要添加尺寸限制，因为这将由固定限制决定。

另外，请注意控制台记录布局错误。如果你有的话，你可以试试wtf autolayout使它们更具可读性。