动态滚动视图 contentSize autoLayoutConstraints swift

Posted 2023-03-16

【中文标题】动态滚动视图 contentSize autoLayoutConstraints swift

【英文标题】：Dynamic scrollView contentSize autoLayoutConstraints swift

【发布时间】：2018-04-20 23:22:37

【问题描述】：

我创建了一个滚动视图并在其中添加了一个包含所有页面元素的 contentView。我的问题是我希望我的containerScrollView.contentSize 根据contentView 中子视图的高度进行更改，以便它可以向下滚动。问题是我不确定如何使用约束来做到这一点。任何帮助表示赞赏

谢谢。

 var containerScrollView: UIScrollView = 
     let scrollView = UIScrollView()
     scrollView.backgroundColor = .green
     return scrollView
 ()

 var contentView: UIView = 
    let view = UIView()
    return view
 ()

 let galleryView: GalleryView = 
     let view = GalleryView()
     view.backgroundColor = .clear
     view.scrollRate = 4.5
     view.layer.cornerRadius = 4
     view.layer.masksToBounds = true
     return view
  ()

 override func viewDidLoad() 
     super.viewDidLoad()

     view.addSubview(containerScrollView)
     containerScrollView.anchor(top: view.safeAreaLayoutGuide.topAnchor, left: view.leftAnchor, bottom: view.bottomAnchor, right: view.rightAnchor, leftConstant: 10, rightConstant: 10)

    containerScrollView.layoutIfNeeded()
    containerScrollView.addSubview(contentView)

    contentView.frame.origin = CGPoint.zero
    contentView.frame.size = containerScrollView.frame.size        

    // ADDING SUBVIEWS TO CONTENTVIEW

    contentView.addSubview(galleryView)
    galleryView.anchor(top: headerView.bottomAnchor, left: containerScrollView.leftAnchor, right: containerScrollView.rightAnchor, topConstant: 18, heightConstant: view.frame.width / 1.5)
 

【参考方案1】：

在这里查看完整示例

class ViewController: UIViewController 


    var containerScrollView: UIScrollView = 
        let scrollView = UIScrollView()
        scrollView.translatesAutoresizingMaskIntoConstraints  = false
        scrollView.backgroundColor = .green
        return scrollView
    ()

    var contentView: UIView = 
        let view = UIView()
        view.translatesAutoresizingMaskIntoConstraints  = false
        view.backgroundColor = UIColor.red
        return view
    ()

    let galleryView1: UIView  = 
        let view = UIView()
        view.translatesAutoresizingMaskIntoConstraints  = false
        view.layer.cornerRadius = 4
        view.layer.masksToBounds = true
        view.backgroundColor = UIColor.orange

        return view
    ()


    let galleryView2: UIView  = 
        let view = UIView()
        view.translatesAutoresizingMaskIntoConstraints  = false
        view.layer.cornerRadius = 4
        view.layer.masksToBounds = true
        view.backgroundColor = UIColor.yellow

        return view
    ()

    let galleryView3: UIView  = 
        let view = UIView()
        view.translatesAutoresizingMaskIntoConstraints  = false
        view.layer.cornerRadius = 4
        view.layer.masksToBounds = true
        view.backgroundColor = UIColor.blue

        return view
    ()



    override func viewDidLoad() 
        super.viewDidLoad()

        view.addSubview(containerScrollView)
        containerScrollView.addSubview(contentView)
        contentView.addSubview(galleryView1)
        contentView.addSubview(galleryView2)
        contentView.addSubview(galleryView3)

        // add scrollView constraints

        containerScrollView.topAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.topAnchor, constant: 0).isActive = true

        containerScrollView.leadingAnchor.constraint(equalTo: self.view.leadingAnchor, constant: 0)
        .isActive = true
        containerScrollView.trailingAnchor.constraint(equalTo:self.view.trailingAnchor, constant: 0).isActive = true

        containerScrollView.bottomAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.bottomAnchor, constant: 0).isActive = true


        // add contentView constraints


        contentView.topAnchor.constraint(equalTo: self.containerScrollView.topAnchor, constant: 0).isActive = true

        contentView.leadingAnchor.constraint(equalTo: self.containerScrollView.leadingAnchor, constant: 0).isActive = true

        contentView.trailingAnchor.constraint(equalTo:self.containerScrollView.trailingAnchor, constant: 0).isActive = true

        contentView.bottomAnchor.constraint(equalTo: self.containerScrollView.bottomAnchor, constant: 0).isActive = true


        contentView.widthAnchor.constraint(equalTo:self.view.widthAnchor, constant: 0).isActive = true


        // add galleryView1 constraints


        galleryView1.topAnchor.constraint(equalTo: self.contentView.topAnchor, constant: 0).isActive = true

        galleryView1.leadingAnchor.constraint(equalTo: self.contentView.leadingAnchor, constant: 0).isActive = true

        galleryView1.trailingAnchor.constraint(equalTo:self.contentView.trailingAnchor, constant: 0).isActive = true


        galleryView1.heightAnchor.constraint(equalToConstant: 300).isActive = true


        // add galleryView2 constraints


        galleryView2.topAnchor.constraint(equalTo: self.galleryView1.bottomAnchor, constant: 30).isActive = true

        galleryView2.leadingAnchor.constraint(equalTo: self.contentView.leadingAnchor, constant: 0).isActive = true

        galleryView2.trailingAnchor.constraint(equalTo:self.contentView.trailingAnchor, constant: 0).isActive = true

        galleryView2.heightAnchor.constraint(equalToConstant: 500).isActive = true

      // add galleryView3 constraints


        galleryView3.topAnchor.constraint(equalTo: self.galleryView2.bottomAnchor, constant: 30).isActive = true

        galleryView3.leadingAnchor.constraint(equalTo: self.contentView.leadingAnchor, constant: 0).isActive = true

        galleryView3.trailingAnchor.constraint(equalTo:self.contentView.trailingAnchor, constant: 0).isActive = true

        galleryView3.heightAnchor.constraint(equalToConstant: 500).isActive = true

        galleryView3.bottomAnchor.constraint(equalTo: self.contentView.bottomAnchor, constant: -30).isActive = true


    

【讨论】：

这很好用，但是当 contentView 中的视图超出屏幕边界时，滚动视图不会向下滚动

这是一个很好的答案！你有什么想法可以在循环中使用它来确定你想要多少个“画廊”而不是硬编码它？比如：x=10，创建10个画廊不用硬编码吗？如果那个 x = ?有多少人会创建那么多画廊？

不工作！ contentView 没有显示这些约束。我正在使用相同的。