iOS
Mise en forme automatique UIScrollView

ScrollableController

Lorsque vous utilisez Autolayout avec un UIScrollView , il ne redimensionne PAS correctement en fonction de la taille de son contenu ou de ses sous-vues.

Pour qu'un UIScrollView défile automatiquement lorsque son contenu devient trop volumineux pour tenir dans la zone visible, nous devons ajouter un ContentView et des contraintes permettant à UIScrollView de déterminer la taille de son contenu ET sa largeur et sa hauteur dans son parent. vue.

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

Maintenant, nous pouvons voir que le greenView (400 hauteurs) + le whiteView (500 hauteurs) est plus grand que notre écran. Cela fera croître le contentSize de ScrollView pour qu'il s'adapte aux deux vues, ce qui lui permettra de défiler verticalement.

Nous avons désactivé le défilement horizontal en utilisant la contrainte EqualWidth sur contentView et self.view

Taille du contenu dynamique UIScrollView via Storyboard

Lors de l'utilisation de scrollviews dans le storyboard, il est préférable de calculer la taille du contenu en fonction du nombre de vues présentes dans scrollview, plutôt que de donner une taille de contenu par programme avec une valeur statique.

Voici les étapes pour obtenir dynamiquement la taille du contenu.

Étape 1 :

Ajouter une vue de défilement pour afficher dans le storyboard et ajouter des contraintes de début, de fin, de haut et de bas (toutes les valeurs sont égales à zéro).

Étape 2 :

N'ajoutez pas directement les vues dont vous avez besoin directement sur scrollview, ajoutez d'abord une vue à scrollview (qui sera notre affichage de contenu pour tous les éléments d'interface utilisateur). Ajoutez ci-dessous des contraintes à cette vue.

1. Contraintes de début, de fin, de haut et de bas (toutes les valeurs sont nulles).

2. Ajoutez la même hauteur, la même largeur à la vue principale (c.-à-d. Qui contient la défilement). Pour une hauteur égale, définissez la priorité sur faible. (C'est l'étape importante pour définir la taille du contenu).

3. La hauteur de cette vue de contenu sera fonction du nombre de vues ajoutées à la vue. Si vous avez ajouté la dernière vue à une étiquette et que sa position Y est 420 et que la hauteur est 20, votre vue du contenu sera 440.

Étape 3: ajoutez des contraintes à toutes les vues que vous avez ajoutées dans la vue du contenu, conformément à vos exigences.