Swift-如何将一堆视图放入滚动视图中

C目前，我有一个自定义视图（返回一个UITakView），其中包含许多视图（UILabel、UIImageView等）。它可以在高度足够的设备上显示精细的图像

（顺便说一句，这都是通过编程完成的。）

在小屏幕设备上，它将只显示整个视图的顶部。所以我的解决方案是把它放在UIScrollView中。（这应该很简单——但这让我很难过。）

但这根本不会显示，我做错了什么/错过了什么？

部分代码如下：

override init(frame: CGRect)
{
    super.init(frame: frame)

    imageFrame.addSubview(prodImage)
    NSLayoutConstraint.activate([
        prodImage.topAnchor.constraint(equalTo: imageFrame.topAnchor),
        prodImage.trailingAnchor.constraint(equalTo: imageFrame.trailingAnchor),
        prodImage.leadingAnchor.constraint(equalTo: imageFrame.leadingAnchor),
        prodImage.bottomAnchor.constraint(equalTo: imageFrame.bottomAnchor),
        ])

    imageView.addSubview(imageFrame)
    NSLayoutConstraint.activate([
        imageFrame.topAnchor.constraint(equalTo: imageView.topAnchor),
        imageFrame.trailingAnchor.constraint(equalTo: imageView.trailingAnchor),
        imageFrame.leadingAnchor.constraint(equalTo: imageView.leadingAnchor),
        imageFrame.bottomAnchor.constraint(equalTo: imageView.bottomAnchor),
        ])

//更多视图

    let stack = UIStackView(arrangedSubviews: [imageView, prodName, prodPrice])
    stack.axis = .vertical
    stack.spacing = (self.frame.height > 400) ? (self.frame.height > 800) ? 15 : 10 : 5
    stack.distribution = UIStackViewDistribution.fill

    self.addSubview(stack)
    NSLayoutConstraint.activate([
        stack.leadingAnchor.constraint(equalTo: self.leadingAnchor),
        stack.topAnchor.constraint(equalTo: self.topAnchor),
//      stack.bottomAnchor.constraint(equalTo: self.bottomAnchor, constant: -50),
        stack.widthAnchor.constraint(equalTo: self.widthAnchor),
        ])
}

为了进行更改，我替换了下面的小节：

如您所见，我尝试禁用滚动视图的自动约束以使其适合其父视图。。。所有的尝试都失败了

如何使此滚动视图可见？

可能的错误：

• 您正在将堆栈视图的前导/尾随设置为滚动视图
• 如果打印帧的宽度，您可能会理解宽度为零

这是因为：

• 无法根据滚动视图确定堆栈视图的宽度
• 滚动视图是一种特殊视图，因为它的内容可以比滚动视图大
• 因此，需要显式设置内容视图（堆栈视图）的宽度

可能的解决方案1： 在

视图

上设置它，而不是基于

滚动视图

进行设置（假设将滚动视图添加为viewController视图的子视图）

可能的解决方案2： 可以显式设置堆栈视图的宽度定位

例子： 下面给出了一个简单的示例，说明如何将堆栈视图与滚动视图结合使用

你的大致想法是正确的

• 滚动视图有一个堆栈视图
• 堆栈视图有几个子视图

屏幕截图：

一般说明：

• 滚动视图很特别，因为滚动视图的内容可以比滚动视图本身更宽、更高（允许滚动）
• 因此，内容的宽度和高度不应与滚动视图绑定
• 设置内容的宽度和高度时，滚动视图不应扮演任何角色

策略

• 正如您所指出的，我喜欢使用滚动视图和内容视图
• 将实际内容添加到堆栈视图，并让堆栈视图增长
• 因此，只要堆栈视图对滚动视图的约束设置正确，事情就应该就绪

调试：

• 始终在

  viewdide

  中打印帧值，以查看是否符合您的期望

示例代码：

---

很好的解释！你说的很有道理。我的主要区别是，我正在实现一个从UIView继承的自定义视图-因此我不能使用

视图

，而是使用

self

。我替换了您在可能的修复1中提到的约束，但它会导致崩溃。如果它崩溃，请查看它为什么崩溃，通常崩溃会告诉您它们为什么崩溃。是否因为添加到约束的视图不是视图层次结构的一部分？最好让父视图/容器视图确定其子视图的位置。每个子视图都可以设置其自身的约束，但不要让它知道其父视图

//  self.addSubview(stack)
//  NSLayoutConstraint.activate([
//      stack.leadingAnchor.constraint(equalTo: self.leadingAnchor),
//      stack.topAnchor.constraint(equalTo: self.topAnchor),
////        stack.bottomAnchor.constraint(equalTo: self.bottomAnchor, constant: -50),
//      stack.widthAnchor.constraint(equalTo: self.widthAnchor),
//      ])
    let scrollView = UIScrollView()
    //      scrollView.translatesAutoresizingMaskIntoConstraints = false
    scrollView.addSubview(stack)
    NSLayoutConstraint.activate([
        stack.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor),
        stack.topAnchor.constraint(equalTo: scrollView.topAnchor),
        stack.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor, constant: -50),
        stack.widthAnchor.constraint(equalTo: scrollView.widthAnchor),
        ])

    self.addSubview(scrollView)
    NSLayoutConstraint.activate([
        scrollView.leadingAnchor.constraint(equalTo: self.leadingAnchor),
        scrollView.topAnchor.constraint(equalTo: self.topAnchor),
        scrollView.bottomAnchor.constraint(equalTo: self.bottomAnchor, constant: -50),
        scrollView.widthAnchor.constraint(equalTo: self.widthAnchor),
        ])

    stack.leadingAnchor.constraint(equalTo: view.leadingAnchor),
    stack.topAnchor.constraint(equalTo: view.topAnchor),

class ViewController: UIViewController {

    let scrollView  = UIScrollView()
    let contentView = UIStackView()

    let redView     = UIView()
    let greenView   = UIView()
    let yellowView  = UIView()

    override func viewDidLoad() {
        super.viewDidLoad()

        setupScrollView()
        setupContentView()
        setupRedView()
        setupGreenView()
        setupYellowView()
    }

    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)

        print("scroll view  = \(scrollView.frame)")
        print("content view = \(contentView.frame)")
        print("red view     = \(redView.frame)")
        print("green view   = \(greenView.frame)")
        print("yellow view  = \(yellowView.frame)")
    }

    private func setupScrollView() {

        scrollView.backgroundColor = .darkGray

        view.addSubview(scrollView)

        scrollView.translatesAutoresizingMaskIntoConstraints = false

        scrollView.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
        scrollView.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true
        scrollView.topAnchor.constraint(equalTo: view.topAnchor).isActive = true
        scrollView.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true
    }

    private func setupContentView() {

        contentView.axis            = .vertical
        contentView.distribution    = .fill
        contentView.alignment       = .fill

        scrollView.addSubview(contentView)

        contentView.translatesAutoresizingMaskIntoConstraints = false

        //Strategy is:
        //content view's leading / trailing anchors are set to view controller's view
        //content view's top / bottom anchors are set to scroll view

        contentView.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
        contentView.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true
        contentView.topAnchor.constraint(equalTo: scrollView.topAnchor).isActive = true
        contentView.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor).isActive = true
    }

    private func setupRedView() {

        redView.backgroundColor = .red

        redView.heightAnchor.constraint(equalToConstant: 400).isActive = true

        contentView.addArrangedSubview(redView)
    }

    private func setupGreenView() {

        greenView.backgroundColor = .green

        greenView.heightAnchor.constraint(equalToConstant: 400).isActive = true

        contentView.addArrangedSubview(greenView)
    }

    private func setupYellowView() {

        yellowView.backgroundColor = .yellow

        yellowView.heightAnchor.constraint(equalToConstant: 400).isActive = true

        contentView.addArrangedSubview(yellowView)
    }
}