iOS
UIScrollView AutoLayout

ScrollableController

Podczas korzystania z funkcji autolayout z UIScrollView NIE zmienia ona odpowiednio rozmiaru w zależności od wielkości jej zawartości lub widoków podrzędnych.

Aby UIScrollView automatycznie przewijał się, gdy jego zawartość staje się zbyt duża, aby zmieścić się w widocznym obszarze, musimy dodać ContentView i niektóre ograniczenia, które pozwalają UIScrollView na określenie rozmiaru zawartości ORAZ jego szerokości i wysokości w obiekcie nadrzędnym widok.

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

Teraz widzimy, że greenView (wysokość 400) + whiteView (wysokość 500) jest większy niż nasz ekran. Spowoduje to, że contentSize ScrollView powiększy się, aby pasować do OBU widoków, umożliwiając przewijanie w pionie.

EqualWidth przewijanie w poziomie za pomocą ograniczenia EqualWidth na contentView i self.view

UIScrollView dynamiczny rozmiar zawartości poprzez Storyboard

Podczas korzystania z widoków przewijania w serii ujęć lepiej jest obliczyć rozmiar zawartości zgodnie z liczbą widoków obecnych w widoku przewijania, niż programowo nadać rozmiar zawartości wartością statyczną.

Oto kroki, aby dynamicznie uzyskać rozmiar treści.

Krok 1 :

Dodaj widok przewijania, aby wyświetlić w serii ujęć i dodaj ograniczenia wiodące, końcowe, górne i dolne (wszystkie wartości są zerowe).

Krok 2 :

Nie dodawaj widoków, których potrzebujesz bezpośrednio w widoku przewijania, Najpierw dodaj jeden widok do widoku przewijania (będzie to nasz widok zawartości dla wszystkich elementów interfejsu użytkownika). Dodaj poniższe ograniczenia do tego widoku.

1. Wiodące, końcowe, górne i dolne ograniczenia (wszystkie wartości są zerowe).

2. Dodaj równą wysokość, równą szerokość do widoku głównego (tzn. Który zawiera widok przewijania). Dla równej wysokości ustaw priorytet na niski. (Jest to ważny krok do ustawienia rozmiaru zawartości).

3. Wysokość tego widoku zawartości będzie zgodna z liczbą wyświetleń dodanych do widoku. powiedzmy, że jeśli dodałeś ostatni widok to jedna etykieta, a jego pozycja Y wynosi 420, a wysokość to 20, wówczas twój widok zawartości będzie miał 440.

Krok 3: Dodaj ograniczenia do wszystkich widoków dodanych w widoku zawartości zgodnie z wymaganiami.