ios - radius - Cambiar UIButton BorderColor en Storyboard

view border radius swift

Question

Configuré CornerRadius y BorderWidth para el botón UI en los atributos de tiempo de ejecución definidos por el usuario. Sin agregar layer.borderColor funciona bien y muestra el borde en color negro. Pero cuando agregar layer.borderColor no funciona (no muestra borde).

Answer 1

¡Hay una manera mucho mejor de hacer esto! Deberías usar @IBInspectable. Echa un vistazo a la entrada del blog de Mike Woelmer aquí: https://spin.atomicobject.com/2017/07/18/swift-interface-builder/

¡Realmente agrega la función a IB en Xcode! Algunas de las capturas de pantalla en otras respuestas hacen que parezca que los campos existen en IB, pero al menos en Xcode 9 no. Pero siguiendo su publicación los agregaré.

Answer 2

En el caso de Swift, la función no funciona. Necesitará una propiedad calculada para lograr el resultado deseado:

extension CALayer {
    var borderColorFromUIColor: UIColor {
        get {
            return UIColor(CGColor: self.borderColor!)
        } set {
            self.borderColor = newValue.CGColor
        }
    }
}

Answer 3

Esto funciona para mi.

Swift 3, Xcode 8.3

Extensión CALayer:

extension CALayer {
var borderWidthIB: NSNumber {
    get {
        return NSNumber(value: Float(borderWidth))
    }
    set {
        borderWidth = CGFloat(newValue.floatValue)
    }
}
var borderColorIB: UIColor? {
    get {
        return borderColor != nil ? UIColor(cgColor: borderColor!) : nil
    }
    set {
        borderColor = newValue?.cgColor
    }
}
var cornerRadiusIB: NSNumber {
    get {
        return NSNumber(value: Float(cornerRadius))
    }
    set {
        cornerRadius = CGFloat(newValue.floatValue)
    }
}

}

Answer 4

La explicación, tal vez perderse en algunas de las otras respuestas aquí:

La razón por la que no se establece esta propiedad es que layer.borderColor necesita un valor con el tipo CGColor .

¡Pero solo los tipos UIColor se pueden configurar a través de los atributos de tiempo de ejecución definidos por el usuario de Interface Builder!

Por lo tanto, debe establecer un UIColor en una propiedad proxy a través de Interface Builder, luego interceptar esa llamada para establecer el CGColor equivalente en la propiedad layer.borderColor .

Esto se puede lograr creando una Categoría en CALayer, configurando la Ruta de la Clave a una nueva "propiedad" borderColorFromUIColor ( borderColorFromUIColor ), y en la categoría anulando el setter correspondiente ( setBorderColorFromUIColor: .

Answer 5

Tengo Respuesta Cambiar layer.borderColor a layer.borderColorFromUIColor

y agregue el código en el archivo .m

#import <QuartzCore/QuartzCore.h>
@implementation CALayer (Additions)

- (void)setBorderColorFromUIColor:(UIColor *)color
{
    self.borderColor = color.CGColor;
}

@end

Marque las propiedades en el Inspector de atributos

Answer 6

Para Swift:

Swift 3:

extension UIView {

    @IBInspectable var cornerRadius: CGFloat {
        get {
            return layer.cornerRadius
        }
        set {
            layer.cornerRadius = newValue
            layer.masksToBounds = newValue > 0
        }
    }

    @IBInspectable var borderWidth: CGFloat {
        get {
            return layer.borderWidth
        }
        set {
            layer.borderWidth = newValue
        }
    }

    @IBInspectable var borderColor: UIColor? {
        get {
            return UIColor(cgColor: layer.borderColor!)
        }
        set {
            layer.borderColor = newValue?.cgColor
        }
    }
}

Swift 2.2:

extension UIView {

    @IBInspectable var cornerRadius: CGFloat {
        get {
            return layer.cornerRadius
        }
        set {
            layer.cornerRadius = newValue
            layer.masksToBounds = newValue > 0
        }
    }

    @IBInspectable var borderWidth: CGFloat {
        get {
            return layer.borderWidth
        }
        set {
            layer.borderWidth = newValue
        }
    }

    @IBInspectable var borderColor: UIColor? {
        get {
            return UIColor(CGColor: layer.borderColor!)
        }
        set {
            layer.borderColor = newValue?.CGColor
        }
    }
}

Answer 7

Swift 4, Xcode 9.2 : utilice IBDesignable e IBInspectable para crear controles personalizados y previsualizar en vivo el diseño en Interface Builder.

Aquí hay un código de muestra en Swift, colóquelo justo debajo del UIKit en ViewController.swift:

@IBDesignable extension UIButton {

    @IBInspectable var borderWidth: CGFloat {
        set {
            layer.borderWidth = newValue
        }
        get {
            return layer.borderWidth
        }
    }

    @IBInspectable var cornerRadius: CGFloat {
        set {
            layer.cornerRadius = newValue
        }
        get {
            return layer.cornerRadius
        }
    }

    @IBInspectable var borderColor: UIColor? {
        set {
            guard let uiColor = newValue else { return }
            layer.borderColor = uiColor.cgColor
        }
        get {
            guard let color = layer.borderColor else { return nil }
            return UIColor(cgColor: color)
        }
    }
}

Si va a los Atributos inspeccionables de la vista, debe encontrar estas propiedades visualmente, edite las propiedades:

Los cambios también se reflejan en los atributos de tiempo de ejecución definidos por el usuario:

Corre en tiempo de construcción y ¡Voila! verá su botón redondeado claro con borde.