Xcode
Creando controles personalizados en Interface Builder con @IBDesignable
Buscar..
Observaciones
Se hizo mucho más fácil crear controles personalizados en Interface Builder con la introducción de las directivas @IBDesignable y @IBInspectable en Swift. Los desarrolladores ahora pueden crear controles ricos, complejos y totalmente animados utilizando solo unas pocas líneas adicionales de código. Estoy sorprendido por la cantidad de desarrolladores que aún no han adoptado esta función, y frecuentemente encuentro que agregar solo algunas líneas de código a las clases existentes puede hacer que sea mucho más fácil trabajar con ellas.
Tenga en cuenta que estas características también están disponibles en Objective-C y son una excelente manera de dar vida a las clases anteriores. Los equivalentes sintácticos en Objective-C son IB_DESIGNABLE e IBInspectable, pero por ahora me concentraré en ejemplos en Swift.
Una vista redondeada en vivo
Este es un requisito tan común en el desarrollo de iOS, y siempre fue algo que tenía que hacerse puramente en código (o usando imágenes, ¡puaj!). Ahora es increíblemente fácil obtener una vista previa de este tipo de cosas en Interface Builder, no hay absolutamente ninguna excusa para no usarlo.
Aquí está el código: -
import UIKit
@IBDesignable
class MyRoundedView: UIView {
@IBInspectable var radius: CGFloat = 8 {
didSet {
self.layer.cornerRadius = radius
}
}
override func awakeFromNib() {
self.layer.cornerRadius = self.radius
self.layer.masksToBounds = true
}
}
Para usar esta clase, agréguela a su proyecto y luego abra el guión gráfico en IB y cree una vista normal de un tamaño decente. Asígnele un color de fondo para que pueda verlo, luego navegue hasta el Inspector de identidad en el panel Utilidades de la derecha y cambie el tipo de clase en el menú desplegable a MyRoundedView .
Al hacer esto, debería ver una tercera etiqueta debajo de "Clase" y "Módulo" que dice "Designables", y debería decir "Actualización" por un momento antes de cambiar a "Actual". Esto significa que Xcode ha recompilado su código para MyRoundedView éxito.
Ahora puede abrir el Inspector de atributos y debería ver (quizás después de una breve pausa) una nueva sección en la parte superior del panel con el encabezado "Mi vista redondeada" y un nuevo atributo etiquetado "Radio" con el valor 8 (porque es el valor inicial que establecemos en el código). Esto apareció en el inspector de atributos porque lo marcamos como @IBInspectable .
¡Ahora puede cambiar esto a otro número y debería ver la actualización del radio de la esquina de la vista redondeada en tiempo real!
