iOS
UIViews personalizados de archivos XIB

Observaciones

Elementos de cableado

Crear un archivo XIB

Barra de menú de Xcode> Archivo> Nuevo> Archivo.
Seleccione iOS, interfaz de usuario y luego "Ver":

Asígnele un nombre a su XIB (sí, estamos haciendo un ejemplo de Pokémon 👾).
Recuerda revisar tu objetivo y presiona "Crear".

Diseña tu vista

Para hacer las cosas más fáciles, establece:

• Tamaño: forma libre
• Barra de estado: Ninguna
• Barra superior: Ninguna
• Barra inferior: Ninguna

Haga clic en el inspector de tamaño y cambie el tamaño de la vista.
Para este ejemplo usaremos ancho 321 y alto 256.

Coloque algunos elementos en su archivo XIB como se muestra a continuación.
Aquí agregaremos una vista de imagen (256x256) y un interruptor .

Agregue restricciones de diseño automático haciendo clic en "Resolver problemas de diseño automático" (abajo a la derecha) y seleccionando "Agregar restricciones faltantes" en "Todas las vistas".

Obtenga una vista previa de los cambios realizados haciendo clic en "Mostrar el editor asistente" (arriba a la derecha), luego en "Vista previa".
Puede agregar pantallas de iPhone haciendo clic en el botón "Más".
La vista previa debería verse así:

Subclase UIView

Crea la clase que va a gestionar el archivo XIB.
Barra de menú de Xcode> Archivo> Nuevo> Archivo.
Seleccione iOS / Source / Cocoa Touch Class. Pulse "Siguiente".

Asígnele un nombre a la clase, que debe ser el mismo nombre que el archivo XIB (Pokémon).
Seleccione UIView como el tipo de subclase, luego presione "Siguiente".

En la siguiente ventana, selecciona tu objetivo y presiona "Crear".

Conecta Pokemon.xib a Pokemon.swift a través del atributo "Propietario del archivo"

Haga clic en el archivo Pokemon.xib en Xcode.
Haga clic en la salida "Propietario del archivo".
En el "inspector de identidad" (arriba a la derecha), configura la Clase en nuestro archivo Pokemon.swift creado recientemente.

POKEMONS !!!

¡Sí! Arrastra y suelta algunos Pokemon en tu proyecto para terminar nuestra "infraestructura".
Aquí estamos agregando dos archivos PGN, 256x256, transparentes.

Muéstrame el código ya.

Bien, bien.
Es hora de agregar algo de código a nuestra clase Pokemon.swift.

En realidad es bastante simple:

1. Implementar los inicializadores requeridos.
2. Cargar el archivo XIB
3. Configure la vista que mostrará el archivo XIB
4. Mostrar la vista anterior

Agrega el siguiente código a la clase 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 y @IBInspectable

Al agregar @IBDesignable a su clase, hace posible que se @IBDesignable en vivo en Interface Builder.
Al agregar @IBInspectable a las propiedades de su clase, puede ver cómo cambian sus vistas personalizadas en Interface Builder tan pronto como modifica esas propiedades.

Hagamos la Image View de Image View de nuestra vista personalizada "Inspeccionable".

Primero, conecta la Image View de imagen del archivo Pokemon.xib a la clase Pokemon.swift.

Llame al outlet imageView y luego agregue el siguiente código (observe que @IBDesignable antes del nombre de la clase):

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

Usando sus vistas personalizadas

Llegó a su archivo de guión gráfico principal, arrastre una vista UIV en él.
Cambiar el tamaño de la vista a, digamos 200x200. Centralizar.
Ve al inspector de identidad (arriba a la derecha) y configura la clase en Pokémon.

Para seleccionar un Pokémon, dirígete al inspector de atributos (arriba a la derecha) y selecciona una de las imágenes de Pokémon que agregaste anteriormente usando la impresionante propiedad de imagen @IBInspectable .

Ahora duplica tu vista personalizada de Pokemon.
Dale un tamaño diferente, digamos 150x150.
Elige otra imagen de Pokémon, observa:

Ahora vamos a agregar más lógica a ese elemento de IU personalizado autocontenido.
El botón permitirá que los Pokemon sean habilitados / deshabilitados.

Crea una IBAction desde el botón Cambiar a la clase Pokemon.swift.
Llama a la acción algo así como switchTapped .
Agregue el siguiente código:

// MARK: - Actions

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

// MARK: - Initializers
...

Resultado final:

¡Estás listo!
Ahora puede crear vistas personalizadas complejas y reutilizarlas en cualquier lugar que desee.
Esto aumentará la productividad al tiempo que se aísla el código en elementos de la interfaz de usuario autónomos.

El proyecto final puede ser clonado en Github.
( Actualizado a Swift 3.1 )

Cómo hacer UIView reutilizable personalizado utilizando XIB

El siguiente ejemplo muestra los pasos involucrados en la inicialización de una vista desde XIB.

Esta no es una operación compleja, pero se deben seguir los pasos exactos para hacerlo correctamente la primera vez, evitando excepciones.

¿Cómo funciona loadNibNamed?

Los pasos principales son:

1. Crear XIB
2. Crear clase .h y .m
3. Definir salidas en .h
4. Conecte las salidas entre .h y XIB

Ver captura de pantalla adjunta:

5. Invoque loadNibNamed dentro de la función initWithCoder del archivo .m. Esto es necesario para asegurarse de que puede colocar directamente el objeto UIView en el archivo storyboard / Parent UIView XIB y definirlo como su vista personalizada. No se necesita ningún otro código de inicialización una vez que cargue el storyboard / parent XIB. Su vista personalizada se puede agregar a otras vistas al igual que otros objetos de vista de Objective C incorporados que se proporcionan en XCode.