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

ibdesignable swift 4

Question

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?

Answer 1

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.

Answer 2

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:

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

Answer 3

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