滚动视图中的内容视图-为什么？

Question

我看到，几乎每个人都在滚动视图中使用虚拟视图，在故事板中。滚动视图本身不是视图吗？

在这个官方的苹果文档链接中，声明：

对于大多数常见的布局任务，如果使用虚拟视图或布局组来包含滚动视图的内容，则逻辑变得容易得多。

我确实尝试直接使用滚动视图，而不是将内容视图(虚拟视图)作为中间视图，并发现自己处于便秘状态，我不知道为什么。

以下是我的问题：

1. 为什么以及如何使直接使用滚动视图变得困难？
2. 什么是，以及如何使用布局组作为替代？
3. 如何直接使用滚动视图，而没有中间虚拟视图？

Answer 1

通常，元素是动态添加的。许多人发现将它们添加到“内容视图”比将它们直接添加到滚动视图中更容易。

就我个人而言，我觉得直接的方法更容易。

没有虚拟/内容视图，您只需将元素约束到滚动视图本身，而不是内容视图。

以下是两个例子。ContentScrollViewController和DirectScrollViewController.正如你所看到的，它们几乎是相同的。这真的是偏好的问题..。可能您开始使用的任何方法都将是您所喜欢的方法。注意:为了演示的目的，我经常给元素明显不同的背景颜色，使它很容易看到布局框架。

内容视图方法：

class ContentScrollViewController: UIViewController {

    let topLabel: UILabel = {
        let v = UILabel()
        v.translatesAutoresizingMaskIntoConstraints = false
        v.backgroundColor = .green
        v.text = "Top Label"
        return v
    }()

    let bottomLabel: UILabel = {
        let v = UILabel()
        v.translatesAutoresizingMaskIntoConstraints = false
        v.backgroundColor = .green
        v.text = "Top Label"
        return v
    }()

    let contentView: UIView = {
        let v = UIView()
        v.translatesAutoresizingMaskIntoConstraints = false
        v.backgroundColor = .orange
        return v
    }()

    let scrollView: UIScrollView = {
        let v = UIScrollView()
        v.translatesAutoresizingMaskIntoConstraints = false
        v.backgroundColor = .red
        return v
    }()

    override func viewDidLoad() {
        super.viewDidLoad()

        view.addSubview(scrollView)
        scrollView.addSubview(contentView)
        contentView.addSubview(topLabel)
        contentView.addSubview(bottomLabel)

        NSLayoutConstraint.activate([

            // constrain scrollView to all 4 sides with 20-pts padding
            scrollView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 20.0),
            scrollView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor, constant: -20.0),
            scrollView.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor, constant: 20.0),
            scrollView.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor, constant: -20.0),

            // constrain contentView to all 4 sides of scrollView with 8-pts padding
            contentView.topAnchor.constraint(equalTo: scrollView.topAnchor, constant: 8.0),
            contentView.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor, constant: -8.0),
            contentView.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor, constant: 8.0),
            contentView.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor, constant: -8.0),

            // constrain topLabel 0-pts to top and leading of contentView
            topLabel.topAnchor.constraint(equalTo: contentView.topAnchor, constant: 0.0),
            topLabel.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 0.0),

            // constrain bottomLabel's top 800-pts from bottom of topLabel
            bottomLabel.topAnchor.constraint(equalTo: topLabel.bottomAnchor, constant: 800.0),

            // constrain bottomLabel's leading 600-pts from trailing of topLabel
            bottomLabel.leadingAnchor.constraint(equalTo: topLabel.trailingAnchor, constant: 600.0),

            // constrain bottomLabel 0-pts to bottom and trailing of contentView
            bottomLabel.bottomAnchor.constraint(equalTo: contentView.bottomAnchor, constant: 0.0),
            bottomLabel.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: 0.0),

            ])

    }

}

直接法：

class DirectScrollViewController: UIViewController {

    let topLabel: UILabel = {
        let v = UILabel()
        v.translatesAutoresizingMaskIntoConstraints = false
        v.backgroundColor = .green
        v.text = "Top Label"
        return v
    }()

    let bottomLabel: UILabel = {
        let v = UILabel()
        v.translatesAutoresizingMaskIntoConstraints = false
        v.backgroundColor = .green
        v.text = "Top Label"
        return v
    }()

    let scrollView: UIScrollView = {
        let v = UIScrollView()
        v.translatesAutoresizingMaskIntoConstraints = false
        v.backgroundColor = .red
        return v
    }()

    override func viewDidLoad() {
        super.viewDidLoad()

        view.addSubview(scrollView)
        scrollView.addSubview(topLabel)
        scrollView.addSubview(bottomLabel)

        NSLayoutConstraint.activate([

            // constrain scrollView to all 4 sides with 20-pts padding
            scrollView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 20.0),
            scrollView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor, constant: -20.0),
            scrollView.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor, constant: 20.0),
            scrollView.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor, constant: -20.0),

            // constrain topLabel 8-pts to top and leading of scrollView
            topLabel.topAnchor.constraint(equalTo: scrollView.topAnchor, constant: 8.0),
            topLabel.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor, constant: 8.0),

            // constrain bottomLabel's top 800-pts from bottom of topLabel
            bottomLabel.topAnchor.constraint(equalTo: topLabel.bottomAnchor, constant: 800.0),

            // constrain bottomLabel's leading 600-pts from trailing of topLabel
            bottomLabel.leadingAnchor.constraint(equalTo: topLabel.trailingAnchor, constant: 600.0),

            // constrain bottomLabel 8-pts to bottom and trailing of scrollView
            bottomLabel.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor, constant: -8.0),
            bottomLabel.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor, constant: -8.0),

            ])

    }

}

Answer 2

如果在滚动视图中使用内容视图，则无需编程计算和设置滚动视图的内容大小(如果使用Autolayout )，因为您的UI元素将autolayout约束设置为content视图，而content视图将根据UI元素内容更改其大小。滚动视图有两个不同的东西，一个是它的框架，另一个是它的内容大小。因此，如果不使用内容视图层，则必须按照UI元素内容手动设置滚动视图的内容大小。请检查这个：chauhan/how-to-configure-a-uiscrollview-with-auto-layout-in-interface-builder-218dcb4022d7