iOS
UIScrollView AutoLayout

ScrollableController

Bij gebruik van Autolayout met een UIScrollView wordt de grootte NIET correct aangepast, afhankelijk van de grootte van de inhoud of subviews.

Om een UIScrollView automatisch te laten scrollen wanneer de inhoud te groot wordt om in het zichtbare gebied te passen, moeten we een ContentView en enkele beperkingen toevoegen waarmee de UIScrollView de grootte van de inhoud EN de breedte en hoogte in het bovenliggende ContentView kan bepalen visie.

import Foundation
import UIKit

class ScrollableController : UIViewController {
    
    private var scrollView: UIScrollView!
    private var contentView: UIView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        //Setup
        self.initControls()
        self.setTheme()
        self.layoutScrollView()
        self.layoutContentView()
        
        //Add child views
        self.addChildViews()
    }
    
    func initControls() {
        self.scrollView = UIScrollView()
        self.contentView = UIView()
    }
    
    func setTheme() {
        self.scrollView.backgroundColor = UIColor.blue()
        self.contentView.backgroundColor = UIColor.orange()
    }
    
    func layoutScrollView() {
        self.view.addSubview(self.scrollView)
        
        let views: NSDictionary = ["scrollView": self.scrollView]
        var constraints = Array<String>()
        
        //Constrain the scrollView to our controller's self.view.
        constraints.append("H:|-0-[scrollView]-0-|")
        constraints.append("V:|-0-[scrollView]-0-|")
        
        for constraint in constraints {
            self.view.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: constraint, options: NSLayoutFormatOptions(rawValue: 0), metrics: nil, views: views as! [String : AnyObject]))
        }
        
        self.scrollView.translatesAutoresizingMaskIntoConstraints = false
    }
    
    func layoutContentView() {
        self.scrollView.addSubview(self.contentView)
        
        let views: NSDictionary = ["contentView": self.contentView, "view": self.view]
        var constraints = Array<String>()
        
        //Constrain the contentView to the scrollView.
        constraints.append("H:|-0-[contentView]-0-|")
        constraints.append("V:|-0-[contentView]-0-|")
        
        for constraint in constraints {
            self.scrollView.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: constraint, options: NSLayoutFormatOptions(rawValue: 0), metrics: nil, views: views as! [String : AnyObject]))
        }
        
        //Disable Horizontal Scrolling by making the contentView EqualWidth with our controller's self.view (ScrollView's parentView).
        self.view.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:[contentView(==view)]", options: NSLayoutFormatOptions(rawValue: 0), metrics: nil, views: views as! [String : AnyObject]))
        
        self.contentView.translatesAutoresizingMaskIntoConstraints = false
    }
    
    func addChildViews() {
        //Init
        let greenView = UIView()
        let whiteView = UIView()
        
        //Theme
        greenView.backgroundColor = UIColor.green()
        whiteView.backgroundColor = UIColor.orange()
        
        //Layout -- Child views are added to the 'ContentView'
        self.contentView.addSubview(greenView)
        self.contentView.addSubview(whiteView)
        
        let views: NSDictionary = ["greenView": greenView, "whiteView": whiteView];
        var constraints = Array<String>()
        
        //Constrain the greenView to the contentView with a height of 400 and 15 spacing all around.
        constraints.append("H:|-15-[greenView]-15-|")
        constraints.append("V:|-15-[greenView(400)]")
        
        //Constrain the whiteView below the greenView with 15 spacing all around and a height of 500.
        constraints.append("H:|-15-[whiteView]-15-|")
        constraints.append("V:[greenView]-15-[whiteView(500)]-15-|")
        
        for constraint in constraints {
            self.contentView.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: constraint, options: NSLayoutFormatOptions(rawValue: 0), metrics: nil, views: views as! [String : AnyObject]))
        }
        
        greenView.translatesAutoresizingMaskIntoConstraints = false
        whiteView.translatesAutoresizingMaskIntoConstraints = false
    }
}

Nu kunnen we zien dat de greenView (400 hoogte) + de whiteView (500 hoogte) groter is dan ons scherm. Hierdoor groeit de contentSize van de ScrollView zodat deze AAN BEIDE weergaven past, waardoor deze verticaal kan scrollen.

We hebben horizontaal scrollen uitgeschakeld met de beperking EqualWidth voor contentView en self.view

UIScrollBekijk dynamische inhoudsgrootte via Storyboard

Bij het gebruik van scrollviews in storyboard is het beter om de inhoudsgrootte te berekenen op basis van het aantal weergaven dat aanwezig is in scrollview in plaats van inhoud inhoud programmatisch met statische waarde te geven.

Hier zijn de stappen om de inhoud dynamisch te krijgen.

Stap 1 :

Voeg Scrollview toe om in het storyboard te bekijken en voeg beperkingen voor, achter, boven en onder toe (Alle waarden zijn nul).

Stap 2 :

Voeg geen direct views toe die je nodig hebt in direct scrollview, voeg eerst één view toe aan scrollview (dat is onze contentview voor alle UI-elementen). Voeg onderstaande beperkingen toe aan deze weergave.

1. Voorloop-, volg-, boven- en onderbeperkingen (alle waarden zijn nul).

2. Voeg gelijke hoogte, gelijke breedte toe aan Hoofdweergave (dwz met scrollweergave). Voor gelijke hoogte prioriteit instellen op laag. (Dit is de belangrijke stap voor het instellen van de inhoudsgrootte).

3. De hoogte van deze inhoudsweergave is afhankelijk van het aantal weergaven dat aan de weergave is toegevoegd. laten we zeggen dat als je de laatste weergave één label hebt toegevoegd en zijn Y-positie 420 en de hoogte 20 is, je inhoudsweergave 440 is.

Stap 3: voeg beperkingen toe aan alle weergaven die u volgens uw vereiste hebt toegevoegd in de inhoudsweergave.