ios - ScrollView 内的内容 View - 为什么？

Question

我发现几乎每个人都在 Storyboard的 ScrollView 中使用虚拟 View 。 ScrollView 本身不是一个 View 吗？

在此官方Apple docs link ，指出:

For most common layout tasks, the logic becomes far easier if you use a dummy view or layout group to contain the scroll view’s content.

我确实尝试直接使用 ScrollView ，而不是使用内容 View (虚拟 View )作为中间，并发现自己处于便秘的情况，但我不这样做知道为什么。

这是我的问题:

1. 直接使用 ScrollView 为何以及如何变得困难？
2. 什么是布局组以及如何使用它作为替代方案？
3. 如何在没有中间虚拟 View 的情况下直接使用 ScrollView ？

Answer 1

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

就我个人而言，我发现直接方法更简单。

如果没有虚拟/内容 View ，您只需将元素约束到 ScrollView 本身，而不是内容 View 。

这里有两个例子。 ContentScrollViewController 和 DirectScrollViewController。正如您将看到的，它们几乎是相同的。这确实是一个偏好问题...可能您开始使用哪种方法就是您更喜欢的方法。注意:出于演示目的，我经常为元素提供截然不同的背景颜色，以便于查看布局框架。

内容 View 方法:

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),

            ])

    }

}