iOS
UIViews personnalisées à partir de fichiers XIB

Remarques

Éléments de câblage

Créer un fichier XIB

Barre de menus Xcode> Fichier> Nouveau> Fichier.
Sélectionnez iOS, Interface utilisateur puis "Afficher":

Donnez un nom à votre XIB (oui, nous faisons un exemple Pokemon 👾).
N'oubliez pas de vérifier votre cible et appuyez sur "Créer".

Concevez votre vue

Pour faciliter les choses, définissez:

• Taille: Freeform
• Barre d'état: aucune
• Barre supérieure: aucune
• Barre inférieure: aucune

Cliquez sur l'inspecteur de taille et redimensionnez la vue.
Pour cet exemple, nous utiliserons la largeur 321 et la hauteur 256.

Déposez des éléments dans votre fichier XIB comme indiqué ci-dessous.
Ici, nous allons ajouter une vue d'image (256x256) et un commutateur .

Ajoutez des contraintes de mise en page automatique en cliquant sur "Résoudre les problèmes de mise en page automatique" (en bas à droite) et en sélectionnant "Ajouter des contraintes manquantes" sous "Toutes les vues".

Prévisualisez les modifications que vous avez apportées en cliquant sur "Afficher l'éditeur assistant" (en haut à droite), puis sur "Aperçu".
Vous pouvez ajouter des écrans iPhone en cliquant sur le bouton "Plus".
L'aperçu devrait ressembler à ceci:

Sous-classe UIView

Créez la classe qui va gérer le fichier XIB.
Barre de menus Xcode> Fichier> Nouveau> Fichier.
Sélectionnez iOS / Source / Cocoa Touch Class. Hit "Suivant".

Donnez un nom à la classe, qui doit porter le même nom que le fichier XIB (Pokemon).
Sélectionnez UIView comme type de sous-classe, puis cliquez sur "Suivant".

Dans la fenêtre suivante, sélectionnez votre cible et appuyez sur "Créer".

Connectez Pokemon.xib à Pokemon.swift via l'attribut "File's Owner"

Cliquez sur le fichier Pokemon.xib dans Xcode.
Cliquez sur le "Propriétaire du fichier".
Dans "Inspecteur d'identité" (en haut à droite), définissez la classe sur notre fichier Pokemon.swift récemment créé.

POKEMONS !!!

Oui! Glissez et déposez des Pokemons dans votre projet pour terminer notre "infrastructure".
Nous ajoutons ici deux fichiers PGN, 256x256, transparents.

Montrez-moi déjà le code.

D'accord, d'accord.
Il est temps d'ajouter du code à notre classe Pokemon.swift.

C'est en fait assez simple:

1. Implémenter les initialiseurs requis
2. Chargez le fichier XIB
3. Configurez la vue qui affichera le fichier XIB
4. Montrer la vue ci-dessus

Ajoutez le code suivant à la classe Pokemon.swift:

import UIKit

class Pokemon: UIView {
    
    // MARK: - Initializers
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupView()
    }
    
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        setupView()
    }
    
    // MARK: - Private Helper Methods
    
    // Performs the initial setup.
    private func setupView() {
        let view = viewFromNibForClass()
        view.frame = bounds

        // Auto-layout stuff.
        view.autoresizingMask = [
            UIViewAutoresizing.flexibleWidth,
            UIViewAutoresizing.flexibleHeight
        ]

        // Show the view.
        addSubview(view)
    }
    
    // Loads a XIB file into a view and returns this view.
    private func viewFromNibForClass() -> UIView {
        
        let bundle = Bundle(for: type(of: self))
        let nib = UINib(nibName: String(describing: type(of: self)), bundle: bundle)
        let view = nib.instantiate(withOwner: self, options: nil).first as! UIView
        
        /* Usage for swift < 3.x
        let bundle = NSBundle(forClass: self.dynamicType)
        let nib = UINib(nibName: String(self.dynamicType), bundle: bundle)
        let view = nib.instantiateWithOwner(self, options: nil)[0] as! UIView
        */

        return view
    }
}

@IBDesignable et @IBInspectable

En ajoutant @IBDesignable à votre classe, vous pouvez le rendre en direct dans Interface Builder.
En ajoutant @IBInspectable aux propriétés de votre classe, vous pouvez voir vos vues personnalisées changer dans Interface Builder dès que vous modifiez ces propriétés.

Faisons la Image View de notre vue personnalisée "Inspectable".

Tout d'abord, connectez la Image View du fichier Pokemon.xib à la classe Pokemon.swift.

Appelez la prise imageView , puis ajoutez le code suivant (notez le @IBDesignable avant le nom de la classe):

@IBDesignable class Pokemon: UIView {
    
    // MARK: - Properties
    
    @IBOutlet weak var imageView: UIImageView!
    
    @IBInspectable var image: UIImage? {
        get {
            return imageView.image
        }
        set(image) {
            imageView.image = image
        }
    }

    // MARK: - Initializers
    ...

Utiliser vos vues personnalisées

Entré dans votre fichier de scénario principal, faites glisser un UIView dans celui-ci.
Redimensionnez la vue pour, disons 200x200. Centraliser.
Accédez à l'inspecteur d'identité (en haut à droite) et définissez la classe sur Pokemon.

Pour sélectionner un Pokémon, accédez à l'inspecteur d'attributs (en haut à droite) et sélectionnez l'une des images Pokemon précédemment ajoutées à l'aide de la @IBInspectable propriété d'image @IBInspectable .

Maintenant, dupliquez votre vue Pokemon personnalisée.
Donnez-lui une taille différente, disons 150x150.
Choisissez une autre image Pokemon, observez:

Maintenant, nous allons ajouter plus de logique à cet élément d’interface utilisateur personnalisé.
Le bouton permettra aux Pokemons d'être activés / désactivés.

Créez un IBAction du bouton Switch à la classe Pokemon.swift.
Appelez l'action quelque chose comme switchTapped .
Ajoutez-lui le code suivant:

// MARK: - Actions

@IBAction func switchTapped(sender: UISwitch) {
    imageView.alpha = sender.on ? 1.0 : 0.2
}

// MARK: - Initializers
...

Résultat final:

Vous avez terminé!
Vous pouvez désormais créer des vues personnalisées complexes et les réutiliser partout où vous le souhaitez.
Cela augmentera la productivité tout en isolant le code dans des éléments d'interface utilisateur autonomes.

Le projet final peut être cloné dans Github.
( Mis à jour pour Swift 3.1 )

Comment créer UIView réutilisable personnalisé à l'aide de XIB

L'exemple suivant montre les étapes impliquées dans l'initialisation d'une vue depuis XIB.

Ce n'est pas une opération complexe mais des étapes précises doivent être suivies pour le faire correctement dès le départ, en évitant les exceptions.

Comment fonctionne loadNibNamed

Les principales étapes sont:

1. Créer XIB
2. Créer la classe .h et .m
3. Définir les points de vente en .h
4. Connecter des prises entre .h et XIB

Voir la capture d'écran ci-jointe:

5. Appelez loadNibNamed dans la fonction initWithCoder du fichier .m. Ceci est nécessaire pour vous assurer que vous pouvez directement placer l'objet UIView dans le fichier storyboard / Parent UIView XIB et le définir comme vue personnalisée. Aucun autre code d'initialisation n'est nécessaire une fois que vous avez chargé le storyboard / parent XIB. Votre vue personnalisée peut être ajoutée à d'autres vues, tout comme les autres objets de vue Objective C intégrés donnés dans XCode.