ios - tutorial - ¿Cómo crear borde en UIButton?

objective c vs swift

Question

Uso un botón personalizado en mi aplicación llamado "addButton" y quiero delimitarlo con un color blanco. ¿Cómo puedo obtener el borde de color blanco alrededor de mi botón personalizado?

Answer 1

**** En Swift 3 ****

Para crear borde

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

Para hacer esquina redondeada

 btnName.layer.cornerRadius = 5

Answer 2

Actualización con Swift 3

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

Answer 3

Aquí hay una subclase UIButton 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:

Answer 4

Aquí hay una versión actualizada ( Swift 3.0.1 ) de la answer 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 StoryBoard gracias a las etiquetas @IBDesignable y @IBInspectable .

También las dos propiedades definidas le permiten establecer el ancho y el color del borde directamente en el constructor de la interfaz y obtener una vista previa del resultado.

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

Answer 5

El problema al establecer borderWidth y borderColor es que cuando toca 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 parece innecesario.

Otra opción es crear un UIImage estirable y configurarlo como imagen de fondo del botón. Puedes crear un conjunto de imágenes en tus Images.xcassets como este:

Luego, configúralo como la imagen de fondo del botón:

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

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

Answer 6

Es muy simple, simplemente agrega el encabezado quartzCore en tu archivo (para eso tienes que agregar el marco de cuarzo a tu 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;

ese es un aspecto similar a los controles segmentados.

Answer 7

No es necesario importar QuartzCore.h ahora. Tomando iOS 8 sdk y Xcode 6.1 en referencia.

Uso directo:

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

Answer 8

Para cambiar el botón Radio, Color y Ancho, configuro de esta manera:

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;

Answer 9

Puede establecer las propiedades de 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 de arriba le permite establecer otras propiedades como el radio de la esquina, maskToBounds, etc ...

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

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

Answer 10

Y en poco tiempo, 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

Answer 11

Esto se puede lograr en 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 de IU:

 btnUserButtonName.layer.borderWidth = 1.0

Establecer el título con los valores de color predeterminados para el botón de la interfaz de usuario:

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

Establecer borde con color predeterminado para los valores de propiedad de borde para el botón de IU:

btnUserButtonName.layer.borderColor = UIColor.red

Establecer el color definido por el usuario para los valores de propiedades del borde para el botón de la IU:

 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, por lo que el botón a través de la aplicación se verá uniforme y no es 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 el código:

//use the method and call whever the border has to be applied
btnUserButtonName.setBordersSettings()

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