iOS
Niestandardowe UIViews z plików XIB

Uwagi

Elementy okablowania

Utwórz plik XIB

Pasek menu Xcode> Plik> Nowy> Plik.
Wybierz iOS, interfejs użytkownika, a następnie „Widok”:

Nadaj XIB nazwę (tak, robimy przykład pokemona 👾).
Pamiętaj, aby sprawdzić swój cel i nacisnąć „Utwórz”.

Zaprojektuj swój widok

Aby to ułatwić, ustaw:

• Rozmiar: dowolny
• Pasek stanu: Brak
• Górny pasek: brak
• Dolny pasek: Brak

Kliknij Inspektor rozmiarów i zmień rozmiar widoku.
W tym przykładzie użyjemy szerokości 321 i wysokości 256.

Upuść niektóre elementy do pliku XIB, jak pokazano poniżej.
Tutaj dodamy widok obrazu (256x256) i przełącznik .

Dodaj ograniczenia automatycznego układu, klikając „Rozwiąż problemy z automatycznym układem” (prawy dolny róg) i wybierając „Dodaj brakujące ograniczenia” w „Wszystkich widokach”.

Przejrzyj wprowadzone zmiany, klikając „Pokaż edytora asystenta” (w prawym górnym rogu), a następnie „Podgląd”.
Możesz dodać ekrany iPhone'a, klikając przycisk „Plus”.
Podgląd powinien wyglądać następująco:

Podklasa UIView

Utwórz klasę, która będzie zarządzać plikiem XIB.
Pasek menu Xcode> Plik> Nowy> Plik.
Wybierz iOS / Source / Cocoa Touch Class. Kliknij „Dalej”.

Nadaj klasie nazwę, która musi być taka sama jak nazwa pliku XIB (Pokemon).
Wybierz UIView jako typ podklasy, a następnie naciśnij „Dalej”.

W następnym oknie wybierz cel i naciśnij „Utwórz”.

Połącz Pokemon.xib z Pokemon.swift za pomocą atrybutu „Właściciel pliku”

Kliknij plik Pokemon.xib w Xcode.
Kliknij ujście „Właściciel pliku”.
W „Inspektorze tożsamości” (w prawym górnym rogu) ustaw klasę na nasz niedawno utworzony plik Pokemon.swift.

POKEMONY !!!

Tak! Przeciągnij i upuść kilka Pokemonów do swojego projektu, aby zakończyć naszą „infrastrukturę”.
Dodajemy tutaj dwa pliki PGN, 256 x 256, przezroczyste.

Pokaż mi już kod.

W porządku, w porządku
Czas dodać trochę kodu do naszej klasy Pokemon.swift.

To jest naprawdę bardzo proste:

1. Zaimplementuj wymagane inicjalizatory
2. Załaduj plik XIB
3. Skonfiguruj widok, w którym będzie wyświetlany plik XIB
4. Pokaż powyższy widok

Dodaj następujący kod do klasy 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 i @IBInspectable

Dodając @IBDesignable do swojej klasy, umożliwiasz jej renderowanie na żywo w Konstruktorze interfejsów.
Dodając @IBInspectable do właściwości swojej klasy, możesz zobaczyć swoje niestandardowe widoki zmieniające się w Konstruktorze interfejsów, gdy tylko zmodyfikujesz te właściwości.

Zróbmy Image View naszego widoku niestandardowego „Inspectable”.

Najpierw podłącz Image View z pliku Pokemon.xib do klasy Pokemon.swift.

Wywołaj ujście imageView a następnie dodaj następujący kod (zwróć uwagę na @IBDesignable przed nazwą klasy):

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

Korzystanie z własnych widoków

Przejdź do głównego pliku scenorysu, przeciągnij do niego UIView.
Zmień rozmiar widoku, powiedzmy 200 x 200. Scentralizować.
Przejdź do Inspektora tożsamości (w prawym górnym rogu) i ustaw klasę na Pokemon.

Aby wybrać Pokemona, przejdź do Inspektora atrybutów (w prawym górnym rogu) i wybierz jeden z wcześniej dodanych obrazów Pokemonów za pomocą niesamowitej @IBInspectable obrazu @IBInspectable .

Teraz zduplikuj niestandardowy widok Pokemona.
Daj mu inny rozmiar, powiedzmy 150 x 150.
Wybierz inny obraz Pokemona, obserwuj:

Teraz dodamy więcej logiki do tego niezależnego niestandardowego elementu interfejsu użytkownika.
Przycisk pozwoli włączyć / wyłączyć Pokemony.

Utwórz IBAction z przycisku Przełącz do klasy Pokemon.swift.
Nazwij akcję czymś w rodzaju switchTapped .
Dodaj do niego następujący kod:

// MARK: - Actions

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

// MARK: - Initializers
...

Ostateczny wynik:

Gotowe!
Teraz możesz tworzyć złożone widoki niestandardowe i wykorzystywać je w dowolnym miejscu.
Zwiększy to produktywność, izolując kod w samodzielne elementy interfejsu użytkownika.

Ostateczny projekt można sklonować w Github.
( Zaktualizowano do Swift 3.1 )

Jak zrobić niestandardowy UIView wielokrotnego użytku za pomocą XIB

Poniższy przykład pokazuje kroki związane z inicjowaniem widoku z XIB.

Nie jest to skomplikowana operacja, ale należy wykonać dokładne kroki, aby zrobić to dobrze za pierwszym razem, unikając wyjątków.

Jak działa loadNibNamed

Główne kroki to:

1. Utwórz XIB
2. Utwórz klasę .h i .m
3. Zdefiniuj gniazda w .h
4. Podłącz gniazda między .h i XIB

Zobacz załączony zrzut ekranu:

5. Wywołaj loadNibNamed wewnątrz funkcji initWithCoder pliku .m. Jest to konieczne, aby zapewnić bezpośrednie umieszczenie obiektu UIView w pliku storyboardu / nadrzędnego pliku UIView XIB i zdefiniowanie go jako widoku niestandardowego. Po załadowaniu scenorysu / macierzystego XIB nie jest potrzebny żaden inny kod inicjujący. Twój widok niestandardowy można dodać do innych widoków, tak jak inne wbudowane obiekty widoku Cel C podane w XCode.