iOS
Anpassade UIV-vyer från XIB-filer

Anmärkningar

Kopplingselement

Skapa en XIB-fil

Xcode-menyfältet> Fil> Nytt> Fil.
Välj iOS, användargränssnitt och sedan "Visa":

Ge din XIB ett namn (ja, vi gör ett Pokemon-exempel 👾).
Kom ihåg att kontrollera ditt mål och tryck på "Skapa".

Designa din vy

För att göra saker enklare, ställ in:

• Storlek: Freeform
• Statusfält: Inget
• Övre fält: Inget
• Nedre raden: Inget

Klicka på Storleksinspektören och ändra storleken på vyn.
I det här exemplet använder vi bredd 321 och höjd 256.

Släpp några element i din XIB-fil som visas nedan.
Här kommer vi att lägga till en bild i (256x256) och en Switch.

Lägg till autolayout-begränsningar genom att klicka på "Lösa problem med automatisk layout" (längst ner till höger) och välja "Lägg till saknade begränsningar" under "Alla vyer".

Förhandsgranska de ändringar du gjort genom att klicka på "Visa assistentredigeraren" (uppe till höger) och sedan på "Förhandsgranska".
Du kan lägga till iPhone-skärmar genom att klicka på "Plus" -knappen.
Förhandsgranskningen ska se ut så här:

Underklass UIV-bild

Skapa klassen som ska hantera XIB-filen.
Xcode-menyfältet> Fil> Nytt> Fil.
Välj iOS / Source / Cocoa Touch Class. Hit "Nästa".

Ge klassen ett namn, som måste ha samma namn som XIB-filen (Pokemon).
Välj UIView som underklasstyp och tryck sedan på "Nästa".

I nästa fönster väljer du ditt mål och trycker på "Skapa".

Anslut Pokemon.xib till Pokemon.swift via attributet "File's Owner"

Klicka på filen Pokemon.xib i Xcode.
Klicka på uttaget "Filens ägare".
På "Identity inspector" (högst upp till höger) ställer du in klass till vår nyligen skapade Pokemon.swift-fil.

Pokemons !!!

ja! Dra och släpp några Pokemons till ditt projekt för att avsluta vår "infrastruktur".
Här lägger vi till två PGN-filer, 256x256, transparent.

Visa mig kod redan.

Okej okej.
Dags att lägga till lite kod i vår Pokemon.swift-klass.

Det är faktiskt ganska enkelt:

1. Implementera nödvändiga initierare
2. Ladda XIB-filen
3. Konfigurera vyn som visar XIB-filen
4. Visa ovanstående vy

Lägg till följande kod i klassen 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 och @IBInspectable

Genom att lägga till @IBDesignable till din klass gör du det möjligt att live-rendera i Interface Builder.
Genom att lägga till @IBInspectable i egenskaperna för din klass kan du se dina anpassade vyer ändras i Interface Builder så snart du ändrar dessa egenskaper.

Låt oss göra Image View av vår anpassade vy "inspekterbar".

Först koppla upp Image View från Pokemon.xib filen till Pokemon.swift klassen.

Ring imageView och lägg sedan till följande kod ( @IBDesignable märke till @IBDesignable före klassens namn):

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

Använda dina anpassade vyer

Kom till din Main storyboard-fil, dra en UIV-bild till den.
Ändra storlek på vyn till, säg 200x200. Centralisera.
Gå till identitetsinspektören (högst upp till höger) och ställ klassen till Pokémon.

För att välja en Pokémon, gå till Attributinspektören (högst upp till höger) och välj en av Pokémonbilderna som du tidigare lagt till med den fantastiska @IBInspectable .

Duplicera nu din anpassade Pokemon-vy.
Ge den en annan storlek, säg 150x150.
Välj en annan Pokemon-bild, observera:

Nu kommer vi att lägga till mer logik till det självinnehållande anpassade UI-elementet.
Knappen gör att Pokemons kan aktiveras / inaktiveras.

Skapa en IBAction från Switch-knappen till Pokemon.swift-klassen.
Kalla åtgärden något som switchTapped .
Lägg till följande kod:

// MARK: - Actions

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

// MARK: - Initializers
...

Slutresultat:

Du är färdig!
Nu kan du skapa komplexa anpassade vyer och återanvända dem var du än vill.
Detta kommer att öka produktiviteten medan du isolerar kod i fristående UI-element.

Det slutliga projektet kan klonas i Github.
( Uppdaterad till Swift 3.1 )

Hur man gör anpassad återanvändbar UIView med XIB

Följande exempel visar steg involverade i att initialisera en vy från XIB.

Detta är inte en komplex åtgärd men exakta steg måste följas för att göra det på rätt sätt första gången och undvika undantag.

Hur fungerar loadNibNamed

De viktigaste stegen är:

1. Skapa XIB
2. Skapa klass .h och .m
3. Definiera uttag i .h
4. Anslut uttag mellan .h och XIB

Se bifogad skärmdump:

5. Anropa loadNibNamed inne i initWithCoder-funktionen i .m-filen. Detta behövs för att säkerställa att du direkt kan placera UIView-objekt i storyboard / Parent UIView XIB-fil och definiera det som din anpassade vy. Ingen annan initialiseringskod behövs när du laddar in storyboard / överordnade XIB. Din anpassade vy kan läggas till andra vyer precis som andra inbyggda objekt C-objekt som ges i XCode.