如何在swift4中动态添加滚动视图

Question

我创建了一个视图，其中包含一个图像和一个文本视图（动态变化）和一个按钮。此视图嵌入在UIScrollView 中。但是当我运行它时，Scrollview 不起作用。我在 Swift4 中遇到了这个问题。

您可以参考以下链接： https://github.com/sravyagajavalli/Scrolling

Answer 1

将 UIScrollView 作为两个独立的视图是件好事。框架视图（它定义了超级视图和兄弟视图中滚动视图的大小）和内容视图（它定义了 contentSize）。在 Autolayout 的观点是这两个视图是绝对独立的。所以你需要定义frameView。然后您需要正确定义自动布局以正确调整内容视图的大小（您不需要解决 x 和 y 位置当然这是 contentOffset 和滚动原则的问题）。让我们从例子开始：

1) 创建 UIScrollView 将其添加到 superView 并定义框架视图

        let scrollView = UIScrollView()
        scrollView.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(scrollView)
        NSLayoutConstraint.activate([
            scrollView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            scrollView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
            scrollView.topAnchor.constraint(equalTo: view.topAnchor),
            scrollView.bottomAnchor.constraint(equalTo: view.bottomAnchor)
    ])

2) 根据我的经验，创建清晰视图并将其作为 contentView 添加到 scrollView 以实现更好的自动布局始终是一种好习惯。

let contentView = UIView()
contentView.translatesAutoresizingMaskIntoConstraints = false
scrollView.addSubview(contentView)
NSLayoutConstraint.activate([
    contentView.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor),
    contentView.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor),
    contentView.topAnchor.constraint(equalTo: scrollView.topAnchor),
    contentView.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor),
    contentView.widthAnchor.constraint(equalTo: view.widthAnchor)
])

注意最后一个约束，我们需要将这个内容视图的宽度定义为与屏幕相等 - 这对于定义我们想要垂直滚动很重要。因此，我们可以让 autolayout 完成它的工作，并根据内容自动计算 scrollView 的内容高度。

3) 将任何你想要的内容添加到滚动视图中

let label = UILabel()
label.translatesAutoresizingMaskIntoConstraints = false
label.text = "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis sapien nunc, commodo et, interdum suscipit, sollicitudin et, dolor. Maecenas libero. Etiam commodo dui eget wisi. Nullam at arcu a est sollicitudin euismod. Nullam rhoncus aliquam metus. Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim. Duis risus. Fusce suscipit libero eget elit. Integer malesuada. Aliquam erat volutpat. Maecenas libero. Nam quis nulla. Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim. Nunc tincidunt ante vitae massa. Sed convallis magna eu sem. Donec iaculis gravida nulla. Etiam commodo dui eget wisi. Integer in sapien. Nulla accumsan, elit sit amet varius semper, nulla mauris mollis quam, tempor suscipit diam nulla vel leo. Sed ac dolor sit amet purus malesuada congue. Vivamus luctus egestas leo. Etiam quis quam. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Nullam eget nisl. Mauris metus. Nulla turpis magna, cursus sit amet, suscipit a, interdum id, felis. Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim. Etiam commodo dui eget wisi. Aliquam id dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Mauris metus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis sapien nunc, commodo et, interdum suscipit, sollicitudin et, dolor. Maecenas libero. Etiam commodo dui eget wisi. Nullam at arcu a est sollicitudin euismod. Nullam rhoncus aliquam metus. Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim. Duis risus. Fusce suscipit libero eget elit. Integer malesuada. Aliquam erat volutpat. Maecenas libero. Nam quis nulla. Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim. Nunc tincidunt ante vitae massa. Sed convallis magna eu sem. Donec iaculis gravida nulla. Etiam commodo dui eget wisi. Integer in sapien. Nulla accumsan, elit sit amet varius semper, nulla mauris mollis quam, tempor suscipit diam nulla vel leo. Sed ac dolor sit amet purus malesuada congue. Vivamus luctus egestas leo. Etiam quis quam. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Nullam eget nisl. Mauris metus. Nulla turpis magna, cursus sit amet, suscipit a, interdum id, felis. Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim. Etiam commodo dui eget wisi. Aliquam id dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Mauris metus."
label.numberOfLines = 0
contentView.addSubview(label)
NSLayoutConstraint.activate([
    label.leadingAnchor.constraint(equalTo: contentView.leadingAnchor),
    label.trailingAnchor.constraint(equalTo: contentView.trailingAnchor),
    label.topAnchor.constraint(equalTo: contentView.topAnchor),
    label.bottomAnchor.constraint(equalTo: contentView.bottomAnchor)
])

IOS 11 新闻

最后在 IOS 11 中是新的布局指南，它解决了 UIScrollView 中的框架视图和内容视图的问题，正如我之前提到的。 这是

scrollView.frameLayoutGuide
scrollView.contentLayoutGuide

所以只有 ios 11 你可以避免 contentView 的良好做法并以这种方式进行（但通常我们需要对旧 ios 版本的向后支持）

1) 创建与之前相同的 UIScrollView，但在新布局指南的帮助下定义宽度

        let scrollView = UIScrollView()
        scrollView.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(scrollView)
        NSLayoutConstraint.activate([
            scrollView.frameLayoutGuide.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            scrollView.frameLayoutGuide.trailingAnchor.constraint(equalTo: view.trailingAnchor),
            scrollView.frameLayoutGuide.topAnchor.constraint(equalTo: view.topAnchor),
            scrollView.frameLayoutGuide.bottomAnchor.constraint(equalTo: view.bottomAnchor),
            scrollView.contentLayoutGuide.widthAnchor.constraint(equalTo: scrollView.frameLayoutGuide.widthAnchor)
        ])

2) 现在只需添加您想要的任何内容，但将自动布局附加到scrollView.contentLayoutGuide

    let label = UILabel()
    label.translatesAutoresizingMaskIntoConstraints = false
    label.text = "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis sapien nunc, commodo et, interdum suscipit, sollicitudin et, dolor. Maecenas libero. Etiam commodo dui eget wisi. Nullam at arcu a est sollicitudin euismod. Nullam rhoncus aliquam metus. Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim. Duis risus. Fusce suscipit libero eget elit. Integer malesuada. Aliquam erat volutpat. Maecenas libero. Nam quis nulla. Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim. Nunc tincidunt ante vitae massa. Sed convallis magna eu sem. Donec iaculis gravida nulla. Etiam commodo dui eget wisi. Integer in sapien. Nulla accumsan, elit sit amet varius semper, nulla mauris mollis quam, tempor suscipit diam nulla vel leo. Sed ac dolor sit amet purus malesuada congue. Vivamus luctus egestas leo. Etiam quis quam. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Nullam eget nisl. Mauris metus. Nulla turpis magna, cursus sit amet, suscipit a, interdum id, felis. Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim. Etiam commodo dui eget wisi. Aliquam id dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Mauris metus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis sapien nunc, commodo et, interdum suscipit, sollicitudin et, dolor. Maecenas libero. Etiam commodo dui eget wisi. Nullam at arcu a est sollicitudin euismod. Nullam rhoncus aliquam metus. Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim. Duis risus. Fusce suscipit libero eget elit. Integer malesuada. Aliquam erat volutpat. Maecenas libero. Nam quis nulla. Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim. Nunc tincidunt ante vitae massa. Sed convallis magna eu sem. Donec iaculis gravida nulla. Etiam commodo dui eget wisi. Integer in sapien. Nulla accumsan, elit sit amet varius semper, nulla mauris mollis quam, tempor suscipit diam nulla vel leo. Sed ac dolor sit amet purus malesuada congue. Vivamus luctus egestas leo. Etiam quis quam. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Nullam eget nisl. Mauris metus. Nulla turpis magna, cursus sit amet, suscipit a, interdum id, felis. Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim. Etiam commodo dui eget wisi. Aliquam id dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Mauris metus."
    label.numberOfLines = 0
    scrollView.addSubview(label)
    NSLayoutConstraint.activate([
        label.leadingAnchor.constraint(equalTo: scrollView.contentLayoutGuide.leadingAnchor),
        label.trailingAnchor.constraint(equalTo: scrollView.contentLayoutGuide.trailingAnchor),
        label.topAnchor.constraint(equalTo: scrollView.contentLayoutGuide.topAnchor),
        label.bottomAnchor.constraint(equalTo: scrollView.contentLayoutGuide.bottomAnchor)
    ])

就是这样。您可以将两种方式复制粘贴到您的 viewController viewDidLoad 方法中，它会起作用。