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!

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.


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


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.


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.


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;

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

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

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.



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

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


0

Para iOS SWift 4

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

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

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 
    }
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.