iOS
UIScrollView AutoLayout

ScrollableController

Wenn Sie Autolayout mit einer UIScrollView , wird die Größe je nach Größe des Inhalts oder der Unteransichten NICHT korrekt angepasst.

Damit ein UIScrollView automatisch scrollen kann, wenn sein Inhalt zu groß wird, um in den sichtbaren Bereich zu passen, müssen ein ContentView und einige Einschränkungen UIScrollView , die es dem UIScrollView ermöglichen, die Größe des Inhalts UND dessen Breite und Höhe im übergeordneten UIScrollView zu bestimmen Aussicht.

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

Jetzt können wir sehen, dass das greenView (Höhe 400) + das WhiteView (Höhe 500) größer ist als unser Bildschirm. Dadurch wird die contentSize von ScrollView auf BEIDE Ansichten angepasst, sodass sie vertikal scrollen kann.

Wir haben den horizontalen Bildlauf mithilfe der EqualWidth Einschränkung für contentView und self.view

UIScrollView dynamische Inhaltsgröße über das Storyboard

Bei der Verwendung von Bildlaufansichten im Storyboard ist es besser, die Inhaltsgröße anhand der Anzahl der in der Bildlaufansicht vorhandenen Ansichten zu berechnen, als die Größe des Inhalts mit einem statischen Wert anzugeben.

Hier sind die Schritte, um die Inhaltsgröße dynamisch zu erhalten.

Schritt 1 :

Fügen Sie die Bildlaufansicht hinzu, um sie im Storyboard anzuzeigen, und fügen Sie führende, nachlaufende, obere und untere Einschränkungen hinzu (Alle Werte sind Null).

Schritt 2 :

Fügen Sie keine direkten Ansichten hinzu, die Sie für die direkte Bildansicht benötigen. Fügen Sie zunächst eine Ansicht zur Bildlaufansicht hinzu (dies ist unsere Inhaltsansicht für alle Elemente der Benutzeroberfläche). Fügen Sie der Ansicht unten Einschränkungen hinzu.

1. Führende, nachlaufende, obere und untere Randbedingungen (Alle Werte sind Null).

2. Fügen Sie der Hauptansicht die gleiche Höhe und die gleiche Breite hinzu (dh, die die Bildlaufansicht enthält). Für gleiche Höhe die Priorität auf niedrig setzen. (Dies ist der wichtige Schritt zum Einstellen der Inhaltsgröße).

3. Die Höhe dieser Inhaltsansicht richtet sich nach der Anzahl der Ansichten, die der Ansicht hinzugefügt wurden. Angenommen, Sie haben die letzte Ansicht hinzugefügt, ist eine Beschriftung und seine Y-Position ist 420 und die Höhe ist 20, dann beträgt Ihre Inhaltsansicht 440.

Schritt 3: Fügen Sie Einschränkungen für alle Ansichten hinzu, die Sie je nach Anforderung in der Inhaltsansicht hinzugefügt haben.