Cocoa Touch: Como alterar a cor e a espessura da borda do UIView?

Eu vi no inspetor que eu posso mudar a cor de fundo, mas eu também gostaria de alterar a cor da borda e espessura, isso é possível?

obrigado

Você precisa usar a camada de visualização para definir a propriedade da borda. por exemplo:

#import  ... view.layer.borderColor = [UIColor redColor].CGColor; view.layer.borderWidth = 3.0f; 

Você também precisa vincular-se ao QuartzCore.framework para acessar essa funcionalidade.

Atualização do Xcode 6

Desde a mais nova versão do Xcode, existe uma solução melhor para isso:

Com @IBInspectable você pode definir atributos diretamente de dentro do Attributes Inspector .

Minha visualização personalizada @IBInspectable Attributes

Isso define os User Defined Runtime Attributes pelo User Defined Runtime Attributes para você:

insira a descrição da imagem aqui

Existem duas abordagens para configurar isso:

Opção 1 (com atualização ao vivo no Storyboard)

  1. Crie MyCustomView .
  2. Isso herda do UIView .
  3. Configure @IBDesignable (isso faz com que o View update live). *
  4. Defina seus Atributos de Tempo de Execução (borda, etc.) com @IBInspectable
  5. Alterar sua class de exibições para MyCustomView
  6. Edite no painel Atributos e veja as alterações no Storyboard 🙂

`

 @IBDesignable class MyCustomView: UIView { @IBInspectable var cornerRadius: CGFloat = 0 { didSet { layer.cornerRadius = cornerRadius layer.masksToBounds = cornerRadius > 0 } } @IBInspectable var borderWidth: CGFloat = 0 { didSet { layer.borderWidth = borderWidth } } @IBInspectable var borderColor: UIColor? { didSet { layer.borderColor = borderColor?.CGColor } } } 

* @IBDesignable só funciona quando definido no início da class MyCustomView

Opção 2 (não funciona desde o Swift 1.2, veja comentários)

Estenda sua class UIView:

 extension UIView { @IBInspectable var cornerRadius: CGFloat = 0 { didSet { layer.cornerRadius = cornerRadius layer.masksToBounds = cornerRadius > 0 } } @IBInspectable var borderWidth: CGFloat = 0 { didSet { layer.borderWidth = borderWidth } } @IBInspectable var borderColor: UIColor? { didSet { layer.borderColor = borderColor?.CGColor } } } 

Dessa forma, a visualização padrão sempre tem esses campos editáveis ​​extras no Attributes Inspector . Outra vantagem é que você não precisa mudar a class para MycustomView todas as vezes. No entanto, uma desvantagem disso é que você só verá suas alterações quando executar seu aplicativo.

Você também pode criar bordas com a cor do seu desejo.

 view.layer.borderColor = [UIColor colorWithRed:r/255.0 green:g/255.0 blue:b/255.0 alpha:1.0].CGColor; 

* r, g, b são os valores entre 0 e 255.

Adicione o seguinte @IBInspectables na extensão UIView

 extension UIView { @IBInspectable var borderWidth: CGFloat { get { return layer.borderWidth } set(newValue) { layer.borderWidth = newValue } } @IBInspectable var borderColor: UIColor? { get { if let color = layer.borderColor { return UIColor(CGColor: color) } return nil } set(newValue) { layer.borderColor = newValue?.CGColor } } } 

E então você deve ser capaz de definir atributos borderColor e borderWidth diretamente do Inspetor de Atributos. Veja a imagem anexada

Inspetor de Atributos

Quando uso a solução CALayer de Vladimir e, além disso, tenho uma animação, como um UINavigationController modal descartando, vejo muitos problemas acontecendo e problemas de desempenho de desenho.

Então, outra maneira de conseguir isso, mas sem as falhas e perda de desempenho, é fazer um UIView personalizado e implementar a mensagem drawRect forma:

 - (void)drawRect:(CGRect)rect { CGContextRef contextRef = UIGraphicsGetCurrentContext(); CGContextSetLineWidth(contextRef, 1); CGContextSetRGBStrokeColor(contextRef, 255.0, 255.0, 255.0, 1.0); CGContextStrokeRect(contextRef, rect); } 

Experimente este código:

 view.layer.borderColor = [UIColor redColor].CGColor; view.layer.borderWidth= 2.0; [view setClipsToBounds:YES]; 

Eu não sugeriria ignorar o drawRect devido a causar um impacto no desempenho.

Em vez disso, eu modificaria as propriedades da class como abaixo (em seu uiview personalizado):

  - (id)initWithFrame:(CGRect)frame { self = [super initWithFrame:frame]; if (self) { self.layer.borderWidth = 2.f; self.layer.borderColor = [UIColor redColor].CGColor; } return self; 

Eu não vi nenhuma falha ao tomar a abordagem acima – não sei por que colocar o initWithFrame para isso 😉

 view.layer.borderWidth = 1.0 view.layer.borderColor = UIColor.lightGray.cgColor 

Eu queria adicionar isso à resposta de @ marczking ( Opção 1 ) como um comentário, mas meu status baixo no StackOverflow está evitando isso.

Eu fiz um port de @ resposta marczking para o Objectivo C. Funciona como charme, obrigado @marczking!

UIView + Border.h:

 #import  IB_DESIGNABLE @interface UIView (Border) -(void)setBorderColor:(UIColor *)color; -(void)setBorderWidth:(CGFloat)width; -(void)setCornerRadius:(CGFloat)radius; @end 

UIView + Border.m:

 #import "UIView+Border.h" @implementation UIView (Border) // Note: cannot use synthesize in a Category -(void)setBorderColor:(UIColor *)color { self.layer.borderColor = color.CGColor; } -(void)setBorderWidth:(CGFloat)width { self.layer.borderWidth = width; } -(void)setCornerRadius:(CGFloat)radius { self.layer.cornerRadius = radius; self.layer.masksToBounds = radius > 0; } @end 

Se você não quisesse editar a camada de um UIView, você sempre poderia incorporar a visão dentro de outra visão. A exibição pai teria sua cor de plano de fundo definida para a cor da borda. Também seria um pouco maior, dependendo de quão larga você deseja que a borda seja.

Claro, isso só funciona se a sua visualização não for transparente e você quiser apenas uma única cor de borda. O OP queria a fronteira na visão em si, mas isso pode ser uma alternativa viável.

@IBInspectable está trabalhando para mim no iOS 9, Swift 2.0

 extension UIView { @IBInspectable var borderWidth: CGFloat { get { return layer.borderWidth } set(newValue) { layer.borderWidth = newValue } } @IBInspectable var cornerRadius: CGFloat { get { return layer.cornerRadius } set(newValue) { layer.cornerRadius = newValue } } @IBInspectable var borderColor: UIColor? { get { if let color = layer.borderColor { return UIColor(CGColor: color) } return nil } set(newValue) { layer.borderColor = newValue?.CGColor } } 

Se você quiser adicionar borda diferente em lados diferentes, pode ser adicionar uma subvisualização com o estilo específico é uma maneira fácil de chegar a.