¿Cómo hacer un botón redondeado simple en Storyboard?

Acabo de comenzar a aprender el desarrollo de iOS, no puedo encontrar cómo hacer un botón redondeado simple. Encuentro recursos para versiones antiguas. ¿Necesito establecer un fondo personalizado para un botón? En Android, solo usaría un parche 9, pero sé que iOS no tiene esta capacidad.

Para hacerlo en el guión gráfico, debe usar una imagen para el botón.

Alternativamente, puede hacerlo en código:

 btn.layer.cornerRadius = 10
 btn.clipsToBounds = true

Respuesta corta: SI

Absolutamente puede hacer un botón redondeado simple sin la necesidad de una imagen de fondo adicional o escribir ningún código para el mismo. Simplemente siga la captura de pantalla que se muestra a continuación para establecer los atributos de tiempo de ejecución del botón y obtener el resultado deseado.

No se mostrará en el, Storyboardpero funcionará bien cuando ejecute el proyecto.

Nota:
La 'Ruta de la clave' layer.cornerRadius y el valor es 5. El valor debe cambiarse de acuerdo con la altura y el ancho del botón. La fórmula es la altura del botón * 0.50. Así que juegue con el valor para ver el botón redondeado esperado en el simulador o en el dispositivo físico. Este procedimiento se verá tedioso cuando tenga más de un botón para redondear en el guión gráfico.

Puedes hacer algo como esto:

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

Establezca la clase MyButtonen Identity Inspectory en IB tendrá la roundedpropiedad:

1. Crea una clase de Cocoa Touch.

2. Inserte el código en la clase 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 la imagen.

Encontré que la forma más fácil de hacer esto es configurando cornerRadius a la mitad de la altura de la vista.

button.layer.cornerRadius = button.bounds.size.height/2

Puede conectar su IBOutletbotón desde el guión gráfico.

Entonces puedes configurar corner radius su botón para hacer su esquina.

por ejemplo, tu outletes myButtonentonces,

Obj - C

 self.myButton.layer.cornerRadius = 5.0 ;

Rápido

  myButton.layer.cornerRadius = 5.0

Si quieres botón exacta redonda a continuación, el botón es widthy heightdebe ser equaly cornerRadiusdebe ser igual a la altura o anchura / 2 (la mitad de la anchura o altura).

Como otra respuesta ha sugerido para realizar la mayor parte de este trabajo en código, solo una respuesta proporcionó una forma de ver sus cambios en la interfaz IB del guión gráfico. Mi respuesta va más allá de esa respuesta al permitirle cambiar el radio de esquina de la vista, botón, imagen, etc.

Por favor, eche un vistazo al siguiente código. Para usar este código, cree un nuevo archivo rápido llamado RoundedView o como quiera llamarlo, luego vaya a su guión gráfico y cambie la clase a "RoundedView", "RoundedImageView" o "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
    }
}

Al agregar layer.cornerRadiusel guión gráfico, asegúrese de no tener espacios iniciales o finales. Si copia y pega, es posible que se inserten espacios. Sería bueno si XCode dijera algún tipo de advertencia o error.

¡¡Prueba esto!!

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

La extensión es la mejor opción para este problema. Crear una extensión de Vista o Botón

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

Llámalo desde el código

button.roundCorners()

Estoy usando Xcode versión 11.4

En el inspector de atributos, puede definir el radio de la esquina.

No se mostrará en el Storyboard, pero funcionará bien cuando ejecute el proyecto.

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