¿Cómo crear borde en UIButton?

Utilizo un botón personalizado en mi aplicación llamado "addButton" y quiero ponerle un borde blanco, ¿cómo puedo obtener el borde blanco alrededor de mi botón personalizado?

Puede establecer las propiedades del borde en el CALayer accediendo a la propiedad de capa del botón.

Primero, agrega Cuarzo

#import <QuartzCore/QuartzCore.h>

Establecer propiedades:

myButton.layer.borderWidth = 2.0f;
myButton.layer.borderColor = [UIColor greenColor].CGColor;

Ver:

https://developer.apple.com/documentation/quartzcore/calayer#//apple_ref/occ/cl/CALayer

El CALayer en el enlace anterior le permite establecer otras propiedades como el radio de la esquina, maskToBounds, etc.

Además, un buen artículo sobre diversión de botones:

https://web.archive.org/web/20161221132308/http://www.apptite.be/tutorial_custom_uibuttons.php

Es muy simple, solo agregue el encabezado quartzCore en su archivo (para eso debe agregar el marco de cuarzo a su proyecto)

y luego haz esto

[[button layer] setCornerRadius:8.0f];

[[button layer] setMasksToBounds:YES];

[[button layer] setBorderWidth:1.0f];

Puede cambiar los valores flotantes según sea necesario.

disfrutar.

Aquí hay un código moderno típico ...

self.buttonTag.layer.borderWidth = 1.0f;
self.buttonCancel.layer.borderWidth = 1.0f;

self.buttonTag.layer.borderColor = [UIColor blueColor].CGColor;
self.buttonCancel.layer.borderColor = [UIColor blueColor].CGColor;

self.buttonTag.layer.cornerRadius = 4.0f;
self.buttonCancel.layer.cornerRadius = 4.0f;

Esa es una apariencia similar a los controles segmentados.

ACTUALIZACIÓN para Swift:

• No es necesario agregar "QuartzCore"

Solo haz:

button.layer.cornerRadius = 8.0
button.layer.borderWidth = 1.0
button.layer.borderColor = UIColor.black.cgColor

Y en forma rápida, no necesita importar "QuartzCore / QuartzCore.h"

Solo usa:

button.layer.borderWidth = 0.8
button.layer.borderColor = (UIColor( red: 0.5, green: 0.5, blue:0, alpha: 1.0 )).cgColor

o

button.layer.borderWidth = 0.8
button.layer.borderColor = UIColor.grayColor().cgColor

El problema al configurar la capa borderWidthy borderColores que cuando tocas el botón, el borde no anima el efecto de resaltado.

Por supuesto, puede observar los eventos del botón y cambiar el color del borde en consecuencia, pero eso se siente innecesario.

Otra opción es crear un UIImage estirable y configurarlo como la imagen de fondo del botón. Puede crear un conjunto de imágenes en sus imágenes.

Luego, lo configura como la imagen de fondo del botón:

Si su imagen es una imagen de plantilla, puede establecer el color de tinte del botón y el borde cambiará:

Ahora el borde se resaltará con el resto del botón cuando se toque.

Para cambiar el radio, el color y el ancho del botón, configuro así:

self.myBtn.layer.cornerRadius = 10;
self.myBtn.layer.borderWidth = 1;
self.myBtn.layer.borderColor =[UIColor colorWithRed:189.0/255.0f green:189.0/255.0f blue:189.0/255.0f alpha:1.0].CGColor;

Aquí hay una versión actualizada ( Swift 3.0.1 ) de la respuesta de Ben Packard .

import UIKit

@IBDesignable class BorderedButton: UIButton {

    @IBInspectable var borderColor: UIColor? {
        didSet {
            if let bColor = borderColor {
                self.layer.borderColor = bColor.cgColor
            }
        }
    }

    @IBInspectable var borderWidth: CGFloat = 0 {
        didSet {
            self.layer.borderWidth = borderWidth
        }
    }

    override var isHighlighted: Bool {
        didSet {
            guard let currentBorderColor = borderColor else {
                return
            }

            let fadedColor = currentBorderColor.withAlphaComponent(0.2).cgColor

            if isHighlighted {
                layer.borderColor = fadedColor
            } else {

                self.layer.borderColor = currentBorderColor.cgColor

                let animation = CABasicAnimation(keyPath: "borderColor")
                animation.fromValue = fadedColor
                animation.toValue = currentBorderColor.cgColor
                animation.duration = 0.4
                self.layer.add(animation, forKey: "")
            }
        }
    }
}

El botón resultante se puede usar dentro de su StoryBoard gracias a las etiquetas @IBDesignabley @IBInspectable.

Además, las dos propiedades definidas le permiten establecer el ancho y el color del borde directamente en el generador de interfaces y obtener una vista previa del resultado.

Se podrían agregar otras propiedades de manera similar, para el radio del borde y el tiempo de desvanecimiento del resaltado.

No necesita importar QuartzCore.hahora. Tomando iOS 8 sdk y Xcode 6.1 en referencia.

Uso directo:

[[myButton layer] setBorderWidth:2.0f];
[[myButton layer] setBorderColor:[UIColor greenColor].CGColor];

Aquí hay una UIButtonsubclase que admite la animación de estado resaltada sin usar imágenes. También actualiza el color del borde cuando cambia el modo de tinte de la vista.

class BorderedButton: UIButton {
    override init(frame: CGRect) {
        super.init(frame: frame)

        layer.borderColor = tintColor.CGColor
        layer.borderWidth = 1
        layer.cornerRadius = 5

        contentEdgeInsets = UIEdgeInsets(top: 5, left: 10, bottom: 5, right: 10)
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("NSCoding not supported")
    }

    override func tintColorDidChange() {
        super.tintColorDidChange()

        layer.borderColor = tintColor.CGColor
    }

    override var highlighted: Bool {
        didSet {
            let fadedColor = tintColor.colorWithAlphaComponent(0.2).CGColor

            if highlighted {
                layer.borderColor = fadedColor
            } else {
                layer.borderColor = tintColor.CGColor

                let animation = CABasicAnimation(keyPath: "borderColor")
                animation.fromValue = fadedColor
                animation.toValue = tintColor.CGColor
                animation.duration = 0.4
                layer.addAnimation(animation, forKey: "")
            }
        }
    }
}

Uso:

let button = BorderedButton(style: .System) //style .System is important

Apariencia:

Esto se puede lograr con varios métodos en Swift 3.0 Trabajó en la última versión agosto - 2017

Opción 1:

Asigne directamente los valores de propiedad borderWidth para el botón UI:

  btnUserButtonName.layer.borderWidth = 1.0

Establecer título con valores de color predeterminados para el botón UI:

btnUserButtonName.setTitleColor(UIColor.darkGray, for: .normal)

Establecer borde con color predeterminado para los valores de propiedad del borde para el botón de la interfaz de usuario:

btnUserButtonName.layer.borderColor = UIColor.red

Establezca el color definido por el usuario para los valores de propiedad del borde para el botón de la interfaz de usuario:

   let myGrayColor = UIColor(red: 0.889415, green: 0.889436, blue:0.889424, alpha: 1.0 )
   btnUserButtonName.layer.borderColor = myGrayColor.cgColor

Opción 2: [Recomendado]

Use el método de extensión, de modo que el botón en toda la aplicación se verá coherente y no será necesario repetir varias líneas de código en todas partes.

//Create an extension class in any of the swift file

extension UIButton {
func setBordersSettings() {
        let c1GreenColor = (UIColor(red: -0.108958, green: 0.714926, blue: 0.758113, alpha: 1.0))
        self.layer.borderWidth = 1.0
        self.layer.cornerRadius = 5.0
        self.layer.borderColor = c1GreenColor.cgColor
        self.setTitleColor(c1GreenColor, for: .normal)
        self.layer.masksToBounds = true
    }
}

Uso en código:

//use the method and call whever the border has to be applied

btnUserButtonName.setBordersSettings()

Salida del botón de método de extensión:

Actualización con Swift 3

    button.layer.borderWidth = 0.8
    button.layer.borderColor = UIColor.blue.cgColor

**** En Swift 3 ****

Para crear borde

 btnName.layer.borderWidth = 1
 btnName.layer.borderColor = UIColor.black.cgColor

Hacer esquina redondeada

 btnName.layer.cornerRadius = 5

Swift 5

button.layer.borderWidth = 2

Para cambiar el color del borde, use

button.layer.borderColor = CGColor(srgbRed: 255/255, green: 126/255, blue: 121/255, alpha: 1)