Como fazer um botão arredondado simples no Storyboard?

104

Acabei de começar a aprender desenvolvimento iOS, não consigo descobrir como fazer botão arredondado simples. Eu encontro recursos para versões antigas. Preciso definir um plano de fundo personalizado para um botão? No Android, eu usaria apenas um patch 9, mas sei que o iOS não tem esse recurso.

insira a descrição da imagem aqui

Gintas_
fonte

Respostas:

82

Para fazer isso no storyboard, você precisa usar uma imagem para o botão.

Alternativamente, você pode fazer isso no código:

 btn.layer.cornerRadius = 10
 btn.clipsToBounds = true
realtimez
fonte
2
por que clipsToBounds é necessário? Parece que essa sombra não funciona até eu removê-la.
Gintas_
1
Boa resposta, mas dá para fazer em IB, sem imagens. Ver abaixo.
zontar
223

Resposta curta: SIM

Você pode fazer um botão arredondado simples sem a necessidade de uma imagem de fundo adicional ou escrever qualquer código para o mesmo. Basta seguir a captura de tela fornecida a seguir para definir os atributos de tempo de execução do botão e obter o resultado desejado.

Ele não aparecerá no Storyboardmas funcionará bem quando você executar o projeto.

insira a descrição da imagem aqui

Nota:
O 'Caminho da chave' layer.cornerRadius e o valor é 5. O valor precisa ser alterado de acordo com a altura e largura do botão. A fórmula para isso é a altura do botão * 0,50. Portanto, brinque com o valor para ver o botão arredondado esperado no simulador ou no dispositivo físico. Este procedimento parecerá tedioso quando você tiver mais de um botão para arredondar no storyboard.

Nishant
fonte
9
Por favor, adicione um comentário ao votar negativamente.
Nishant
7
é decepcionante que o IB não possa mostrar isso como um aplicativo de desenho comum.
William Cerniuk
2
@WilliamCerniuk: Na verdade, pode. Confira nshipster.com/ibinspectable-ibdesignable
Nishant
A configuração dos atributos de tempo de execução definidos pelo usuário realmente funciona, podendo ser visualizados no simulador após a construção.
Cons Bulaquena
Como diz a resposta aceita, você também pode precisar adicionar um caminho de chave booleana clipsToBoundspara que isso funcione.
Máx.
86

Você pode fazer algo assim:

@IBDesignable class MyButton: UIButton
{
    override func layoutSubviews() {
        super.layoutSubviews()

        updateCornerRadius()
    }

    @IBInspectable var rounded: Bool = false {
        didSet {
            updateCornerRadius()
        }
    }

    func updateCornerRadius() {
        layer.cornerRadius = rounded ? frame.size.height / 2 : 0
    }
}

Defina a classe como MyButtonem Identity Inspectore no IB você terá a roundedpropriedade:

insira a descrição da imagem aqui

ChikabuZ
fonte
4
De longe a melhor resposta. Aprendi algo novo hoje incrível!
Marcar
2
Esta resposta não está completa. Quando você iniciar seu aplicativo, o xCode usará o tamanho do quadro da visualização no construtor de interface, não o tamanho real do quadro quando o aplicativo estiver em execução.
Simon Backx de
2
Você também pode usar "didSet" em vez de "willSet" e remover o argumento isRounded.
Simon Backx de
1
Se você usar uma imagem de plano de fundo, defina layer.masksToBounds = truetambém
zontar
34
  1. Crie uma classe Cocoa Touch.

insira a descrição da imagem aqui

  1. Insira o código na classe RoundButton.

    import UIKit
    
    @IBDesignable
    class RoundButton: UIButton {
    
        @IBInspectable var cornerRadius: CGFloat = 0{
            didSet{
            self.layer.cornerRadius = cornerRadius
            }
        }
    
        @IBInspectable var borderWidth: CGFloat = 0{
            didSet{
                self.layer.borderWidth = borderWidth
            }
        }
    
        @IBInspectable var borderColor: UIColor = UIColor.clear{
            didSet{
                self.layer.borderColor = borderColor.cgColor
            }
        }
    }
  2. Consulte a imagem.

insira a descrição da imagem aqui

anson
fonte
Pare de postar a mesma resposta repetidamente. Isso é considerado ruído. Adapte suas respostas às diferentes perguntas ou, se forem realmente a mesma pergunta, você pode sinalizá-las como duplicatas (e quando tiver reputação suficiente, vote para fechar).
elixenida de
Não sei se outros encontraram isso também, mas assim que eu definir a classe como um botão e dar a ela um raio, largura da borda e cor da borda, o Xcode (9.2) gera um erro de que houve um erro de renderização. A criação do aplicativo é bem-sucedida, mas o "!" continua sendo exibido. Só estou dizendo ... Voltei para a solução somente de código (embora essa fosse realmente uma forma elegante).
Aeger
10

Descobri que a maneira mais fácil de fazer isso é definindo cornerRadius para a metade da altura da visualização.

button.layer.cornerRadius = button.bounds.size.height/2
FrankkieNL
fonte
Não, eu não fiz. Se sua altura e largura forem iguais (portanto, seria quadrado), você obteria um círculo. Mas se a largura for maior que a altura, o botão estará correto.
FrankkieNL
2
Você está certo, eu perdi a imagem incluída na pergunta que mostra o que o autor da postagem estava realmente procurando corresponde mais à sua resposta do que à resposta aceita - voto positivo
Michael Hudson
4

Você pode conectar seu IBOutletbotão do storyboard.

Então você pode definir corner radius o botão para torná-lo redondo.

por exemplo, seu outleté myButtonentão,

Obj - C

 self.myButton.layer.cornerRadius = 5.0 ;

Rápido

  myButton.layer.cornerRadius = 5.0

Se você quiser um botão redondo exato, então o seu botão widthe heightdeve ser equale cornerRadiusdeve ser igual a altura ou largura / 2 (metade da largura ou altura).

Ketan Parmar
fonte
4

Como outra resposta sugeriu realizar a maior parte deste trabalho em código, apenas uma resposta realmente forneceu uma maneira de visualizar suas alterações na interface do storyboard IB. Minha resposta vai além dessa resposta, permitindo que você altere o cornerRadius da visualização, botão, imagem, etc.

Por favor, dê uma olhada no código a seguir. Para usar este código, crie um novo arquivo swift chamado RoundedView ou como você gostaria de chamá-lo, então vá para o seu storyboard e altere a classe para "RoundedView", "RoundedImageView" ou "RoundedButton".

import UIKit

@IBDesignable class RoundedImage: UIImageView
{
    override func layoutSubviews() {
        super.layoutSubviews()

        updateCornerRadius()
    }

    @IBInspectable var rounded: Bool = false {
        didSet {
            updateCornerRadius()
        }
    }

    @IBInspectable var cornerRadius: CGFloat = 0.1 {
        didSet {
            updateCornerRadius()
        }
    }

    func updateCornerRadius() {
        layer.cornerRadius = rounded ? cornerRadius : 0
        layer.masksToBounds = rounded ? true : false
    }
}

@IBDesignable class RoundedView: UIView
{
    override func layoutSubviews() {
        super.layoutSubviews()

        updateCornerRadius()
    }

    @IBInspectable var rounded: Bool = false {
        didSet {
            updateCornerRadius()
        }
    }

    @IBInspectable var cornerRadius: CGFloat = 0.1 {
        didSet {
            updateCornerRadius()
        }
    }

    func updateCornerRadius() {
        layer.cornerRadius = rounded ? cornerRadius : 0
        layer.masksToBounds = rounded ? true : false
    }
}

@IBDesignable class RoundedButton: UIButton
{
    override func layoutSubviews() {
        super.layoutSubviews()

        updateCornerRadius()
    }

    @IBInspectable var rounded: Bool = false {
        didSet {
            updateCornerRadius()
        }
    }

    @IBInspectable var cornerRadius: CGFloat = 0.1 {
        didSet {
            updateCornerRadius()
        }
    }

    func updateCornerRadius() {
        layer.cornerRadius = rounded ? cornerRadius : 0
        layer.masksToBounds = rounded ? true : false
    }
}
Joseph Shenton
fonte
1

Ao adicionar layer.cornerRadiuso storyboard, certifique-se de não ter espaços à esquerda ou à direita. Se você copiar e colar, poderá inserir espaços. Seria bom se o XCode dissesse algum tipo de aviso ou erro.

venki mohan
fonte
0

Experimente !!

 override func viewDidLoad() {
   super.viewDidLoad()

   var button = UIButton.buttonWithType(.Custom) as UIButton
   button.frame = CGRectMake(160, 100, 200,40)

   button.layer.cornerRadius =5.0
   button.layer.borderColor = UIColor.redColor().CGColor
   button.layer.borderWidth = 2.0

   button.setImage(UIImage(named:"Placeholder.png"), forState: .Normal)
   button.addTarget(self, action: "OnClickroundButton", forControlEvents: .TouchUpInside)
   button.clipsToBounds = true

   view.addSubview(button)
}
    func OnClickroundButton() {
   NSLog(@"roundButton Method Called");
}
Sanjeet verma
fonte
0

A extensão é a melhor opção para este problema. Crie uma extensão de Exibir ou Botão

public extension UIView {
  //Round the corners
  func roundCorners(){
    let radius = bounds.maxX / 16
    layer.cornerRadius = radius
  }
}

Chame pelo código

button.roundCorners()
muhammad usman
fonte
0

Estou usando o Xcode versão 11.4

No inspetor de atributos, você pode definir o raio do canto.

Não será mostrado no Storyboard, mas funcionará bem quando você executar o projeto.

insira a descrição da imagem aqui

casillas
fonte
-1
import UIKit

@IBDesignable class MyButton: UIButton
{
    override func layoutSubviews() {
        super.layoutSubviews()


    }

    func updateCornerRadius(radius:CGFloat) {
        layer.cornerRadius = radius
    }
    @IBInspectable var cornerRadius:CGFloat = 0{
        didSet{
            updateCornerRadius(radius: cornerRadius)
        }
    }
}
Rodrigo Salomão
fonte