Cor da borda UITextField


133

Eu realmente tenho um grande desejo de definir minha própria cor para a borda UITextField. Mas até agora pude descobrir como alterar apenas o estilo da linha de borda.

Eu usei a propriedade background para definir a cor de fundo da seguinte maneira:

self.textField.backgroundColor = textFieldColor;

Mas eu tenho que mudar a cor da borda UITextField também. E minha pergunta era sobre como alterar a cor da borda.


Muitas respostas úteis, mas apenas uma ( stackoverflow.com/a/5387607/826946 ) mencionou algo que eu encontrei chave: textField.borderStyle = UITextField.BorderStyle.none. Sem isso, recebo traços da borda interna. Aparentemente, uma vez que você não usa a borda interna e começa a definir a sua própria, você precisa dizer que não a deseja usando borderStyle = none e depois define todos os parâmetros (cor, cornerRadius e borderWidth)
Andy Weinstein

Respostas:


274

Importar QuartzCoreestrutura na sua classe:

#import <QuartzCore/QuartzCore.h>

e para alterar a cor da borda, use o seguinte snippet de código (estou definindo-o como redColor),

    textField.layer.cornerRadius=8.0f;
    textField.layer.masksToBounds=YES;
    textField.layer.borderColor=[[UIColor redColor]CGColor];
    textField.layer.borderWidth= 1.0f;

Para voltar ao layout original, basta definir a cor da borda para limpar a cor,

    serverField.layer.borderColor=[[UIColor clearColor]CGColor];

em código rápido

    textField.layer.borderWidth = 1
    textField.layer.borderColor = UIColor.whiteColor().CGColor

3
É #import <QuartzCore / QuartzCore.h> em vez de QuartCore (você esqueceu a z)
cldrr

54
No iOS 7, você deve definir uma largura da borda ou a cor não entra em vigor.
Micah

1
Como iniciante, isso não faz sentido para mim. Se eu iniciar um aplicativo vazio e em branco, vá para o storyboard e adicione um campo TextView. Onde eu importo o quartzcore? Onde adiciono as informações de largura da borda acima? O que é "textField" e como ele sabe de qual campo de texto estou falando?
Nathan McKaskle

1
@ Sephethus, se você ainda não entendeu, é isso que você deve fazer: você deve "conectar" o campo de texto que você criou no storyboard e alterar essas propriedades programaticamente . Depois de conectar o storyboard, você entra no seu código (por exemplo, em viewDidLoad) e altera essas propriedades dizendo self.myTextField.layer.cornerRadiusetc. Essas alterações entrarão em vigor assim que você iniciar o aplicativo, mas não poderá ver as alterações no Storyboard. Se isso não faz sentido para você, sugiro que você vá a um site, por exemplo, Ray Wenderlich, e leia algumas dicas para iniciantes.
Aleksander

@NathanMcKaskle "Para onde importo o quartzcore?" Você o adiciona na parte superior do seu arquivo ViewController.h. "O que é" textField "e como ele sabe de qual campo de texto estou falando?" Você pode criar um campo de texto 'local' IBOutlet var e conectá-lo ao TextField (não ao TextView) que você acabou de colocar no Storyboard. Para obter mais informações, consulte aqui: hubpages.com/technology/… "Onde adiciono as informações da largura da borda acima?" Em qualquer lugar, mas de preferência, na função viewDidLoad.
Chen Li Yong

21

Tente o seguinte:

UITextField *theTextFiels=[[UITextField alloc]initWithFrame:CGRectMake(40, 40, 150, 30)];
    theTextFiels.borderStyle=UITextBorderStyleNone;
    theTextFiels.layer.cornerRadius=8.0f;
    theTextFiels.layer.masksToBounds=YES;
        theTextFiels.backgroundColor=[UIColor redColor];
    theTextFiels.layer.borderColor=[[UIColor blackColor]CGColor];
    theTextFiels.layer.borderWidth= 1.0f;

    [self.view addSubview:theTextFiels];
    [theTextFiels release];

e importe QuartzCore:

#import <QuartzCore/QuartzCore.h>

17

Importe a seguinte classe:

#import <QuartzCore/QuartzCore.h> 

// Código para definir a cor cinza da borda do campo de texto

[[textField layer] setBorderColor:[[UIColor colorWithRed:171.0/255.0
                                                   green:171.0/255.0
                                                    blue:171.0/255.0
                                                   alpha:1.0] CGColor]];

Substitua 171.0pelo número da cor correspondente, conforme necessário.


14

esta pergunta aparece bastante em uma pesquisa no Google e funcionou na maior parte do tempo! Descobri que a resposta de Salman Zaidi estava parcialmente correta para o iOS 7.

Você precisa fazer uma modificação no código "revertendo". Eu descobri que o seguinte para reverter funcionou perfeitamente:

textField.layer.cornerRadius = 0.0f;
textField.layer.masksToBounds = YES;
textField.layer.borderColor = [[UIColor blackColor] CGColor];
textField.layer.borderWidth = 0.0f;

Entendo que isso provavelmente ocorre devido a alterações no iOS 7.


10

Para simplificar essas ações a partir da resposta aceita, você também pode criar Categoria para UIView(pois isso funciona para todas as subclasses do UIView, não apenas para campos de texto:

UIView + Additions.h:

#import <Foundation/Foundation.h>

@interface UIView (Additions)
- (void)setBorderForColor:(UIColor *)color 
                    width:(float)width 
                   radius:(float)radius;
@end

UIView + Adições.m:

#import "UIView+Additions.h"

@implementation UIView (Additions)

- (void)setBorderForColor:(UIColor *)color 
                    width:(float)width
                   radius:(float)radius
{
    self.layer.cornerRadius = radius;
    self.layer.masksToBounds = YES;
    self.layer.borderColor = [color CGColor];
    self.layer.borderWidth = width;
}

@end

Uso:

#import "UIView+Additions.h"
//...
[textField setBorderForColor:[UIColor redColor]
                       width:1.0f
                      radius:8.0f];

9

Se você usar um TextField com cantos arredondados, use este código:

    self.TextField.layer.cornerRadius=8.0f;
    self.TextField.layer.masksToBounds=YES;
    self.TextField.layer.borderColor=[[UIColor redColor]CGColor];
    self.TextField.layer.borderWidth= 1.0f;

Para remover a borda:

self.TextField.layer.masksToBounds=NO;
self.TextField.layer.borderColor=[[UIColor clearColor]CGColor];

8

Atualização para o swift 5.0

textField.layer.masksToBounds = true
textField.layer.borderColor = UIColor.blue.cgColor
textField.layer.borderWidth = 1.0

4

Cor da borda em qualquer visualização (ou na subclasse UIView) também pode ser definido usando o storyboard com um pouco de codificação e essa abordagem pode ser realmente útil se você estiver definindo a cor da borda em vários objetos da interface do usuário.

Abaixo estão as etapas de como alcançá-lo,

  1. Crie uma categoria na classe CALayer. Declare uma propriedade do tipo UIColor com um nome adequado, que eu chamarei de borderUIColor .
  2. Escreva o setter e o getter para esta propriedade.
  3. No método 'Setter', basta definir a propriedade "borderColor" da camada para o novo valor CGColor das cores.
  4. No método 'Getter', retorne UIColor com borderColor da camada.

PS: Lembre-se, as categorias não podem ter propriedades armazenadas. 'borderUIColor' é usado como uma propriedade calculada, apenas como uma referência para atingir o que estamos focando.

Por favor, dê uma olhada no exemplo de código abaixo;

Objetivo C:

Arquivo de interface:

#import <QuartzCore/QuartzCore.h>
#import <UIKit/UIKit.h>

@interface CALayer (BorderProperties)

// This assigns a CGColor to borderColor.
@property (nonatomic, assign) UIColor* borderUIColor;

@end

Arquivo de implementação:

#import "CALayer+BorderProperties.h"

@implementation CALayer (BorderProperties)

- (void)setBorderUIColor:(UIColor *)color {
    self.borderColor = color.CGColor;
}

- (UIColor *)borderUIColor {
    return [UIColor colorWithCGColor:self.borderColor];
}

@end

Swift 2.0:

extension CALayer {
var borderUIColor: UIColor {
    set {
        self.borderColor = newValue.CGColor
    }

    get {
        return UIColor(CGColor: self.borderColor!)
    }
}
}

E, finalmente, vá para o seu storyboard / XIB, siga as etapas restantes;

  1. Clique no objeto Exibir para o qual você deseja definir a Cor da borda.
  2. Clique em "Identity Inspector" (terceiro da esquerda) no painel "Utility" (lado direito da tela).
  3. Em "Atributos de tempo de execução definidos pelo usuário", clique no botão "+" para adicionar um caminho de chave.
  4. Defina o tipo do caminho da chave como "Cor".
  5. Digite o valor para o caminho da chave como "layer.borderUIColor". [Lembre-se de que esse deve ser o nome da variável que você declarou na categoria, e não borderColor, aqui é borderUIColor ].
  6. Finalmente, escolha a cor que desejar.

Você deve definir o valor da propriedade layer.borderWidth como pelo menos 1 para ver a cor da borda.

Construa e execute. Feliz codificação. :)


Não poste respostas idênticas para várias perguntas. Poste uma boa resposta e vote / sinalize para fechar as outras perguntas como duplicadas. Se a pergunta não for duplicada, adapte suas respostas à pergunta .
josliber

1

Aqui está uma implementação do Swift. Você pode fazer uma extensão para que possa ser usada por outras visualizações, se desejar.

extension UIView {
    func addBorderAndColor(color: UIColor, width: CGFloat, corner_radius: CGFloat = 0, clipsToBounds: Bool = false) {
        self.layer.borderWidth  = width
        self.layer.borderColor  = color.cgColor
        self.layer.cornerRadius = corner_radius
        self.clipsToBounds      = clipsToBounds
    }
}

Chame esse como: email.addBorderAndColor(color: UIColor.white, width: 0.5, corner_radius: 5, clipsToBounds: true).

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.