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!

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.


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


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.


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.


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;

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

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

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.



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

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


0

Para iOS SWift 4

button.layer.cornerRadius = 25;
button.layer.masksToBounds = true;

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

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 
    }
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.