iphone - online - xcode para linux

Cocoa Touch: ¿Cómo cambiar el color y el grosor del borde de UIView?

Question

Vi en el inspector que puedo cambiar el color de fondo, pero también me gustaría cambiar el color y el grosor del borde, ¿es esto posible?

Gracias

Answer 1

Actualización de Xcode 6

Desde la versión más reciente de Xcode hay una mejor solución para esto:

Con @IBInspectable puede establecer atributos directamente desde el Attributes Inspector .

Esto establece los User Defined Runtime Attributes el User Defined Runtime Attributes para usted:

Hay dos enfoques para configurar esto:

Opción 1 (con actualización en vivo en Storyboard)

1. Crear MyCustomView .
2. Esto hereda de UIView .
3. Establecer @IBDesignable (esto hace que la actualización de la Vista @IBDesignable vivo). *
4. Establezca sus atributos de tiempo de ejecución (borde, etc.) con @IBInspectable
5. Cambia tu clase de vistas a MyCustomView
6. Edite en el Panel de atributos y vea los cambios en el Guión gráfico :)

`

@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 solo funciona cuando se establece al inicio de la class MyCustomView

Opción 2 (no funciona desde Swift 1.2, ver comentarios)

Amplíe su clase 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
        }
    }
}

De esta manera, su Vista predeterminada siempre tiene esos campos editables adicionales en el Attributes Inspector . Otra ventaja es que no tiene que cambiar la clase a MycustomView cada vez. Sin embargo, un inconveniente de esto es que solo verá sus cambios cuando ejecute su aplicación.

Answer 2

@IBInspectable está trabajando para mí en 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
    }
}

Answer 3

Agregue los siguientes @IBInspectables en la extensión 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
    }
  }
}

Y entonces debería poder establecer los atributos borderColor y borderWidth directamente desde el inspector de atributos. Ver imagen adjunta

Inspector de atributos

Answer 4

Cuando utilizo la solución CALayer de Vladimir, y en la parte superior de la vista tengo una animación, como una desconexión de UINavigationController modal, veo muchos problemas técnicos que ocurren y tengo problemas de rendimiento de dibujo.

Por lo tanto, otra forma de lograr esto, pero sin las fallas y la pérdida de rendimiento, es hacer un UIView personalizado e implementar el mensaje drawRect manera:

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

Answer 5

Necesitas usar la capa de la vista para establecer la propiedad de borde. p.ej:

#import <QuartzCore/QuartzCore.h>
...
view.layer.borderColor = [UIColor redColor].CGColor;
view.layer.borderWidth = 3.0f;

También debe vincularse con QuartzCore.framework para acceder a esta funcionalidad.

Answer 6

No sugeriría anular el drawRect debido a que causa un impacto en el rendimiento.

En su lugar, modificaría las propiedades de la clase como a continuación (en su 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;

No vi ninguna falla al tomar el enfoque anterior, no estoy seguro de por qué poner en el initWithFrame detiene estos ;-)

Answer 7

Prueba este código:

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

Answer 8

Quería agregar esto a la respuesta de @ marczking ( Opción 1 ) como un comentario, pero mi humilde estado en lo impide.

Hice una respuesta de @ marczking al Objetivo C. Funciona a la perfección, ¡gracias, @marczking!

UIView + Border.h:

#import <UIKit/UIKit.h>

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

Answer 9

Si desea agregar un borde diferente en lados diferentes, puede agregar una subvista con el estilo específico que es una forma fácil de encontrar.

Answer 10

Si no desea editar la capa de una vista UIV, siempre puede incrustar la vista en otra vista. La vista principal tendría su color de fondo establecido en el color del borde. También sería un poco más grande, según el ancho que desee que tenga el borde.

Por supuesto, esto solo funciona si su vista no es transparente y solo desea un color de borde único. El OP quería la frontera en la vista en sí, pero esta podría ser una alternativa viable.

Answer 11

También puedes crear un borde con el color de tu deseo.

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

* r, g, b son los valores entre 0 y 255.

Answer 12

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