Reutiliza y renderiza un xib en un guión gráfico.

Probado con Swift 2.2 y Xcode 7.3.1

1 —- Crea una nueva UIView llamada ‘DesignableXibView’

• Archivo> Nuevo> Archivo> Fuente> Cocoa Touch Class> UIView

2 —- Crea un archivo xib coincidente llamado ‘DesignableXibView’

• Archivo> Nuevo> Archivo> Interfaz de usuario> Ver

3 —- Configure el propietario del archivo del xib

1. selecciona el xib
2. seleccionar el propietario del archivo
3. establezca una clase personalizada en ‘DesignableXibView’ en el Inspector de identidad.

• Nota: No configure la clase personalizada de la vista en el xib. ¡Solo el propietario del archivo!

4 —- Implementación de XibView Designable

// DesignableXibView.swift import UIKit @IBDesignable class DesignableXibView: UIView { var contentView : UIView? override init(frame: CGRect) { super.init(frame: frame) xibSetup() } required init?(coder aDecoder: NSCoder) { super.init(coder: aDecoder) xibSetup() } func xibSetup() { contentView = loadViewFromNib() // use bounds not frame or it'll be offset contentView!.frame = bounds // Make the view stretch with containing view contentView!.autoresizingMask = [UIViewAutoresizing.FlexibleWidth, UIViewAutoresizing.FlexibleHeight] // Adding custom subview on top of our view (over any custom drawing > see note below) addSubview(contentView!) } func loadViewFromNib() -> UIView! { 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 } } 

5 —- Prueba tu vista reutilizable en un guión gráfico

1. Abra su guión gráfico
2. Añadir una vista
3. Establecer la clase personalizada de esa vista
4. espera un segundo … BOOM !!

¡NUEVO! respuesta actualizada con la capacidad de representar directamente en el guión gráfico (¡y rápido!)

Funciona en Xcode 6.3.1

Crea una nueva UIView llamada ‘ReuseableView’

• Archivo> Nuevo> Archivo> Fuente> Cocoa Touch Class> UIView

Cree un archivo xib coincidente llamado ‘ReuseableView’

• Archivo> Nuevo> Archivo> Interfaz de usuario> Ver

Establezca el propietario del archivo del xib

1. selecciona el xib
2. seleccionar el propietario del archivo

3. establece la clase personalizada como ‘Vista reutilizable’ en el Inspector de identidad.

   • Nota: No configure la clase personalizada de la vista en el xib. ¡Solo el propietario del archivo!

Haga una salida desde la vista en ReuseableView.xib a su interfaz ReuseableView.h

1. Abrir el Editor asistente
2. Control + Arrastre desde la vista a su interfaz

Agregue la implementación de initWithCoder para cargar vista y agregar como una subvista.

 - (id)initWithCoder:(NSCoder *)aDecoder{ self = [super initWithCoder:aDecoder]; if (self) { // 1. load the interface [[NSBundle mainBundle] loadNibNamed:NSStringFromClass([self class]) owner:self options:nil]; // 2. add as subview [self addSubview:self.view]; // 3. allow for autolayout self.view.translatesAutoresizingMaskIntoConstraints = NO; // 4. add constraints to span entire view [self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[view]|" options:0 metrics:nil views:@{@"view":self.view}]]; [self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[view]|" options:0 metrics:nil views:@{@"view":self.view}]]; } return self; } 

Pon a prueba tu vista reutilizable en un guión gráfico

1. Abra su guión gráfico
2. Añadir una vista
3. Establecer la clase personalizada de esa vista

¡Corre y observa!

Swift 3 y 4 Actualización a la respuesta aceptada

1. Crea una nueva UIView llamada ‘DesignableXibView’

• Archivo> Nuevo> Archivo> Fuente> Cocoa Touch Class> UIView

2. Cree un archivo xib coincidente llamado ‘DesignableXibView’

• Archivo> Nuevo> Archivo> Interfaz de usuario> Ver

3. Establezca el propietario del archivo del xib

Seleccione “DesignableXibView.xib”> “Propietario del archivo”> ​​configure “Clase personalizada” en “DesignableXibView” en el Inspector de identidad.

• Nota: No configure la clase personalizada de la vista en el xib. ¡Solo el propietario del archivo!

4. Implementación de XibView Designable

  import UIKit @IBDesignable class DesignableXibView: UIView { var contentView : UIView! override init(frame: CGRect) { super.init(frame: frame) xibSetup() } required init?(coder aDecoder: NSCoder) { super.init(coder: aDecoder) xibSetup() } func xibSetup() { contentView = loadViewFromNib() // use bounds not frame or it'll be offset contentView.frame = bounds // Make the view stretch with containing view contentView.autoresizingMask = [UIViewAutoresizing.flexibleWidth, UIViewAutoresizing.flexibleHeight] // Adding custom subview on top of our view (over any custom drawing > see note below) addSubview(contentView) } func loadViewFromNib() -> 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 return view } } 

5 Pon a prueba tu vista reutilizable en un guión gráfico

• Abra su guión gráfico

• Añadir una vista

• Establecer la clase personalizada de esa vista

La función initWithCoder en swift 2 si alguien tiene problemas para traducirla:

 required init?(coder aDecoder: NSCoder) { super.init(coder: aDecoder) UINib(nibName: String(self.dynamicType), bundle: NSBundle.mainBundle()).instantiateWithOwner(self, options: nil) self.addSubview(view) self.view.translatesAutoresizingMaskIntoConstraints = false self.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("H:|[view]|", options: NSLayoutFormatOptions.AlignAllCenterY , metrics: nil, views: ["view": self.view])) self.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("V:|[view]|", options: NSLayoutFormatOptions.AlignAllCenterX , metrics: nil, views: ["view": self.view])) }