it-swarm.com.de

Cocoa Touch: Wie kann ich die Randfarbe und -stärke von UIView ändern?

Ich habe im Inspektor gesehen, dass ich die Hintergrundfarbe ändern kann, aber ich möchte auch die Rahmenfarbe und -stärke ändern. Ist das möglich?

Vielen Dank

265
foreyez

Sie müssen den Layer der Ansicht verwenden, um die Eigenschaft border festzulegen. z.B:

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

Sie müssen außerdem eine Verknüpfung mit QuartzCore.framework herstellen, um auf diese Funktionalität zugreifen zu können.

583
Vladimir

Xcode 6 Update

Seit der neuesten Version von Xcode gibt es dafür eine bessere Lösung:

Mit @IBInspectable können Sie Attribute direkt aus in dem Attributes Inspector setzen.

My Custom View @IBInspectable Attributes

Dadurch wird der User Defined Runtime Attributes für Sie festgelegt:

enter image description here

Dafür gibt es zwei Ansätze:

Option 1 (mit Live-Aktualisierung im Storyboard)

  1. Erstellen Sie MyCustomView.
  2. Dies erbt von UIView.
  3. Setze @IBDesignable (dadurch wird die View-Aktualisierung live)
  4. Legen Sie Ihre Laufzeitattribute (Rahmen usw.) mit @IBInspectable fest.
  5. Ändern Sie Ihre Views-Klasse in MyCustomView.
  6. Bearbeiten Sie das Attributfenster und sehen Sie die Änderungen im 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 funktioniert nur, wenn zu Beginn von class MyCustomView gesetzt.

Option 2 (funktioniert seit Swift 1.2 nicht mehr, siehe Kommentare)

Erweitern Sie Ihre UIView-Klasse:

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
        }
    }
}

Auf diese Weise hat Ihre Standardansicht always diese zusätzlichen bearbeitbaren Felder in Attributes Inspector. Ein weiterer Vorteil ist, dass Sie die Klasse nicht jedes Mal in MycustomView ändern müssen. Ein Nachteil ist jedoch, dass Sie Ihre Änderungen nur sehen, wenn Sie Ihre App ausführen.

39
MMachinegun

Sie können auch einen Rahmen mit der gewünschten Farbe erstellen.

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

* r, g, b sind die Werte zwischen 0 und 255.

16
rohan-patel

Fügen Sie folgendes @IBInspectables in der UIView-Erweiterung hinzu

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
    }
  }
}

Anschließend sollten Sie die Attribute borderColor und borderWidth direkt im Attribut-Inspector festlegen können. Siehe beigefügtes Bild

Attribute-Inspektor

9
Bikramjit Singh

Wenn ich die CALayer-Lösung von Vladimir verwende, und oben auf der Ansicht eine Animation, wie ein modaler UINavigationController, der abgewiesen hat, sehe ich eine Reihe von Pannen und Zeichnungsperformance-Problemen.

Eine andere Möglichkeit, dies zu erreichen, jedoch ohne Störungen und Leistungsverluste, besteht darin, eine benutzerdefinierte UIView zu erstellen und die drawRect-Nachricht wie folgt zu implementieren:

- (void)drawRect:(CGRect)rect
{
    CGContextRef contextRef = UIGraphicsGetCurrentContext();
    CGContextSetLineWidth(contextRef, 1);
    CGContextSetRGBStrokeColor(contextRef, 255.0, 255.0, 255.0, 1.0);
    CGContextStrokeRect(contextRef, rect);    
}
8
Nicu Surdu
view.layer.borderWidth = 1.0
view.layer.borderColor = UIColor.lightGray.cgColor
6
shaiju mathew

Versuchen Sie diesen Code:

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

Ich würde nicht empfehlen, das drawRect zu überschreiben, da dies einen Performance-Hit verursacht.

Stattdessen würde ich die Eigenschaften der Klasse wie folgt ändern (in Ihrer benutzerdefinierten Ansicht):

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

Beim oben genannten Ansatz habe ich keine Störungen gesehen - ich bin mir nicht sicher, warum das Setzen des initWithFrame diese stoppt ;-)

4
DEzra

@IBInspectable funktioniert für mich unter 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
    }
}
2
anhtran

Ich wollte dies zu @ marczkings Antwort ( Option 1 ) als Kommentar hinzufügen, aber mein niedriger Status bei StackOverflow verhindert dies.

Ich habe eine Antwort von @ marczking auf Objective C geschrieben. Funktioniert wie Charme, danke @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
2
spencery2

Wenn Sie die Ebene einer UIView nicht bearbeiten möchten, können Sie die Ansicht immer in eine andere Ansicht einbetten. Die Hintergrundfarbe der übergeordneten Ansicht wurde auf die Rahmenfarbe festgelegt. Es wäre auch etwas größer, je nachdem, wie breit die Grenze sein soll.

Dies funktioniert natürlich nur, wenn Ihre Ansicht nicht transparent ist und Sie nur eine einzige Rahmenfarbe wünschen. Das OP wollte die Grenze in der Ansicht selbst, aber dies könnte eine praktikable Alternative sein.

1
Matt Becker

Wenn Sie auf verschiedenen Seiten einen anderen Rand hinzufügen möchten, können Sie eine Unteransicht hinzufügen, deren Stil besonders einfach ist.

0
Yuanfei Zhu

rahmenfarbe des Artikels in Swift 4.2:

let cell = tableView.dequeueReusableCell(withIdentifier: "Cell_lastOrderId") as! Cell_lastOrder
cell.layer.borderWidth = 1
cell.layer.borderColor = UIColor.white.cgColor
cell.layer.cornerRadius = 10
0
Akhrua