iOS
Benutzerdefinierte UIViews aus XIB-Dateien

Bemerkungen

Verdrahtungselemente

Erstellen Sie eine XIB-Datei

Xcode-Menüleiste> Datei> Neu> Datei.
Wählen Sie iOS, Benutzeroberfläche und dann "Ansicht":

Gib deiner XIB einen Namen (ja, wir machen ein Pokemon-Beispiel 👾).
Denken Sie daran, Ihr Ziel zu überprüfen und klicken Sie auf "Erstellen".

Gestalten Sie Ihre Sicht

Zur Vereinfachung stellen Sie Folgendes ein:

• Größe: Freeform
• Statusleiste: Keine
• Top Bar: Keine
• Untere Leiste: Keine

Klicken Sie auf den Größeninspektor und verkleinern Sie die Ansicht.
In diesem Beispiel werden Breite 321 und Höhe 256 verwendet.

Legen Sie einige Elemente wie unten gezeigt in Ihre XIB-Datei ein.
Hier finden wir ein Bild Ansicht (256x256) und einen Schalter hinzufügen.

Fügen Sie Einschränkungen für das automatische Layout hinzu, indem Sie auf "Automatische Layoutprobleme beheben" (unten rechts) klicken und unter "Alle Ansichten" die Option "Fehlende Einschränkungen hinzufügen" auswählen.

Zeigen Sie die vorgenommenen Änderungen in der Vorschau an, indem Sie auf "Assistenten-Editor anzeigen" (oben rechts) und dann auf "Vorschau" klicken.
Sie können iPhone-Bildschirme hinzufügen, indem Sie auf die Schaltfläche "Plus" klicken.
Die Vorschau sollte so aussehen:

Unterklasse UIView

Erstellen Sie die Klasse, die die XIB-Datei verwalten soll.
Xcode-Menüleiste> Datei> Neu> Datei.
Wählen Sie iOS / Source / Cocoa Touch Class aus. Klicken Sie auf "Weiter".

Geben Sie der Klasse einen Namen, der mit der XIB-Datei (Pokemon) identisch sein muss.
Wählen Sie UIView als Unterklassentyp aus und klicken Sie auf "Weiter".

Wählen Sie im nächsten Fenster Ihr Ziel aus und klicken Sie auf "Erstellen".

Verbinden Sie Pokemon.xib über das Attribut "Dateieigner" mit Pokemon.swift

Klicken Sie auf die Pokemon.xib-Datei in Xcode.
Klicken Sie auf den Ausgang "Dateiinhaber".
Legen Sie im "Identitätsinspektor" (oben rechts) die Klasse auf unsere kürzlich erstellte Datei "Pokemon.swift" fest.

POKEMONS !!!

Ja! Ziehen Sie einige Pokemons in Ihr Projekt, um unsere "Infrastruktur" zu beenden.
Hier fügen wir zwei PGN-Dateien, 256x256, transparent hinzu.

Zeigen Sie mir schon den Code.

Gut gut.
Zeit, um unserer Pokemon.swift-Klasse etwas Code hinzuzufügen.

Es ist eigentlich ziemlich einfach:

1. Implementieren Sie die erforderlichen Initialisierer
2. Laden Sie die XIB-Datei
3. Konfigurieren Sie die Ansicht, in der die XIB-Datei angezeigt wird
4. Zeigen Sie die obige Ansicht an

Fügen Sie der Pokemon.swift-Klasse den folgenden Code hinzu:

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 und @IBInspectable

Durch das Hinzufügen von @IBDesignable zu Ihrer Klasse ermöglichen Sie das Live-Rendering im Interface Builder.
Durch Hinzufügen von @IBInspectable zu den Eigenschaften Ihrer Klasse können Sie sehen, dass sich Ihre benutzerdefinierten Ansichten im Interface Builder ändern, sobald Sie diese Eigenschaften ändern.

Lassen Sie uns die Image View unserer benutzerdefinierten Ansicht "Inspectable" machen.

Zuerst haken Sie die oben Image View von der Pokemon.xib Datei an die Pokemon.swift Klasse.

Rufen Sie den Ausgang imageView und fügen Sie den folgenden Code hinzu (beachten Sie das @IBDesignable vor dem Klassennamen):

@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
    ...

Eigene Ansichten verwenden

Gehen Sie zu Ihrer Haupt-Storyboard-Datei und ziehen Sie eine UIView hinein.
Ändern Sie die Größe der Ansicht auf 200x200. Zentralisieren.
Gehen Sie zum Identitätsinspektor (oben rechts) und setzen Sie die Klasse auf Pokemon.

Um ein Pokemon auszuwählen, navigieren Sie zum Attribut-Inspector (oben rechts) und wählen Sie eines der zuvor hinzugefügten Pokemon-Images mit der @IBInspectable -Eigenschaft awesome @IBInspectable .

Jetzt duplizieren Sie Ihre benutzerdefinierte Pokemon-Ansicht.
Geben Sie eine andere Größe an, sagen Sie 150x150.
Wähle ein anderes Pokemon-Bild aus und beachte:

Jetzt fügen wir dem in sich geschlossenen benutzerdefinierten UI-Element mehr Logik hinzu.
Mit der Schaltfläche können Pokemons aktiviert / deaktiviert werden.

Erstellen Sie eine IBAction von der Schaltfläche Switch auf die Pokemon.swift-Klasse.
Rufen Sie die Aktion wie switchTapped .
Fügen Sie den folgenden Code hinzu:

// MARK: - Actions

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

// MARK: - Initializers
...

Endergebnis:

Du bist fertig!
Jetzt können Sie komplexe benutzerdefinierte Ansichten erstellen und sie an beliebiger Stelle wiederverwenden.
Dies erhöht die Produktivität und isoliert den Code in eigenständige Elemente der Benutzeroberfläche.

Das endgültige Projekt kann in Github geklont werden.
( Aktualisiert zu Swift 3.1 )

Wie kann UIView mit XIB benutzerdefiniert wiederverwendbar werden?

Das folgende Beispiel zeigt die Schritte zum Initialisieren einer Ansicht aus XIB.

Dies ist keine komplexe Operation, aber es müssen genaue Schritte befolgt werden, um es beim ersten Mal richtig zu machen, wobei Ausnahmen vermieden werden.

Wie funktioniert loadNibNamed?

Hauptschritte sind:

1. XIB erstellen
2. Erstellen Sie die Klasse .h und .m
3. Definieren Sie die Auslässe in .h
4. Verbinden Sie die Ausgänge zwischen .h und XIB

Siehe angehängter Screenshot:

5. Rufen Sie loadNibNamed in der initWithCoder-Funktion der .m-Datei auf. Dies ist erforderlich, um sicherzustellen, dass Sie das UIView-Objekt direkt in die Storyboard- / übergeordnete UIView-XIB-Datei einfügen und als benutzerdefinierte Ansicht definieren können. Nach dem Laden des Storyboards / der übergeordneten XIB wird kein anderer Initialisierungscode benötigt. Ihre benutzerdefinierte Ansicht kann wie andere integrierte Objective C-Ansichtsobjekte, die in XCode angegeben sind, zu anderen Ansichten hinzugefügt werden.