Cómo redondear las esquinas de un botón

182

Tengo una imagen rectangular (jpg) y quiero usarla para llenar el fondo de un botón con una esquina redondeada en xcode.

Escribí lo siguiente:

UIButton *button = [[UIButton buttonWithType:UIButtonTypeRoundedRect] retain];
CGRect frame = CGRectMake(x, y, cardWidth, cardHeight);
button.frame = frame;
[button setBackgroundImage:backImage forState:UIControlStateNormal];

Sin embargo, el botón que obtengo con ese enfoque no tiene sus esquinas redondeadas: en cambio, es un rectángulo plano que se ve exactamente como mi imagen original. ¿Cómo puedo obtener una imagen con una esquina redondeada para representar mi botón?

¡Gracias!

double07
fuente

Respuestas:

436

Creo que tengo su problema, probé la siguiente solución con UITextArea y supongo que esto también funcionará con UIButton.

En primer lugar, importe esto en su archivo .m:

#import <QuartzCore/QuartzCore.h>

y luego en su loadViewmétodo agregue las siguientes líneas

    yourButton.layer.cornerRadius = 10; // this value vary as per your desire
    yourButton.clipsToBounds = YES;

Espero que esto funcione para ti y si es así, comunícate.

devsri
fuente
66
También funciona con el inspector de "Atributos de tiempo de ejecución definidos por el usuario"
Avi Cherry
¡Funciona para Swift también! Simplemente cambie SÍ a verdadero.
Andrew Thomas
119

Puedes lograrlo con estos atributos RunTime

ingrese la descripción de la imagen aquí

Podemos hacer un botón personalizado. Simplemente vea la captura de pantalla adjunta.

amablemente preste atención:

en tiempo de ejecución, los atributos para cambiar el color del borde siguen estas instrucciones

  1. crear clase de categoría de CALayer

  2. en el archivo h

    @property(nonatomic, assign) UIColor* borderIBColor;
  3. en el archivo m:

    -(void)setBorderIBColor:(UIColor*)color {
        self.borderColor = color.CGColor;
    }
    
    -(UIColor*)borderIBColor {
        return [UIColor colorWithCGColor:self.borderColor];
    }

ahora en adelante para configurar la captura de pantalla de verificación del color del borde

respuesta actualizada

Gracias

Krutarth Patel
fuente
44
¿Solo yo o la información en la respuesta está incompleta? Realmente no funciona. Actualización: funciona siempre que no lo especifique borderColor. Pero siempre usa negro para el color de la frontera.
Jonny
3
Respuesta extendida: el color establecido en el IB es probablemente del tipo UIColor que no funciona con borderColor, que es de CGColorRef. O algo así. Entonces, una solución es crear una categoría en CALayer, con algo como @property(nonatomic, assign) UIColor* borderIBColor;(que no entre en conflicto con otro nombre) en el archivo de encabezado, y la implementación es:-(void)setBorderIBColor:(UIColor*)color{self.borderColor = color.CGColor;} -(UIColor*)borderIBColor{return [UIColorcolorWithCGColor:self.borderColor];}
Jonny
1
Si no desea un color de borde, configure borderRadius en 0 y no tendrá uno.
jungledev
¿Qué hay de Swift?
Jayprakash Dubey
1
@ JayprakashDubey creo una extensión de CALayer.
Krutarth Patel
14

Es posible que desee consultar mi biblioteca llamada DCKit . Está escrito en la última versión de Swift .

Podrá crear un botón de esquina redondeada / campo de texto desde el generador de Interfaz directamente:

DCKit: botón redondeado

También tiene muchas otras características interesantes, como campos de texto con validación, controles con bordes, bordes discontinuos, vistas de círculo y rayita, etc.

Andrey Gordeev
fuente
11

Empujando hacia el límite del radio de la esquina hacia arriba para obtener un círculo:

    self.btnFoldButton.layer.cornerRadius = self.btnFoldButton.frame.height/2.0;

ingrese la descripción de la imagen aquí

Si el marco del botón es un cuadrado, no importa frame.height o frame.width. De lo contrario, use el más grande de los dos.

Javier Calatrava Llavería
fuente
7

Importe el marco QuartCore si no está en su proyecto existente, luego importe #import <QuartzCore/QuartzCore.h>en viewcontroller.m

UIButton *button = [[UIButton buttonWithType:UIButtonTypeRoundedRect]];
CGRect frame = CGRectMake(x, y, width, height); // set values as per your requirement
button.layer.cornerRadius = 10;
button.clipsToBounds = YES;
iAnkit
fuente
6
UIButton* closeBtn = [[UIButton alloc] initWithFrame:CGRectMake(10, 50, 90, 35)];
//Customise this button as you wish then
closeBtn.layer.cornerRadius = 10;
closeBtn.layer.masksToBounds = YES;//Important
Vinay Mahipal
fuente
4

Primero ajuste ancho = 100 y Altura = 100 del botón

Objetivo C Solución

YourBtn1.layer.cornerRadius=YourBtn1.Frame.size.width/2;
YourBtn1.layer.borderColor=[uicolor blackColor].CGColor;
YourBtn1.layer.borderWidth=1.0f;

Solución Swift 4

YourBtn1.layer.cornerRadius = YourBtn1.Frame.size.width/2
YourBtn1.layer.borderColor = UIColor.black.cgColor
YourBtn1.layer.borderWidth = 1.0
iOS Lifee
fuente
2

Si desea una esquina redondeada solo a una o dos esquinas, etc., lea esta publicación:

[ObjC] - UIButton con esquina redondeada - http://goo.gl/kfzvKP

Es una subclase XIB / Storyboard. Importar y establecer bordes sin escribir código.

elp
fuente
2

Para Swift:

button.layer.cornerRadius = 10.0
pableiros
fuente
2

actualizado para Swift 3:

usado debajo del código para hacer que la esquina UIButton sea redonda:

 yourButtonOutletName.layer.cornerRadius = 0.3 *
        yourButtonOutletName.frame.size.height
Kiran jadhav
fuente
2

Prueba mi código. Aquí puede establecer todas las propiedades de UIButton como el color del texto, el color de fondo, el radio de la esquina, etc.

extension UIButton {
    func btnCorner() {
        layer.cornerRadius = 10
        clipsToBounds = true
        backgroundColor = .blue
    }
}

Ahora llama así

yourBtnName.btnCorner()
iOS
fuente
0

Para iOS SWift 4

button.layer.cornerRadius = 25;
button.layer.masksToBounds = true;
Jayesh Nai
fuente
0

ingrese la descripción de la imagen aquí

Para el objetivo C :

submitButton.layer.cornerRadius = 5;
submitButton.clipsToBounds = YES;

Para Swift :

submitButton.layer.cornerRadius = 5
submitButton.clipsToBounds = true
Sr. Javed Multani
fuente
0

Actualización de Swift 4

También probé muchas opciones, pero no pude arrinconar mi ronda UIButton. Agregué el código de radio de la esquina dentro de viewDidLayoutSubviews()Solucionado mi problema.

func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()
        anyButton.layer.cornerRadius = anyButton.frame.height / 2
    }

También podemos ajustar la esquina Radio de la siguiente manera

func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()
        anyButton.layer.cornerRadius = 10 //Any suitable number as you prefer can be applied 
    }
Adwait Gaikwad
fuente