Überlappende Elemente in der Bildlaufansicht

Question

Der Versuch, scrollView mit Elementen zu erstellen, die im Code erstellt wurden, aber ich habe diese Elemente aufeinander überlagert. Scrollview selbst im Storyboard erstellt. Hier ist mein 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) 
    } 
} 

Weiß Rechteck ist Imageview!

Wie verhindert man die Überlappung dieser Elemente?

Answer 1

Ich fand Lösung mit Visual Formatting Language. Hier setze ich voll funktionsfähiges nicht-Warncode:

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])) 
    } 
} 

Hier finden Sie leere weiße Rechteck auf der Oberseite sehen - und Imageview nach Image Sie mehrzeilige Label finden, die Inhaltsgröße von Scroll-Ansicht erstreckt, wenn es gebraucht wird.

Hoffe jemand wird dies hilfreich finden und speichern Sie Stunden :)

Answer 2

Sie können zu

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 
}() 

Für Bild, um den Code von faulen Variable im ändern oben sein Sie l.frame.y = self.im.frame.height nach l hinzufügen (.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 
    }() 

Dies wird Ihnen das gewünschte Ergebnis. Hoffe es hilft!