SnapKit pour Swift : guide complet avec exemples

Formateur Python en ligne pour débutants

Apprenez Python facilement sans surcharge théorique. Résolvez des tâches pratiques avec vérification automatique et écrivez du code directement dans le navigateur.

Start Course

Qu'est-ce que SnapKit et pourquoi en a-t-on besoin ?

\n\n

SnapKit est une puissante et élégante bibliothèque DSL (Domain-Specific Language) pour travailler avec Auto Layout dans les applications iOS, macOS, tvOS et watchOS écrites en Swift. Si vous avez déjà écrit des contraintes manuellement en utilisant l'API standard d'Apple, vous savez à quel point cela peut être verbeux et difficile à lire. SnapKit résout ce problème en fournissant une syntaxe propre et intuitive qui rend le code de mise en page semblable à un langage anglais courant.

\n\n

Pourquoi SnapKit est-il nécessaire ?

\n
    \n
  • Lisibilité du code : Au lieu de longues chaînes d'appels NSLayoutConstraint(item:attribute:relatedBy:toItem:attribute:multiplier:constant:), vous écrivez view.snp.makeConstraints { $0.center.equalToSuperview() }.
  • \n
  • Vitesse de développement : La mise en page devient plus rapide car le code est plus court et plus facile à comprendre.
  • \n
  • Sécurité des types : SnapKit utilise le typage strict de Swift, ce qui réduit le risque d'erreurs d'exécution.
  • \n
  • Flexibilité : Toutes les fonctionnalités d'Auto Layout sont prises en charge : priorités, ratios, mise à jour et redéfinition des contraintes.
  • \n
  • Communauté active : La bibliothèque est largement utilisée dans l'industrie, dispose d'une excellente documentation et d'un grand nombre d'exemples.
  • \n
\n\n

Installation de SnapKit

\n\n

SnapKit peut être installé à l'aide de l'un des gestionnaires de dépendances populaires pour Swift. Vous trouverez ci-dessous les instructions pour Swift Package Manager (SPM) et CocoaPods.

\n\n

1. Swift Package Manager (méthode recommandée)

\n

SPM est le gestionnaire de paquets intégré à Xcode. C'est la méthode la plus simple et la plus moderne.

\n
    \n
  1. Dans Xcode, ouvrez votre projet.
  2. \n
  3. Allez dans File → Add Packages...
  4. \n
  5. Dans le champ de recherche, saisissez l'URL du dépôt SnapKit : https://github.com/SnapKit/SnapKit.git
  6. \n
  7. Sélectionnez la version souhaitée (la dernière version stable est recommandée) et cliquez sur Add Package.
  8. \n
  9. Assurez-vous que le paquet est ajouté à votre cible (target).
  10. \n
\n\n

2. CocoaPods

\n

Si vous utilisez CocoaPods, ajoutez la ligne suivante à votre Podfile :

\n
platform :ios, '12.0'\nuse_frameworks!\n\ntarget 'YourAppTarget' do\n  pod 'SnapKit', '~> 5.6.0'\nend
\n

Exécutez ensuite la commande pod install dans le terminal dans le dossier de votre projet.

\n\n

3. Carthage (moins populaire)

\n

Ajoutez au Cartfile :

\n
github "SnapKit/SnapKit" ~> 5.6.0
\n

Exécutez carthage update et ajoutez le framework à votre projet.

\n\n

Démarrage rapide avec un exemple de code

\n\n

Créons un écran simple avec un carré rouge centré à l'écran. C'est le "Hello, World!" classique de la mise en page.

\n\n
import UIKit\nimport SnapKit\n\nclass ViewController: UIViewController {\n\n    override func viewDidLoad() {\n        super.viewDidLoad()\n        setupUI()\n    }\n\n    private func setupUI() {\n        // 1. Créer la vue\n        let redView = UIView()\n        redView.backgroundColor = .red\n        view.addSubview(redView)\n\n        // 2. Appliquer SnapKit pour la mise en page\n        redView.snp.makeConstraints { make in\n            make.center.equalToSuperview() // Centrer par rapport au parent\n            make.width.height.equalTo(100) // Largeur et hauteur = 100\n        }\n    }\n}
\n\n

Que se passe-t-il ici ?

\n
    \n
  • redView.snp.makeConstraints est le point d'entrée dans le DSL de SnapKit. snp est une propriété spéciale que SnapKit ajoute à toutes les UIView.
  • \n
  • À l'intérieur de la fermeture, nous obtenons l'objet make (ConstraintMaker), avec lequel nous décrivons les contraintes.
  • \n
  • make.center.equalToSuperview() centre la vue rouge par rapport à son parent.
  • \n
  • make.width.height.equalTo(100) définit la largeur et la hauteur à 100 points.
  • \n

Recommendations