ios - designables - No se pudo cargar xib IBDesignable en el generador de interfaz

ibdesignable swift 4 (3)

Estaba teniendo el mismo problema y me las arreglé para solucionarlo.

Swift 3

let bundle = Bundle(for: MyView.self) let view = UINib(nibName: "MyView", bundle: bundle).instantiate(withOwner: self) as! MyView

Lo importante es el paquete.

Tengo un xib ( childXib ) vinculado a su archivo swift UIView personalizado a través de su Owner .

Así es como inicializo mi UIView personalizado:

// init for IBDesignable override init(frame: CGRect) { super.init(frame: frame) let view = loadViewFromNib() view.frame = bounds addSubview(view) } required init?(coder aDecoder: NSCoder) { super.init(coder: aDecoder) addSubview(loadViewFromNib()) } func loadViewFromNib() -> UIView { let bundle = NSBundle(forClass: self.dynamicType) let nib = UINib(nibName: "CommentCellView", bundle: bundle) let view = nib.instantiateWithOwner(self, options: nil)[0] as! UIView return view }

Cuando quiero agregar este xib ( childXib ) en otro xib ( parentXib ), obtengo los siguientes errores:

error: IB Designables: Failed to render instance of MyRootView: The agent threw an exception.

Donde MyRootView es el archivo vinculado a parentXib

error: IB Designables: Failed to update auto layout status: The agent raised a "NSInternalInconsistencyException" exception: Could not load NIB in bundle: ''NSBundle </Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/Library/Xcode/Overlays> (loaded)'' with name ''MyIBDesignableCustomViewFilename''

Donde MyIBDesignableCustomViewFilename es el archivo vinculado a childXib .

Cuando lo depuro haciendo clic en Debug en la Custom class del Identity inspector , no funciona desde esa línea:

let view = nib.instantiateWithOwner(self, options: nil)[0] as! UIView

Todos los archivos xib están en Copy Bundle Resources en Build Phases .

¿Alguna idea de lo que está mal?

Para ambos errores como abajo:

error: IB Designables: Failed to render instance of .... error: IB Designables: Failed to update auto layout status: The agent raised a "NSInternalInconsistencyException" exception: Could not load NIB in bundle ...

Sugiero que tener una pequeña auto verificación rápida puede ayudar a averiguar dónde se deben abordar los problemas:

Compruebe si los archivos .xib se agregan correctamente en un proyecto
Compruebe si nibName está configurado correctamente, a veces aquí ocurre un error tipográfico
Compruebe si tanto el punto de venta como la acción se conectan adecuadamente, incluya la implementación de códigos

Primer paso:

Le daré una introducción a IBDesignable e IBInspectable, y les mostraré cómo aprovechar la nueva característica. No hay mejor manera de elaborar una función que crear una demostración. Así que vamos a construir una interfaz personalizada llamada "Rainbow" juntos.

IBDesignable e IBInspectable

Con IBDesignable e IBInspectable, los desarrolladores pueden crear una interfaz (o vista) que se procesa en Interface Builder en tiempo real. En general, para aplicar esta nueva característica, todo lo que necesita hacer es crear una clase visual subclasificando UIView o UIControl y luego prefijar el nombre de la clase con la palabra clave @IBDesignable en Swift. Si está utilizando Objective-C, en su lugar utiliza la macro IB_DESIGNABLE. Aquí hay un código de ejemplo en Swift:

@IBDesignable class Rainbow: UIView { }

En versiones anteriores de Xcode, puede editar los atributos de tiempo de ejecución definidos por el usuario para cambiar las propiedades de un objeto (por ejemplo, layer.cornerRadius) en Interface Builder. El problema es que debes ingresar el nombre exacto de las propiedades. IBInspectable da un paso adelante. Cuando prefieres una propiedad de la clase visual con IBInspectable, la propiedad estará expuesta al Generador de Interfaces, de modo que puedes cambiar su valor de una manera mucho más sencilla:

Nuevamente, si está desarrollando su aplicación en Swift, lo que debe hacer es simplemente prefijar su propiedad elegida con la palabra clave @IBInspectable. Aquí hay un fragmento de código de ejemplo:

@IBInspectable var firstColor: UIColor = UIColor.blackColor() { // Update your UI when value changes } @IBInspectable var firstColor: UIColor = UIColor.blackColor() { // Update your UI when value changes }

Construyendo tu proyecto Xcode

Comencemos por crear un nuevo proyecto en Xcode y elegir la aplicación de vista única como plantilla, y denominarlo RainbowDemo. Utilizaremos Swift en este proyecto como lenguaje de programación, así que no olvide elegirlo al crear el proyecto.

Una vez que haya terminado, seleccione Main.storyboard en el Project Navigator y arrastre un objeto de vista desde la biblioteca de objetos al controlador de vista. Cambie su color a # 38334C (o el color que desee) y establezca su tamaño en 600 por 434. Luego colóquelo en el centro de la vista principal. No olvide cambiar el color de la vista principal al mismo color del objeto de vista. Consejo: Si desea cambiar los valores de color RGB para su código, simplemente abra su Paleta de colores y cambie a la pestaña Control deslizante para modificar los valores RGB.

¿Te confundes? Sin preocupaciones. Entenderás lo que quiero decir después de ver la demostración del proyecto.

Con Xcode 6, tiene que configurar restricciones de diseño automático para la vista para que sea compatible con todos los tipos de dispositivos iOS. Auto Layout es bastante potente en la última versión de Xcode. Para restricciones simples, puede simplemente hacer clic en la opción Problemas del menú Diseño automático y elegir "Agregar elementos faltantes", y Xcode configurará automáticamente las restricciones de diseño para la vista.

Creación de una clase de vista personalizada

Ahora que ha creado la vista en el guión gráfico, es hora de crear nuestra clase de vista personalizada. Usaremos la plantilla de clase Swift para la creación de la clase. Nómbrelo como "Rainbow".

Then insert the following code in the class: import UIKit class Rainbow: UIView { required init(coder aDecoder: NSCoder) { super.init(coder: aDecoder) } override init(frame: CGRect) { super.init(frame: frame) } }

Como se mencionó anteriormente, la clase visual es una subclase de UIView. Para poder utilizar nuestra clase personalizada en la representación en vivo, debemos anular ambos inicializadores como se muestra arriba. Luego divida la vista seleccionando el editor asistente:

Una vez hecho esto, seleccione el guión gráfico principal en el editor asistente, para que pueda ver lo que está construyendo en tiempo real. Recuerde cambiar el nombre de la clase de la vista a "Arco iris" en el inspector de identidad:

Implementando los controles de IBDesignable

El primer paso para habilitar un control para la representación en vivo es establecer la vista personalizada como Designable prefijando el nombre de la clase con @IBDesignable:

@IBDesignable class Rainbow: UIView { ... }

Es un poco simple como puedes ver. Pero esta simple palabra clave haría su desarrollo mucho más fácil. A continuación, agregaremos algunas propiedades para configurar los colores de los círculos. Inserta estas líneas de código en la clase Rainbow:

@IBInspectable var firstColor: UIColor = UIColor(red: (37.0/255.0), green: (252.0/255), blue: (244.0/255.0), alpha: 1.0) @IBInspectable var secondColor: UIColor = UIColor(red: (171.0/255.0), green: (250.0/255), blue: (81.0/255.0), alpha: 1.0) @IBInspectable var thirdColor: UIColor = UIColor(red: (238.0/255.0), green: (32.0/255)

Aquí, predefinimos cada propiedad con un color predeterminado y le decimos que vuelva a dibujar la vista cada vez que un usuario cambie su valor. Lo más importante es que prefijamos cada propiedad con la palabra clave @IBInspectable. Si va a los Atributos inspeccionables de la vista, debe encontrar estas propiedades visualmente:

Genial, ¿verdad? Al indicar las propiedades como IBInspectable, puede editarlas visualmente usando el selector de color.

Bien, avancemos para implementar los métodos principales de la clase Rainbow, que se usa para dibujar un círculo en la pantalla. Inserte el siguiente método en la clase:

func addOval(lineWidth: CGFloat, path: CGPathRef, strokeStart: CGFloat, strokeEnd: CGFloat, strokeColor: UIColor, fillColor: UIColor, shadowRadius: CGFloat, shadowOpacity: Float, shadowOffsset: CGSize) { let arc = CAShapeLayer() arc.lineWidth = lineWidth arc.path = path arc.strokeStart = strokeStart arc.strokeEnd = strokeEnd arc.strokeColor = strokeColor.CGColor arc.fillColor = fillColor.CGColor arc.shadowColor = UIColor.blackColor().CGColor arc.shadowRadius = shadowRadius arc.shadowOpacity = shadowOpacity arc.shadowOffset = shadowOffsset layer.addSublayer(arc) }

Para hacer el código limpio y legible, creamos un método común para dibujar un círculo completo o medio de acuerdo con los parámetros proporcionados por la persona que llama. Es bastante sencillo dibujar un círculo o un arco usando la clase CAShapeLayer. Puede controlar el inicio y el final de la secuencia utilizando las propiedades strokeStart y strokeEnd. Al variar el valor de stokeEnd entre 0.0 y 1.0, puede dibujar un círculo completo o parcial. El resto de las propiedades solo se utilizan para establecer el color de un trazo, color de sombra, etc. Puede consultar la documentación oficial para obtener detalles de todas las propiedades disponibles en CAShapeLayer.

A continuación, inserte los siguientes métodos en la clase Rainbow:

override func drawRect(rect: CGRect) { // Add ARCs self.addCirle(80, capRadius: 20, color: self.firstColor) self.addCirle(150, capRadius: 20, color: self.secondColor) self.addCirle(215, capRadius: 20, color: self.thirdColor) } func addCirle(arcRadius: CGFloat, capRadius: CGFloat, color: UIColor) { let X = CGRectGetMidX(self.bounds) let Y = CGRectGetMidY(self.bounds) // Bottom Oval let pathBottom = UIBezierPath(ovalInRect: CGRectMake((X - (arcRadius/2)), (Y - (arcRadius/2)), arcRadius, arcRadius)).CGPath self.addOval(20.0, path: pathBottom, strokeStart: 0, strokeEnd: 0.5, strokeColor: color, fillColor: UIColor.clearColor(), shadowRadius: 0, shadowOpacity: 0, shadowOffsset: CGSizeZero) // Middle Cap let pathMiddle = UIBezierPath(ovalInRect: CGRectMake((X - (capRadius/2)) - (arcRadius/2), (Y - (capRadius/2)), capRadius, capRadius)).CGPath self.addOval(0.0, path: pathMiddle, strokeStart: 0, strokeEnd: 1.0, strokeColor: color, fillColor: color, shadowRadius: 5.0, shadowOpacity: 0.5, shadowOffsset: CGSizeZero) // Top Oval let pathTop = UIBezierPath(ovalInRect: CGRectMake((X - (arcRadius/2)), (Y - (arcRadius/2)), arcRadius, arcRadius)).CGPath self.addOval(20.0, path: pathTop, strokeStart: 0.5, strokeEnd: 1.0, strokeColor: color, fillColor: UIColor.clearColor(), shadowRadius: 0, shadowOpacity: 0, shadowOffsset: CGSizeZero) }

La implementación por defecto del método drawRect no hace nada. Para dibujar círculos en la vista, anulamos el método para implementar nuestro propio código de dibujo. El método addCircle toma tres parámetros: arcRadius, capRadius y color. El arcRadius es el radio del círculo, mientras que el capRadius es el radio de la tapa redondeada.

El método addCircle utiliza UIBezierPath para dibujar los arcos y funciona de la siguiente manera:

First it draws a half circle at the bottom Next it draws a full small circle at the edge of the arc. Finally, it draws the other half of the circle

En el método drawRect, llamamos al método addCircle tres veces con diferente radio y color. Esta figura ilustra cómo se dibujan los círculos:

Consejo: Si necesita más información sobre UIBezierPath, puede consultar la documentación oficial de Apple.

Con las propiedades de IBInspectable, ahora es libre de cambiar el color de cada círculo a la derecha en el Creador de Interfaz sin ingresar el código:

Obviamente, puede exponer aún más a arcRadius como una propiedad de IBInspectable. Te lo dejo como ejercicio.

Para código de ejemplo, haga clic aquí: https://github.com/appcoda/Rainbow-IBDesignable-Demo