Cocoa Touch: Come cambiare il colore e lo spessore del bordo di UIView?

Ho visto nell’ispettore che posso cambiare il colore dello sfondo, ma mi piacerebbe anche cambiare il colore e lo spessore del bordo, è ansible?

Grazie

È necessario utilizzare il livello di vista per impostare la proprietà del bordo. per esempio:

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

È inoltre necessario collegarsi a QuartzCore.framework per accedere a questa funzionalità.

Aggiornamento Xcode 6

Poiché la nuova versione di Xcode offre una soluzione migliore:

Con @IBInspectable puoi impostare gli Attributi direttamente @IBInspectable degli Attributes Inspector .

My Custom View @IBInspectable Attributes

Questo imposta gli User Defined Runtime Attributes per te:

inserisci la descrizione dell'immagine qui

Ci sono due approcci per impostare questo:

Opzione 1 (con aggiornamento dal vivo in Storyboard)

  1. Crea MyCustomView .
  2. Questo eredita da UIView .
  3. Imposta @IBDesignable (questo rende l’aggiornamento della vista dal vivo). *
  4. Imposta i tuoi attributi di runtime (bordo, ecc.) Con @IBInspectable
  5. Cambia la tua class di MyCustomView in MyCustomView
  6. Modifica nel pannello Attributi e vedi le modifiche nello 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 funziona solo se impostato all’inizio della class MyCustomView

Opzione 2 (non funziona da Swift 1.2, vedi commenti)

Estendi la tua 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 } } } 

In questo modo, la tua Vista predefinita ha sempre quei campi modificabili in più in Attributes Inspector . Un altro vantaggio è che non è necessario cambiare la class in MycustomView ogni volta. Tuttavia, uno svantaggio di questo è che vedrai le tue modifiche solo quando esegui la tua app.

Puoi anche creare bordi con il colore del tuo desiderio ..

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

* r, g, b sono i valori compresi tra 0 e 255.

Aggiungi i seguenti @IBInspectables nell’estensione 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 quindi dovresti essere in grado di impostare gli attributi borderColor e borderWidth direttamente dall’ispettore Attributi. Vedi l’immagine allegata

Ispettore degli attributi

Quando uso la soluzione CALayer di Vladimir, e in cima alla vista ho un’animazione, come un UINavigationController modale congedando, vedo un sacco di problemi che si verificano e che hanno problemi di prestazioni di disegno.

Quindi, un altro modo per raggiungere questo objective, ma senza glitch e perdita di prestazioni, è creare un UIView personalizzato e implementare il messaggio drawRect modo:

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

Prova questo codice:

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

Non suggerirei di sovrascrivere drawRect a causa di un impatto sulle prestazioni.

Invece, modificherei le proprietà della class come di seguito (nella tua visualizzazione personalizzata):

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

Non ho visto alcun problema durante l’approccio sopra descritto – non sono sicuro del perché inserire initWithFrame si ferma 😉

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

Volevo aggiungere questo alla risposta di @ marczking ( Opzione 1 ) come commento, ma il mio stato di basso livello su StackOverflow lo sta impedendo.

Ho fatto una porta della risposta di @ marczking all’objective C. Funziona come un incantesimo, grazie @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 non vuoi modificare il livello di un UIView, puoi sempre incorporare la vista in un’altra vista. La vista genitore avrebbe il colore di sfondo impostato sul colore del bordo. Sarebbe anche leggermente più grande, a seconda di quanto vuoi che sia il bordo.

Ovviamente, questo funziona solo se la tua vista non è trasparente e vuoi solo un singolo colore del bordo. L’OP voleva il confine nella vista stessa, ma questa potrebbe essere una valida alternativa.

@IBInspectable funziona per me su 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 si desidera aggiungere un bordo diverso su lati diversi, è ansible aggiungere una sottoview con lo stile specifico è un modo facile da inventare.