settitle - swift button action

¿Cómo puedo hacer que un botón tenga un borde redondeado en Swift?

Question

Estoy construyendo una aplicación usando swift en la última versión de Xcode 6, y me gustaría saber cómo puedo modificar mi botón para que tenga un borde redondeado que yo mismo pueda ajustar si es necesario. Una vez hecho esto, ¿cómo puedo cambiar el color del borde sin agregarle un fondo? En otras palabras, quiero un botón ligeramente redondeado sin fondo, solo un borde de 1 pt de cierto color.

Answer 1

Basado en la respuesta @returntrue logré implementarlo en Interface Builder.

Para obtener el botón de esquinas redondeadas con Interface Builder, agregue una Path = "layer.cornerRadius" clave Path = "layer.cornerRadius" con Type = "Number" y Value = "10" (u otro valor según sea necesario) en el " User Defined RunTime Attribute " del Identity Inspector de Identity Inspector de el botón.

Answer 2

Creo que la manera más fácil y más limpia es utilizar el protocolo para evitar la herencia y la repetición del código. Puede cambiar estas propiedades directamente desde el guión gráfico

protocol Traceable {
    var cornerRadius: CGFloat { get set }
    var borderColor: UIColor? { get set }
    var borderWidth: CGFloat { get set }
}

extension UIView: Traceable {

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

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

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

Actualizar

En este link puede encontrar un ejemplo con la utilidad del protocolo Traceable

Answer 3

Esta clase se basa en todos los comentarios y sugerencias en las respuestas, y también se puede designar directamente desde xcode. Copie a su proyecto e inserte cualquier UIButton y cambie para usar una clase personalizada, ahora solo seleccione el color de borde o de fondo de xcode para los estados normales y / o resaltados.

//
//  RoundedButton.swift
//

import UIKit

@IBDesignable
class RoundedButton:UIButton {

    @IBInspectable var borderWidth: CGFloat = 0 {
        didSet {
            layer.borderWidth = borderWidth
        }
    }
    //Normal state bg and border
    @IBInspectable var normalBorderColor: UIColor? {
        didSet {
            layer.borderColor = normalBorderColor?.CGColor
        }
    }

    @IBInspectable var normalBackgroundColor: UIColor? {
        didSet {
            setBgColorForState(normalBackgroundColor, forState: .Normal)
        }
    }


    //Highlighted state bg and border
    @IBInspectable var highlightedBorderColor: UIColor?

    @IBInspectable var highlightedBackgroundColor: UIColor? {
        didSet {
            setBgColorForState(highlightedBackgroundColor, forState: .Highlighted)
        }
    }


    private func setBgColorForState(color: UIColor?, forState: UIControlState){
        if color != nil {
            setBackgroundImage(UIImage.imageWithColor(color!), forState: forState)

        } else {
            setBackgroundImage(nil, forState: forState)
        }
    }

    override func layoutSubviews() {
        super.layoutSubviews()

        layer.cornerRadius = layer.frame.height / 2
        clipsToBounds = true

        if borderWidth > 0 {
            if state == .Normal && !CGColorEqualToColor(layer.borderColor, normalBorderColor?.CGColor) {
                layer.borderColor = normalBorderColor?.CGColor
            } else if state == .Highlighted && highlightedBorderColor != nil{
                layer.borderColor = highlightedBorderColor!.CGColor
            }
        }
    }

}

//Extension Required by RoundedButton to create UIImage from UIColor
extension UIImage {
    class func imageWithColor(color: UIColor) -> UIImage {
        let rect: CGRect = CGRectMake(0, 0, 1, 1)
        UIGraphicsBeginImageContextWithOptions(CGSizeMake(1, 1), false, 1.0)
        color.setFill()
        UIRectFill(rect)
        let image: UIImage = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        return image
    }
}

Answer 4

He creado una sublcasa UIButton simple que utiliza el tintColor para sus colores de texto y borde y cuando se resalta cambia su fondo a tintColor .

class BorderedButton: UIButton {

required init?(coder aDecoder: NSCoder) {
    super.init(coder: aDecoder)
    layer.borderWidth = 1.0
    layer.borderColor = tintColor.CGColor
    layer.cornerRadius = 5.0
    clipsToBounds = true
    contentEdgeInsets = UIEdgeInsets(top: 8, left: 8, bottom: 8, right: 8)
    setTitleColor(tintColor, forState: .Normal)
    setTitleColor(UIColor.whiteColor(), forState: .Highlighted)
    setBackgroundImage(UIImage(color: tintColor), forState: .Highlighted)
}
}

Esto hace uso de una extensión UIImage que crea una imagen de un color, encontré ese código aquí: https://.com/a/33675160

Funciona mejor cuando se configura para que escriba Custom in interface builder, ya que el tipo de sistema predeterminado modifica levemente los colores cuando se resalta el botón.

Answer 5

Puede personalizar su botón y agregar var IBInspectable para que pueda configurarlo desde "Inspector de atributos" de StoryBoard. A continuación escribo ese código.

@IBDesignable
class BHButton: UIButton {

    /*
    // Only override draw() if you perform custom drawing.
    // An empty implementation adversely affects performance during animation.
    override func draw(_ rect: CGRect) {
        // Drawing code
    }
    */

    @IBInspectable lazy var isRoundRectButton : Bool = false

    @IBInspectable public var cornerRadius : CGFloat = 0.0 {
        didSet{
            setUpView()
        }
    }

    @IBInspectable public var borderColor : UIColor = UIColor.clear {
        didSet {
            self.layer.borderColor = borderColor.cgColor
        }
    }

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

    //  MARK:   Awake From Nib

    override func awakeFromNib() {
        super.awakeFromNib()
        setUpView()
    }

    override func prepareForInterfaceBuilder() {
        super.prepareForInterfaceBuilder()
        setUpView()
    }

    func setUpView() {
        if isRoundRectButton {
            self.layer.cornerRadius = self.bounds.height/2;
            self.clipsToBounds = true
        }
        else{
            self.layer.cornerRadius = self.cornerRadius;
            self.clipsToBounds = true
        }
    }

}

Answer 6

Puede usar esta subclase de UIButton para personalizar UIButton según sus necesidades.

visita este repositorio github para referencia

class RoundedRectButton: UIButton {

    var selectedState: Bool = false

    override func awakeFromNib() {
        super.awakeFromNib()
        layer.borderWidth = 2 / UIScreen.main.nativeScale
        layer.borderColor = UIColor.white.cgColor
        contentEdgeInsets = UIEdgeInsets(top: 0, left: 5, bottom: 0, right: 5)
    }


    override func layoutSubviews(){
        super.layoutSubviews()
        layer.cornerRadius = frame.height / 2
        backgroundColor = selectedState ? UIColor.white : UIColor.clear
        self.titleLabel?.textColor = selectedState ? UIColor.green : UIColor.white
    }

    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
        selectedState = !selectedState
        self.layoutSubviews()
    }
}

Answer 7

como sugerencia adicional, asegúrese de que su botón no sea una subclase de ninguna clase personalizada en el guión gráfico, en tal caso, el mejor lugar para el código debe ser en clase personalizada; el código de causa solo funciona fuera de la clase personalizada si su botón es la subclase En la clase de UIButton y su salida, espero que esto ayude a cualquiera a preguntarse por qué las radios de esquina no se aplican a mi botón desde el código.

Answer 8

Para hacer este trabajo en el guión gráfico (Interface Builder Inspector)

Con la ayuda de IBDesignable , podemos agregar más opciones al Inspector de Interface Builder para UIButton y modificarlas en el guión gráfico. Primero, agregue el siguiente código a su proyecto.

@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)
        }
    }
}

Luego, simplemente configure los atributos de los botones en el guión gráfico.

Answer 9

Utilice button.layer.cornerRadius , button.layer.borderColor y button.layer.borderWidth . Tenga en cuenta que borderColor requiere un CGColor , por lo que podría decir (Swift 3/4):

button.backgroundColor = .clear
button.layer.cornerRadius = 5
button.layer.borderWidth = 1
button.layer.borderColor = UIColor.black.cgColor

Answer 10

   @IBOutlet weak var yourButton: UIButton! {
        didSet{
            yourButton.backgroundColor = .clear
            yourButton.layer.cornerRadius = 10
            yourButton.layer.borderWidth = 2
            yourButton.layer.borderColor = UIColor.white.cgColor
        }
    }

Answer 11

@IBOutlet weak var button: UIButton!

...

Creo que para el radio lo suficiente este parámetro:

button.layer.cornerRadius = 5