wake-up-neo.com

Ist es möglich, UIView-Rahmeneigenschaften vom Interface-Builder aus festzulegen?

Ist es möglich, die UIView-Randeigenschaften (Farbe, Dicke usw.) direkt vom Interface Builder aus zu steuern, oder kann ich das nur programmgesteuert machen?

170
matteo.cajani

Tatsächlich können Sie einige Eigenschaften der Layer einer Ansicht über den Schnittstellenersteller festlegen. Ich weiß, dass ich borderWidth und cornerRadius einer Ebene durch xcode festlegen kann. borderColor funktioniert nicht, wahrscheinlich weil die Ebene eine CGColor anstelle einer UIColor will.

Sie müssen möglicherweise Strings anstelle von Zahlen verwenden, aber es funktioniert!

layer.cornerRadius
layer.borderWidth
layer.borderColor

Aktualisieren: layer.masksToBounds = true

example

Aktualisieren: Wählen Sie einen geeigneten Typ für Keypath:

 enter image description here

369
Rich86man

Die Antwort von Rich86Man ist korrekt, aber Sie können Kategorien verwenden, um Eigenschaften wie layer.borderColor zu proxy. (Aus dem KonventionellC CocoaPod)

CALayer + XibConfiguration.h:

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

@interface CALayer(XibConfiguration)

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

@end

CALayer + XibConfiguration.m:

#import "CALayer+XibConfiguration.h"

@implementation CALayer(XibConfiguration)

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

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

@end

Interface Builder

layer.borderUIColor

Das Ergebnis wird zur Laufzeit sichtbar und nicht in Xcode.

Edit: Sie müssen auch layer.borderWidth auf mindestens 1 setzen, um den Rand der ausgewählten Farbe zu sehen.

In Swift 2.0:

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

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

In Swift 3.0:

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

        get {
            return UIColor(cgColor: self.borderColor!)
        }
    }
}
178
Peter DeWeese

Ähnliche Antwort auf die von iHulk, aber in Swift

Fügen Sie eine Datei mit dem Namen UIView.Swift in Ihrem Projekt hinzu (oder fügen Sie diese einfach in eine beliebige Datei ein):

import UIKit

@IBDesignable extension UIView {
    @IBInspectable var borderColor: UIColor? {
        set {
            layer.borderColor = newValue?.cgColor
        }
        get {
            guard let color = layer.borderColor else {
                return nil
            }
            return UIColor(cgColor: color)
        }
    }
    @IBInspectable var borderWidth: CGFloat {
        set {
            layer.borderWidth = newValue
        }
        get {
            return layer.borderWidth
        }
    }
    @IBInspectable var cornerRadius: CGFloat {
        set {
            layer.cornerRadius = newValue
            clipsToBounds = newValue > 0
        }
        get {
            return layer.cornerRadius
        }
    }
}

Dann ist dies im Interface Builder für jede Schaltfläche, ImageView, Beschriftung usw. im Bereich "Dienstprogramme"> "Attribute" verfügbar:

 Attributes Inspector

Hinweis: Der Rand wird nur zur Laufzeit angezeigt.

69
Axel Guilmin

Sie können eine Kategorie von UIView erstellen und diese in der .h-Datei der Kategorie hinzufügen

@property (nonatomic) IBInspectable UIColor *borderColor;
@property (nonatomic) IBInspectable CGFloat borderWidth;
@property (nonatomic) IBInspectable CGFloat cornerRadius;

Nun fügen Sie diese in .m-Datei hinzu

@dynamic borderColor,borderWidth,cornerRadius;

und das auch in. m Datei

-(void)setBorderColor:(UIColor *)borderColor{
    [self.layer setBorderColor:borderColor.CGColor];
}

-(void)setBorderWidth:(CGFloat)borderWidth{
    [self.layer setBorderWidth:borderWidth];
}

-(void)setCornerRadius:(CGFloat)cornerRadius{
    [self.layer setCornerRadius:cornerRadius];
}

jetzt sehen Sie dies in Ihrem Storyboard für alle UIView-Unterklassen (UILabel, UITextField, UIImageView usw.).

enter image description here

Nein, Sie müssen die Kategorie überall importieren. Fügen Sie einfach die Dateien der Kategorie zum Projekt hinzu und sehen Sie diese Eigenschaften im Storyboard.

56
iHulk

Für Swift 3 und 4 , wenn Sie IBInspectables verwenden möchten, gibt es Folgendes:

@IBDesignable extension UIView {
    @IBInspectable var borderColor:UIColor? {
        set {
            layer.borderColor = newValue!.cgColor
        }
        get {
            if let color = layer.borderColor {
                return UIColor(cgColor: color)
            }
            else {
                return nil
            }
        }
    }
    @IBInspectable var borderWidth:CGFloat {
        set {
            layer.borderWidth = newValue
        }
        get {
            return layer.borderWidth
        }
    }
    @IBInspectable var cornerRadius:CGFloat {
        set {
            layer.cornerRadius = newValue
            clipsToBounds = newValue > 0
        }
        get {
            return layer.cornerRadius
        }
    }
}
8
RamwiseMatt

dies kann zwar die Eigenschaften festlegen, wird jedoch nicht in IB angezeigt. Wenn Sie also im Wesentlichen Code in IB schreiben, können Sie dies auch in Ihrem Quellcode tun

7
Zayin Krige

Wenn Sie Zeit sparen möchten, verwenden Sie einfach zwei UIViews übereinander, wobei die rückseitige Farbe die Umrandungsfarbe ist und die vordere die kleinere, was den umrandeten Effekt ergibt. Ich denke nicht, dass dies auch eine elegante Lösung ist, aber wenn Apple sich etwas mehr kümmert, sollten Sie dies nicht tun.

4
Matthew Quiros

Das Storyboard funktioniert bei mir nicht immer, obwohl ich die gesamte Lösung hier ausprobiert habe

Es ist also immer eine perfekte Antwort, wenn Sie den Code verwenden. Erstellen Sie einfach eine IBOutlet-Instanz von UIView und fügen Sie die Eigenschaften hinzu

Kurze Antwort:

layer.cornerRadius = 10
layer.borderWidth = 1
layer.borderColor = UIColor.blue.cgColor

Lange Antwort:

Abgerundete Ecken von UIView/UIButton etc

customUIView.layer.cornerRadius = 10

Randstärke

pcustomUIView.layer.borderWidth = 2

Randfarbe

customUIView.layer.borderColor = UIColor.blue.cgColor
1
swiftBoy

Es ist absolut nur möglich, wenn Sie layer.masksToBounds = true setzen und Sie Sachen ausruhen.

0
Sunil Targe