Como criar bordas no UIButton?

Uso o botão personalizado no meu aplicativo chamado "addButton" e desejo delimitá-lo com a cor branca. Como posso colocar a borda branca com o botão personalizado?

Você pode definir as propriedades da borda no CALayer acessando a propriedade da camada do botão.

Primeiro, adicione Quartzo

#import <QuartzCore/QuartzCore.h>

Definir propriedades:

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

Vejo:

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

O CALayer no link acima permite definir outras propriedades como raio do canto, maskToBounds etc ...

Além disso, um bom artigo sobre diversão com botões:

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

É muito simples, basta adicionar o cabeçalho quartzCore no seu arquivo (para isso você precisa adicionar a estrutura de quartzo ao seu projeto)

e depois faça isso

[[button layer] setCornerRadius:8.0f];

[[button layer] setMasksToBounds:YES];

[[button layer] setBorderWidth:1.0f];

você pode alterar os valores flutuantes, conforme necessário.

desfrutar.

Aqui estão alguns códigos modernos típicos ...

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;

essa é uma aparência semelhante aos controles segmentados.

ATUALIZAÇÃO para Swift:

• Não há necessidade de adicionar "QuartzCore"

Apenas faça:

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

E rapidamente, você não precisa importar "QuartzCore / QuartzCore.h"

Apenas use:

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

ou

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

O problema ao definir a camada borderWidthe borderColoré que, quando você toca no botão, a borda não anima o efeito de destaque.

Obviamente, você pode observar os eventos do botão e alterar a cor da borda de acordo, mas isso parece desnecessário.

Outra opção é criar uma UIImage extensível e defini-la como imagem de fundo do botão. Você pode criar um conjunto de imagens em seus Images.xcassets assim:

Em seguida, defina-a como imagem de fundo do botão:

Se a sua imagem for uma imagem de modelo, você poderá definir a cor da tonalidade do botão e a borda mudará:

Agora a borda será destacada com o restante do botão quando tocada.

Para alterar o botão Raio, Cor e Largura, defino assim:

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;

Aqui está uma versão atualizada ( Swift 3.0.1 ) da resposta 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: "")
            }
        }
    }
}

O botão resultante pode ser usado dentro do seu StoryBoard, graças às tags @IBDesignablee @IBInspectable.

Além disso, as duas propriedades definidas permitem definir a largura e a cor da borda diretamente no construtor de interfaces e visualizar o resultado.

Outras propriedades podem ser adicionadas de maneira semelhante, para o raio da borda e destacar o tempo de desbotamento.

Você não precisa importar QuartzCore.hagora. Tomando iOS 8 sdk e Xcode 6.1 em referência.

Use diretamente:

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

Aqui está uma UIButtonsubclasse que suporta a animação de estado destacada sem usar imagens. Também atualiza a cor da borda quando o modo de tonalidade da vista é alterado.

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

Aparência:

Isso pode ser alcançado em vários métodos no Swift 3.0. Worked on Latest version August - 2017

Opção 1:

Atribua diretamente os valores da propriedade borderWidth para o botão UI:

  btnUserButtonName.layer.borderWidth = 1.0

Defina o título com os valores de cor padrão para o botão da interface do usuário:

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

Defina Borda com cor padrão para os valores da propriedade de borda da interface do usuário Botão:

btnUserButtonName.layer.borderColor = UIColor.red

Defina Cor definida pelo usuário para os valores da propriedade da borda da interface do usuário Botão:

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

Opção 2: [Recomendado]

Use o método Extension, para que o botão do aplicativo pareça consistente e sem necessidade de repetir várias linhas de código em todos os lugares.

//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 no código:

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

btnUserButtonName.setBordersSettings()

Saída do método de extensão Botão:

Atualize com o Swift 3

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

**** Em Swift 3 ****

Para criar borda

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

Para fazer o canto arredondado

 btnName.layer.cornerRadius = 5

Swift 5

button.layer.borderWidth = 2

Para alterar a cor da borda, use

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