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

Posted

技术标签:

【中文标题】如何在swift4中动态添加滚动视图【英文标题】:How to add scrollview dynamically in swift4 【发布时间】:2018-04-24 06:42:21 【问题描述】:

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

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

【问题讨论】:

句号后面总是跟一个大写字母。 向我们展示您的代码 @lakshmisravyaGajavalli,这是在您创建任何新的ViewController 时预定义的基本方法,上传您尝试过的代码。 @lakshmisravyaGajavalli 请单击问题下方的编辑以将代码添加到问题中。所有其他信息都应编辑到问题中,而不是作为评论添加。请。另请阅读How to Ask 【参考方案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 方法中,它会起作用。

【讨论】:

以上是关于如何在swift4中动态添加滚动视图的主要内容,如果未能解决你的问题,请参考以下文章

如何动态地将许多具有不同名称的标签添加到滚动视图中

将文本字段动态添加到表格视图单元格并水平滚动

滚动到顶部时在表格视图的开头动态添加行

如何在 iOS 中将 UIView 添加到 UIScrollView 中(具有动态内容的视图)

添加cardview动态滚动视图,不显示

滚动视图只显示最后一个动态添加的子视图