iOS
Aangepaste UIViews van XIB-bestanden

Opmerkingen

Bedradingselementen

Maak een XIB-bestand

Xcode-menubalk> Bestand> Nieuw> Bestand.
Selecteer iOS, Gebruikersinterface en vervolgens "Beeld":

Geef je XIB een naam (ja, we doen een Pokemon-voorbeeld 👾).
Vergeet niet om je doel te controleren en op "Maken" te klikken.

Ontwerp uw weergave

Om dingen gemakkelijker te maken, stel in:

• Grootte: Freeform
• Statusbalk: Geen
• Bovenste balk: Geen
• Onderbalk: Geen

Klik op de maatinspecteur en verklein de weergave.
Voor dit voorbeeld gebruiken we breedte 321 en hoogte 256.

Sleep enkele elementen naar je XIB-bestand zoals hieronder weergegeven.
Hier zullen we het toevoegen van een afbeelding weergeven (256x256) en een Switch.

Voeg beperkingen voor de automatische opmaak toe door te klikken op "Problemen met automatische opmaak oplossen" (rechtsonder) en "Ontbrekende beperkingen toevoegen" te selecteren onder "Alle weergaven".

Bekijk een voorbeeld van de aangebrachte wijzigingen door te klikken op "Assistent-editor weergeven" (rechtsboven) en vervolgens op "Voorbeeld".
U kunt iPhone-schermen toevoegen door op de knop "Plus" te klikken.
Het voorbeeld moet er zo uitzien:

Subklasse UIView

Maak de klasse die het XIB-bestand gaat beheren.
Xcode-menubalk> Bestand> Nieuw> Bestand.
Selecteer iOS / Bron / Cocoa Touch Class. Druk op "Volgende".

Geef de klas een naam, die dezelfde naam moet hebben als het XIB-bestand (Pokemon).
Selecteer UIView als het type subklasse en druk vervolgens op "Volgende".

Selecteer in het volgende venster uw doel en druk op "Maken".

Verbind Pokemon.xib met Pokemon.swift via het kenmerk "Bestandseigenaar"

Klik op het Pokemon.xib-bestand in Xcode.
Klik op de outlet "Bestandseigenaar".
Stel in de "Identiteitscontrole" (rechtsboven) de Klasse in op ons recent gecreëerde Pokemon.swift-bestand.

Pokemons !!!

Ja! Sleep enkele Pokemons naar je project om onze "infrastructuur" af te ronden.
Hier voegen we twee PGN-bestanden toe, 256x256, transparant.

Laat me al code zien.

Oké, oké.
Tijd om wat code toe te voegen aan onze Pokemon.swift-klasse.

Het is eigenlijk vrij eenvoudig:

1. Voer de vereiste initializers uit
2. Laad het XIB-bestand
3. Configureer de weergave waarin het XIB-bestand wordt weergegeven
4. Toon de bovenstaande weergave

Voeg de volgende code toe aan de klasse 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 en @IBInspectable

Door @IBDesignable aan uw klas toe te voegen, kunt u deze live weergeven in Interface Builder.
Door @IBInspectable te voegen aan de eigenschappen van uw klasse, kunt u uw aangepaste weergaven zien veranderen in Interface Builder zodra u die eigenschappen wijzigt.

Laten we de Image View van onze aangepaste weergave "inspecteren".

Sluit eerst de Image View van het Pokemon.xib-bestand aan op de Pokemon.swift-klasse.

Bel de outlet imageView en voeg vervolgens de volgende code toe (let op @IBDesignable voor de klassenaam):

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

Uw aangepaste weergaven gebruiken

Ga naar je hoofd storyboard-bestand, sleep een UIView erin.
Pas de weergave aan tot 200x200. Centraliseren.
Ga naar de identiteitscontrole (rechtsboven) en stel de klasse in op Pokemon.

Om een Pokemon te selecteren, ga je naar de Attribute Inspector (rechtsboven) en selecteer je een van de Pokemon-afbeeldingen die je eerder hebt toegevoegd met de geweldige @IBInspectable afbeeldingseigenschap.

Dupliceer nu je aangepaste Pokemon-weergave.
Geef het een andere maat, zeg 150x150.
Kies een andere Pokemon-afbeelding en observeer:

Nu gaan we meer logica toevoegen aan dat op zichzelf staande aangepaste gebruikersinterface-element.
Met de knop kunnen Pokemons worden in- / uitgeschakeld.

Maak een IBAction van de Switch-knop naar de Pokemon.swift-klasse.
Noem de actie zoiets als switchTapped .
Voeg de volgende code toe:

// MARK: - Actions

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

// MARK: - Initializers
...

Eindresultaat:

Je bent klaar!
Nu kunt u complexe aangepaste weergaven maken en deze hergebruiken waar u maar wilt.
Dit verhoogt de productiviteit terwijl de code wordt geïsoleerd in zelfstandige UI-elementen.

Het laatste project kan worden gekloond in Github.
( Bijgewerkt naar Swift 3.1 )

Hoe aangepaste herbruikbare UIView te maken met behulp van XIB

Het volgende voorbeeld toont de stappen die betrokken zijn bij het initialiseren van een weergave vanuit XIB.

Dit is geen complexe operatie, maar exacte stappen moeten worden gevolgd om het de eerste keer goed te doen, zonder uitzonderingen.

Hoe werkt loadNibNamed

Hoofdstappen zijn:

1. Maak XIB
2. Maak klasse .h en .m
3. Definieer verkooppunten in .h
4. Sluit uitgangen aan tussen .h en XIB

Zie bijgevoegde screenshot:

5. Roep loadNibNamed aan in de functie initWithCoder van het .m-bestand. Dit is nodig om ervoor te zorgen dat u het UIView-object rechtstreeks in het storyboard / Ouder UIView XIB-bestand kunt plaatsen en als uw aangepaste weergave kunt definiëren. Er is geen andere initialisatiecode nodig als u het storyboard / bovenliggende XIB laadt. Uw aangepaste weergave kan aan andere weergaven worden toegevoegd, net als andere ingebouwde Objective C-weergaveobjecten in XCode.