Como arredondar os cantos de um botão

182

Eu tenho uma imagem retangular (jpg) e quero usá-la para preencher o plano de fundo de um botão com canto arredondado no xcode.

Eu escrevi o seguinte:

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

No entanto, o botão que recebo com essa abordagem não tem seus cantos arredondados: é um retângulo simples que se parece exatamente com a minha imagem original. Como posso obter uma imagem com canto arredondado para representar meu botão?

Obrigado!

double07
fonte

Respostas:

436

Acho que entendi seu problema, tentei a seguinte solução com o UITextArea e suponho que isso também funcionará com o UIButton.

Antes de tudo, importe isso no seu arquivo .m -

#import <QuartzCore/QuartzCore.h>

e depois no seu loadViewmétodo adicione as seguintes linhas

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

Espero que isso funcione para você e se sim, comunique-se.

devsri
fonte
6
Também funciona com o "User Defined Runtime Atributos" Inspetor
Avi Cereja
Também funciona para agilidade! Apenas mude SIM para verdadeiro.
Andrew Thomas
119

Você pode conseguir com este Atributos de Tempo de Execução

insira a descrição da imagem aqui

podemos fazer o botão personalizado. basta ver a captura de tela anexada.

por favor, preste atenção:

nos atributos de tempo de execução para alterar a cor da borda, siga estas instruções

  1. criar classe de categoria de CALayer

  2. no arquivo h

    @property(nonatomic, assign) UIColor* borderIBColor;
  3. no arquivo m:

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

agora em diante para definir a captura de tela de verificação de cores da borda

resposta atualizada

obrigado

Krutarth Patel
fonte
4
Apenas eu ou as informações na resposta estão incompletas? Realmente não funciona. Atualização: funciona enquanto eu não especificar borderColor. Mas, em seguida, ele sempre usa preto para a bordaColor.
Jonny
3
Resposta estendida: A cor definida no IB provavelmente é do tipo UIColor, que não funciona com borderColor, que é CGColorRef. Ou algo assim. Portanto, uma solução é criar uma categoria no CALayer, com algo como @property(nonatomic, assign) UIColor* borderIBColor;(que não se choca com outro nome) no arquivo de cabeçalho, e a implementação é:-(void)setBorderIBColor:(UIColor*)color{self.borderColor = color.CGColor;} -(UIColor*)borderIBColor{return [UIColorcolorWithCGColor:self.borderColor];}
Jonny
1
Se você não quiser uma cor de borda, defina o borderRadius como 0 e você não terá uma!
jungledev
E o Swift?
Jayprakash Dubey
1
@JayprakashDubey eu crio a extensão do CALayer.
precisa saber é o seguinte
14

Você pode conferir minha biblioteca chamada DCKit . Está escrito na versão mais recente do Swift .

Você seria capaz de criar um botão de canto arredondado / campo de texto diretamente do construtor Interface:

DCKit: botão arredondado

Ele também possui muitos outros recursos interessantes, como campos de texto com validação, controles com bordas, bordas tracejadas, visualizações de círculo e linha fina etc.

Andrey Gordeev
fonte
11

Pressionando o raio do canto dos limites para cima para obter um círculo:

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

insira a descrição da imagem aqui

Se o quadro do botão for um quadrado, não importa o quadro.a altura ou o quadro.width. Caso contrário, use o maior dos dois.

Javier Calatrava Llavería
fonte
7

Importe a estrutura do QuartCore se ela não estiver presente no projeto existente e importe #import <QuartzCore/QuartzCore.h>no 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
fonte
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
fonte
4

Primeira largura definida = 100 e Altura = 100 do botão

Solução Objective C

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

Solução Swift 4

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

Se você deseja um canto arredondado apenas para um canto ou dois cantos, etc ... leia esta postagem:

[ObjC] - UIButton com canto arredondado - http://goo.gl/kfzvKP

É uma subclasse XIB / Storyboard. Importe e defina bordas sem escrever código.

elp
fonte
2

Para Swift:

button.layer.cornerRadius = 10.0
pableiros
fonte
2

atualizado para o Swift 3:

usado abaixo do código para arredondar o canto do UIButton:

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

Experimente o meu código. Aqui você pode definir todas as propriedades do UIButton como cor do texto, cor do plano de fundo, raio do canto etc.

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

Agora ligue assim

yourBtnName.btnCorner()
iOS
fonte
0

Para iOS SWift 4

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

insira a descrição da imagem aqui

Para o objetivo C :

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

Para Swift :

submitButton.layer.cornerRadius = 5
submitButton.clipsToBounds = true
Mr.Javed Multani
fonte
0

Atualização do Swift 4

Eu também tentei muitas opções, mas ainda não consegui encurralar meu UIButton. Adicionei o código do raio do canto no viewDidLayoutSubviews()problema Resolvido meu.

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

Também podemos ajustar o cornerRadius da seguinte forma

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