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

navigation bar ios

Question

Acabo de comenzar a aprender el desarrollo de iOS, no puedo encontrar cómo hacer un botón redondeado simple. Encuentro recursos para versiones anteriores. ¿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.

Answer 1

Respuesta corta: SI

Puede crear 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 configurar los atributos de tiempo de ejecución del botón y obtener el resultado deseado.

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

Nota:
La layer.cornerRadius ''Key Path'' 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 para ello es la altura del botón * 0.50. Así que juegue alrededor del 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.

Answer 2

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.

Answer 3

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

Answer 4

Al agregar layer.cornerRadius en el guión gráfico, asegúrese de no tener espacios layer.cornerRadius o finales. Si copia y pega, puede insertar espacios. Sería bueno si XCode dijera algún tipo de advertencia o error.

Answer 5

Como otra respuesta ha sugerido realizar la mayor parte de este trabajo en código, solo una respuesta realmente 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 la esquina Radio 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
}
}

Answer 6

Descubrí que la forma más fácil de hacer esto es estableciendo la esquina Radio a la mitad de la altura de la vista.

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

Answer 7

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

Answer 8

Puede conectar IBOutlet de su botón desde el guión gráfico.

Luego puede establecer el corner radius de la corner radius de su botón para hacer que sea una esquina redonda.

por ejemplo, tu outlet es myButton entonces,

Obj - C

 self.myButton.layer.cornerRadius = 5.0 ;

Rápido

 myButton.layer.cornerRadius = 5.0

Si desea un botón redondo exacto, el width y la height su botón deben ser equal y cornerRadius debe ser igual a la altura o el ancho / 2 (la mitad del ancho o la altura).

Answer 9

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 en MyButton en Identity Inspector y en IB tendrá una propiedad rounded :

Answer 10

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