Como fazer um botão arredondado simples no Storyboard?

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.

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

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.

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.

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:

1. Crie uma classe Cocoa Touch.

2. 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
           }
       }
   }

3. Consulte a imagem.

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

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).

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

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.

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");
}

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()

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.

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