iOS
Panoramiche personalizzate dai file XIB

Osservazioni

Elementi di cablaggio

Crea un file XIB

Barra dei menu Xcode> File> Nuovo> File.
Seleziona iOS, Interfaccia utente e quindi "Visualizza":

Dai un nome al tuo XIB (sì, stiamo facendo un esempio di Pokemon 👾).
Ricordati di controllare il tuo obiettivo e premi "Crea".

Progetta il tuo punto di vista

Per semplificare le cose, imposta:

• Dimensione: Freeform
• Barra di stato: nessuna
• Barra superiore: nessuna
• Barra inferiore: nessuna

Fai clic su Impostazioni dimensioni e ridimensiona la vista.
Per questo esempio useremo la larghezza 321 e l'altezza 256.

Trascina alcuni elementi nel tuo file XIB come mostrato di seguito.
Qui aggiungeremo una vista immagine (256x256) e uno switch .

Aggiungi i vincoli Auto-Layout facendo clic su "Risolvi problemi di layout automatico" (in basso a destra) e selezionando "Aggiungi vincoli mancanti" in "Tutte le viste".

Visualizza in anteprima le modifiche apportate facendo clic su "Mostra l'Assistente Editor" (in alto a destra), quindi su "Anteprima".
Puoi aggiungere schermi iPhone facendo clic sul pulsante "Più".
L'anteprima dovrebbe assomigliare a questa:

Sottoclasse UIView

Creare la classe che gestirà il file XIB.
Barra dei menu Xcode> File> Nuovo> File.
Seleziona iOS / Source / Cocoa Touch Class. Premi "Avanti".

Assegna un nome alla classe, che deve essere lo stesso nome del file XIB (Pokemon).
Seleziona UIView come tipo di sottoclasse, quindi premi "Avanti".

Nella finestra successiva, seleziona il tuo obiettivo e premi "Crea".

Collega Pokemon.xib a Pokemon.swift tramite l'attributo "Proprietario del file"

Fare clic sul file Pokemon.xib in Xcode.
Clicca sulla presa "File's Owner".
In "Identity inspector" (in alto a destra), imposta la classe sul nostro file Pokemon.swift creato di recente.

Pokemon !!!

Sì! Trascina e rilascia alcuni Pokemon nel tuo progetto per completare la nostra "infrastruttura".
Qui stiamo aggiungendo due file PGN, 256x256, trasparente.

Fammi vedere il codice già.

Tutto bene tutto bene.
È ora di aggiungere del codice alla nostra classe Pokemon.swift.

In realtà è piuttosto semplice:

1. Implementare gli inizializzatori richiesti
2. Carica il file XIB
3. Configurare la vista che visualizzerà il file XIB
4. Mostra la vista sopra

Aggiungi il seguente codice alla 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 e @IBInspectable

Aggiungendo @IBDesignable alla tua classe, rendi possibile il rendering live in Interface Builder.
Aggiungendo @IBInspectable alle proprietà della classe, è possibile visualizzare le visualizzazioni personalizzate modificando in Interface Builder non appena si modificano tali proprietà.

Facciamo la Image View della nostra vista personalizzata "Ispezionabile".

Innanzitutto, collega la Image View dal file Pokemon.xib alla classe Pokemon.swift.

Chiama la presa imageView e aggiungi il seguente codice (nota @IBDesignable prima del nome della 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
    ...

Utilizzando le tue viste personalizzate

Vai al tuo file di storyboard principale, trascina un UIView in esso.
Ridimensiona la visualizzazione, ad esempio 200x200. Centralizzare.
Vai a Identity inspector (in alto a destra) e imposta la classe su Pokemon.

Per selezionare un Pokemon, vai a Impostazioni Attributi (in alto a destra) e seleziona una delle immagini Pokemon che hai precedentemente aggiunto usando la fantastica proprietà dell'immagine @IBInspectable .

Ora duplica la tua vista Pokemon personalizzata.
Dagli una dimensione diversa, diciamo 150x150.
Scegli un'altra immagine di Pokemon, osserva:

Ora aggiungeremo più logica a quell'elemento dell'interfaccia utente personalizzata che contiene automaticamente.
Il pulsante permetterà ai Pokemon di essere abilitati / disabilitati.

Crea un IBAction dal pulsante Passa alla classe Pokemon.swift.
Chiamare l'azione qualcosa come switchTapped .
Aggiungi il seguente codice ad esso:

// MARK: - Actions

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

// MARK: - Initializers
...

Risultato finale:

Hai fatto!
Ora puoi creare complesse visualizzazioni personalizzate e riutilizzarle ovunque desideri.
Ciò consentirà di aumentare la produttività isolando il codice in elementi dell'interfaccia utente autonomi.

Il progetto finale può essere clonato in Github.
( Aggiornato a Swift 3.1 )

Come rendere UIView riutilizzabile personalizzato usando XIB

L'esempio seguente mostra i passaggi coinvolti nell'inizializzazione di una vista da XIB.

Non si tratta di un'operazione complessa, ma è necessario seguire i passaggi precisi per farlo correttamente la prima volta, evitando le eccezioni.

Come funziona loadNibNamed Works

I passaggi principali sono:

1. Crea XIB
2. Crea classe .h e .m
3. Definisci punti vendita in .h
4. Collegare le prese tra .h e XIB

Vedi screenshot allegato:

5. Richiamare loadNibNamed all'interno della funzione initWithCoder del file .m. Questo è necessario per assicurare che sia possibile posizionare direttamente l'oggetto UIView nello storyboard / file UIView padre XIB e definirlo come vista personalizzata. Nessun altro codice di inizializzazione è necessario una volta caricato lo storyboard / genitore XIB. La tua vista personalizzata può essere aggiunta ad altre viste proprio come gli altri oggetti di visualizzazione Objective C incorporati forniti in XCode.