滾動視圖中的重疊元素

Question

試圖使用代碼創建的元素進行scrollView，但是我將這些元素重疊在一起。滾動查看本身在故事板中製作。這裏是我的代碼：

class ViewController: UIViewController { 
    @IBOutlet weak var scrollView: UIScrollView! { 
     didSet { 
      scrollView.backgroundColor = .yellow 
     } 
    } 

    lazy var im: UIImageView = { 
     let im = UIImageView(frame: CGRect(x: 10, y: 74, width: self.view.frame.size.width - 20, height: 200)) 
     im.backgroundColor = .white 
     return im 
    }() 

    lazy var label: UILabel = { 
     let l = UILabel(frame: CGRect(x: 10, y: 284, width: self.view.frame.size.width - 20, height: CGFloat.greatestFiniteMagnitude)) 
     l.numberOfLines = 0 
     l.lineBreakMode = .byWordWrapping 
     l.text = "crazy amount of text" 
     l.sizeToFit() 
     self.scrollView.contentSize = CGSize(width: self.view.frame.width, height: l.frame.height + 280) 
     return l 
    }() 


    override func viewDidLoad() { 
     super.viewDidLoad() 
     self.scrollView.addSubview(im) 
     self.scrollView.addSubview(label) 
    } 
} 

白色矩形是ImageView的！

如何防止重疊這些元素？

Answer 1

我找到了使用視覺格式語言的解決方案。下面我把全部工作無警告代碼：

class ViewController: UIViewController { 
    @IBOutlet weak var scrollView: UIScrollView! { 
     didSet { 
      scrollView.backgroundColor = .yellow 
     } 
    } 

    lazy var label: UILabel = { 
     let l = UILabel(frame: .zero) 
     l.numberOfLines = 0 
     l.lineBreakMode = .byWordWrapping 
     l.translatesAutoresizingMaskIntoConstraints = false 
     l.text = "REALLY HUGE TEXT" 
     l.sizeToFit() 
     return l 
    }() 

    lazy var im: UIImageView = { 
     let im = UIImageView(frame: .zero) 
     im.backgroundColor = .white 
     im.translatesAutoresizingMaskIntoConstraints = false 
     return im 
    }() 


    override func viewDidLoad() { 
     super.viewDidLoad() 
     self.scrollView.addSubview(im) 
     self.scrollView.addSubview(label) 
    } 

    override func viewDidLayoutSubviews() { 
     super.viewDidLayoutSubviews() 
     configureSizes() 
    } 

    fileprivate func configureSizes() { 
     let metrics = ["elementWidth" : self.view.frame.size.width - 20, "imageHeight" : 220] 

     scrollView.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:|-10-[v1(imageHeight)]-10-[v2]-10-|", options: [], metrics: metrics, views: ["v1" : im, "v2" : label])) 
     scrollView.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:|-10-[v1(elementWidth)]-10-|", options: [], metrics: metrics, views: ["v1" : im])) 
     scrollView.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:|-10-[v2(elementWidth)]-10-|", options: [], metrics: metrics, views: ["v2" : label])) 
    } 
} 

在這裏你會看到在頂部空白矩形 - 的ImageView和ImageView的你會發現，如果它是需要的，綿延滾動視圖的內容大小多標籤後。

希望有人會發現這有幫助，並節省您的時間:)

Answer 2

你可以偷懶可變IM的代碼更改

lazy var im: UIImageView = { 
     let im = UIImageView(frame: CGRect(x: 10, y: self.label.frame.height, width: self.view.frame.size.width - 20, height: 200)) 
     im.backgroundColor = .white 
     return im 
}() 

對於圖像是在頂部，你可以以後L個上路l.frame.y = self.im.frame.height .sizeToFit（）

lazy var label: UILabel = { 
     let l = UILabel(frame: CGRect(x: 10, y: 200, width: self.view.frame.size.width - 20, height: CGFloat.greatestFiniteMagnitude)) 
     l.numberOfLines = 0 
     l.lineBreakMode = .byWordWrapping 
     l.text = "Big Text" 
     l.sizeToFit() 
     l.frame.y = self.im.frame.height 
     self.scrollView.contentSize = CGSize(width: self.view.frame.width, height: l.frame.height + 280) 
     return l 
    }() 

這會給你想要的結果。 希望它有幫助！