Overlapping elements in scroll view - ios

Question

Trying to make scrollView with elements created in code but i got overlapping this elements on each other. Scrollview itself made in storyboard. Here is my code:
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)
}
}
White rectangle is imageView!
How to prevent overlapping these elements?

Answer 1

You can change the code of lazy variable im to
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
}()
For image to be on top you can add l.frame.y = self.im.frame.height after l.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
}()
This will give you the desired result.
Hope it helps!

Answer 2

I found solution using Visual Formatting Language. Here I put fully working no-warning code:
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]))
}
}
Here you will see blank white rectangle on the top - imageView and after imageView you will find multiline label that stretches content size of scroll view if it is needed.
Hope somebody will find this helpful and save you hours :)