iOS
AutoLayout di UIScrollView

ScrollableController

Quando si utilizza l'Autolayout con un UIScrollView , NON viene ridimensionato in modo appropriato a seconda delle dimensioni del suo contenuto o delle sue sottoview.

Al fine di ottenere un UIScrollView per scorrere automaticamente quando le informazioni diventano troppo grande per entrare nella zona visibile, abbiamo bisogno di aggiungere un ContentView e alcuni vincoli che consentono al UIScrollView di determinare le dimensioni del suo contenuto e la sua larghezza e altezza in suo genitore vista.

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

Ora possiamo vedere che greenView (400 altezza) + whiteView (altezza 500) è più grande del nostro schermo. Ciò farà sì che il contenuto di ScrollViewSize cresca per adattarsi a ENTRAMBI le viste, permettendogli di scorrere verticalmente.

Abbiamo disabilitato lo scorrimento orizzontale usando il vincolo di EqualWidth su contentView e self.view

Dimensione del contenuto dinamico di UIScrollView tramite Storyboard

Mentre si utilizzano le visualizzazioni di scorrimento nello storyboard, è meglio calcolare la dimensione del contenuto in base al numero di visualizzazioni presenti nella vista a scorrimento piuttosto che impostare la dimensione del contenuto in modo programmatico con un valore statico.

Ecco i passaggi per ottenere la dimensione del contenuto in modo dinamico.

Passo 1 :

Aggiungi Scrollview per visualizzare nello storyboard e aggiungere vincoli iniziali, finali, superiori e inferiori (tutti i valori sono zero).

Passo 2 :

Non aggiungere direttamente le viste di cui hai bisogno direttamente sulla scrollview, prima aggiungi una vista a scrollview (che sarà la nostra vista del contenuto per tutti gli elementi dell'interfaccia utente). Aggiungi sotto i vincoli a questa vista.

1. Vincoli iniziali, finali, superiori e inferiori (tutti i valori sono zero).

2. Aggiungi uguale altezza, larghezza uguale alla vista principale (cioè che contiene scrollview). Per uguale altezza impostare la priorità su bassa. (Questo è il passo importante per l'impostazione della dimensione del contenuto).

3. L'altezza di questa vista del contenuto sarà in base al numero di visualizzazioni aggiunte alla vista. diciamo che se hai aggiunto l'ultima visualizzazione è un'etichetta e la sua posizione Y è 420 e l'altezza è 20, quindi la visualizzazione del contenuto sarà 440.

Passaggio 3: aggiungere i vincoli a tutte le viste aggiunte nella visualizzazione del contenuto in base alle proprie esigenze.