Przykład Swift

Aktualizacja dla Xcode 9 i Swift 4

Oto podstawowe Przejście. Wiele się z tego nauczyłem oglądając tę serię filmów na Youtube . Później zaktualizowałem swoją odpowiedź na podstawie tego artykułu .

Dodaj własne pliki widoku

Następujące dwa pliki utworzą Twój własny widok:

• .plik xib zawierający układ
• .plik swift jako UIView podklasa

Szczegóły do ich dodania są poniżej.

Plik Xib

Dodaj a .plik xib do twojego projektu (Plik > Nowy > plik... > Interfejs Użytkownika > Widok) . Nazywam swoją ReusableCustomView.xib.

Utwórz układ, który chcesz mieć w widoku niestandardowym. Jako przykład zrobię układ z UILabel i UIButton. Dobrym pomysłem jest użycie układu automatycznego, aby rzeczy automatycznie zmieniały rozmiar bez względu na to, jaki rozmiar ustawisz później. (Użyłem Freeform dla rozmiaru xib w Inspektor atrybutów, żebym mógł dostosować symulowane metryki, ale nie jest to konieczne.)

Plik Swift

Dodaj a .plik swift do twojego projektu (Plik > Nowy > plik... > Source > Swift File) . Jest to podklasa UIView i nazywam swoją ReusableCustomView.swift.

import UIKit
class ResuableCustomView: UIView {

}

Uczyń plik Swift właścicielem

Wróć do swojego .plik xib i kliknij "właściciel pliku" w zarysie dokumentu. W tożsamości Inspektor napisz imię swojego .plik swift jako niestandardowa nazwa klasy.

Dodaj Własny Kod Widoku

Zastąp zawartość pliku ReusableCustomView.swift następującym kodem:

import UIKit
class ResuableCustomView: UIView {

    let nibName = "ReusableCustomView" 
    var contentView:UIView?

    @IBOutlet weak var label: UILabel!

    @IBAction func buttonTap(_ sender: UIButton) {
        label.text = "Hi"
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)

        guard let view = loadViewFromNib() else { return }
        view.frame = self.bounds
        self.addSubview(view)
        contentView = view
    }

    func loadViewFromNib() -> UIView? {
        let bundle = Bundle(for: type(of: self))
        let nib = UINib(nibName: nibName, bundle: bundle)
        return nib.instantiate(withOwner: self, options: nil).first as? UIView
    }
}

Upewnij się, że pisownia Twojego imienia jest prawidłowa .plik xib.

Podłącz gniazdka i akcje

Podłącz gniazda i akcje poprzez sterowanie przeciąganiem z etykiety i przycisku w układzie xib do swift custom view kod.

Użyj własnego widoku

Twój widok niestandardowy jest już skończony. Wszystko, co musisz zrobić, to dodać UIView gdziekolwiek chcesz, w swoim głównym storyboardzie. Ustaw nazwę klasy widoku na ReusableCustomView w Inspektorze tożsamości.

W momencie pisania tego tekstu miałem problem z dodaniem @IBDesignable do kodu, więc widoki nie pojawiają się w IB, ale robią to podczas uruchamiania aplikacji. (Na powyższym obrazku dałem widoki IB kolor tła tak, że będą widoczne w czasie projektowania.)

odpowiedź dla kontrolerów widoku, a nie views:

Istnieje łatwiejszy sposób załadowania xib ze storyboardu. Powiedzmy, że twój kontroler jest typu MyClassController, który dziedziczy od UIViewController.

Dodajesz UIViewController używając IB w storyboardzie; Zmień typ klasy na MyClassController. Usuń widok, który został automatycznie dodany w storyboardzie.

Upewnij się, że żądany XIB nazywa się MyClassController.xib.

Kiedy klasa będzie utworzone podczas ładowania storyboardu xib zostanie automatycznie załadowany. Powodem tego jest domyślna implementacja UIViewController, która wywołuje nazwę XIB z nazwą klasy.

To nie jest naprawdę odpowiedź, ale myślę, że warto podzielić się tym podejściem.

Objective-C

1. Import CustomViewWithXib.h i CustomViewWithXib.m do twojego projekt
2. Utwórz własne pliki widoków o tej samej nazwie (.h / .na / .xib)
3. Dziedzicz swoją klasę z CustomViewWithXib

Swift

1. Import CustomViewWithXib.swift do twojego projektu
2. Utwórz własne pliki widoków o tej samej nazwie (.swift i .xib)
3. Dziedzicz swoją klasę z CustomViewWithXib

Opcjonalnie:

1. przejdź do pliku xib, Ustaw właściciela z niestandardową nazwą klasy, jeśli potrzeba podłączenia niektórych elementów (więcej szczegółów w części Make plik Swift właściciela @ Suragch answer ' S)

To wszystko, teraz możesz dodać swój niestandardowy widok do storyboardu i zostanie wyświetlony :)

CustomViewWithXib.h :

 #import <UIKit/UIKit.h>

/**
 *  All classes inherit from CustomViewWithXib should have the same xib file name and class name (.h and .m)
 MyCustomView.h
 MyCustomView.m
 MyCustomView.xib
 */

// This allows seeing how your custom views will appear without building and running your app after each change.
IB_DESIGNABLE
@interface CustomViewWithXib : UIView

@end

CustomViewWithXib.m :

#import "CustomViewWithXib.h"

@implementation CustomViewWithXib

#pragma mark - init methods

- (instancetype)initWithFrame:(CGRect)frame {
    self = [super initWithFrame:frame];
    if (self) {
        // load view frame XIB
        [self commonSetup];
    }
    return self;
}

- (instancetype)initWithCoder:(NSCoder *)aDecoder {
    self = [super initWithCoder:aDecoder];
    if (self) {
        // load view frame XIB
        [self commonSetup];
    }
    return self;
}

#pragma mark - setup view

- (UIView *)loadViewFromNib {
    NSBundle *bundle = [NSBundle bundleForClass:[self class]];

    //  An exception will be thrown if the xib file with this class name not found,
    UIView *view = [[bundle loadNibNamed:NSStringFromClass([self class])  owner:self options:nil] firstObject];
    return view;
}

- (void)commonSetup {
    UIView *nibView = [self loadViewFromNib];
    nibView.frame = self.bounds;
    // the autoresizingMask will be converted to constraints, the frame will match the parent view frame
    nibView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
    // Adding nibView on the top of our view
    [self addSubview:nibView];
}

@end

CustomViewWithXib.swift :

import UIKit

@IBDesignable
class CustomViewWithXib: UIView {

    // MARK: init methods
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)

        commonSetup()
    }

    override init(frame: CGRect) {
        super.init(frame: frame)

        commonSetup()
    }

    // MARK: setup view 

    private func loadViewFromNib() -> UIView {
        let viewBundle = NSBundle(forClass: self.dynamicType)
        //  An exception will be thrown if the xib file with this class name not found,
        let view = viewBundle.loadNibNamed(String(self.dynamicType), owner: self, options: nil)[0]
        return view as! UIView
    }

    private func commonSetup() {
        let nibView = loadViewFromNib()
        nibView.frame = bounds
        // the autoresizingMask will be converted to constraints, the frame will match the parent view frame
        nibView.autoresizingMask = [.FlexibleWidth, .FlexibleHeight]
        // Adding nibView on the top of our view
        addSubview(nibView)
    }
}

Kilka przykładów znajdziesz tutaj .