以编程方式布局 UIScrollView,并为其子视图添加了自动布局,但它不滚动

Posted

技术标签:

【中文标题】以编程方式布局 UIScrollView,并为其子视图添加了自动布局,但它不滚动【英文标题】:Programmatically layed out UIScrollView, and added auto layout to it's subviews, but it does not scroll 【发布时间】:2017-10-05 19:39:56 【问题描述】:

我试图弄清楚 UIScrollView 是如何工作的,并使用不同的 backgroundColor 属性向它添加了一些子视图。我使用 ios9 自动布局布局了子视图,但即使视图在屏幕之外,UIScrollView 仍然不会滚动。

import UIKit

class ViewController: UIViewController 

    let scrollView: UIScrollView = 
        let sv = UIScrollView()
        sv.translatesAutoresizingMaskIntoConstraints = false
        sv.backgroundColor = .gray
        return sv
    ()

    override func viewDidLoad() 
        super.viewDidLoad()

        view.addSubview(scrollView)

        scrollView.leftAnchor.constraint(equalTo: view.leftAnchor).isActive = true
        scrollView.rightAnchor.constraint(equalTo: view.rightAnchor).isActive = true
        scrollView.topAnchor.constraint(equalTo: view.topAnchor).isActive = true
        scrollView.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true

        let view1 = UIView()
        view1.backgroundColor = .red

        let view2 = UIView()
        view2.backgroundColor = .blue

        let view3 = UIView()
        view3.backgroundColor = .green

        let view4 = UIView()
        view4.backgroundColor = .purple

        let views = [view1, view2, view3, view4]

        for view in views 
            scrollView.addSubview(view)
            view.translatesAutoresizingMaskIntoConstraints = false
        

        view1.topAnchor.constraint(equalTo: scrollView.topAnchor).isActive = true
        view1.leftAnchor.constraint(equalTo: scrollView.leftAnchor).isActive = true
        view1.heightAnchor.constraint(equalToConstant: 140).isActive = true
        view1.widthAnchor.constraint(equalToConstant: 140).isActive = true

        view2.topAnchor.constraint(equalTo: view1.bottomAnchor, constant: 100).isActive = true
        view2.leftAnchor.constraint(equalTo: view1.rightAnchor).isActive = true
        view2.heightAnchor.constraint(equalToConstant: 140).isActive = true
        view2.widthAnchor.constraint(equalToConstant: 140).isActive = true

        view3.topAnchor.constraint(equalTo: view2.bottomAnchor, constant: 50).isActive = true
        view3.leftAnchor.constraint(equalTo: view1.rightAnchor).isActive = true
        view3.heightAnchor.constraint(equalToConstant: 140).isActive = true
        view3.widthAnchor.constraint(equalToConstant: 140).isActive = true

        view4.topAnchor.constraint(equalTo: view3.bottomAnchor, constant: 20).isActive = true
        view4.leftAnchor.constraint(equalTo: view1.rightAnchor).isActive = true
        view4.heightAnchor.constraint(equalToConstant: 140).isActive = true
        view4.widthAnchor.constraint(equalToConstant: 140).isActive = true
    


【问题讨论】:

【参考方案1】:

在 UIScrollViews 中使用 Autolayout 时,您必须将子视图固定到滚动视图的顶部和底部,以便滚动视图计算其 contentSize。

添加这一行修复它:

view4.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor, constant: 0).isActive = true

【讨论】:

以上是关于以编程方式布局 UIScrollView,并为其子视图添加了自动布局,但它不滚动的主要内容,如果未能解决你的问题,请参考以下文章

以编程方式使用自动布局分页 UIScrollView?

UIScrollView 不使用自动布局滚动(内容视图框架大小以编程方式更改)

WKWebview & UIImageView 在 UIScrollView 内以编程方式自动布局 Objective-C

UIView(放置在滚动视图内)在以编程方式更改高度常量时不显示其子视图

如何以编程方式使用自动布局添加自定义视图

UIScrollView 不滚动 w/ 编程自动布局约束