Ändern Sie die UIButton BorderColor im Storyboard

79

Ich setze CornerRadius und BorderWidth für UIbutton in benutzerdefinierten Laufzeitattributen. Ohne das Hinzufügen von layer.borderColor funktioniert es gut und zeigt den Rand in schwarzer Farbe an. Aber wenn add layer.borderColor nicht funktioniert (zeigt keinen Rand).

Geben Sie hier die Bildbeschreibung ein

Mohamed Jaleel Nazir
quelle

Antworten:

158

Für Swift:

Geben Sie hier die Bildbeschreibung ein

Swift 3:

extension UIView {

    @IBInspectable var cornerRadius: CGFloat {
        get {
            return layer.cornerRadius
        }
        set {
            layer.cornerRadius = newValue
            layer.masksToBounds = newValue > 0
        }
    }

    @IBInspectable var borderWidth: CGFloat {
        get {
            return layer.borderWidth
        }
        set {
            layer.borderWidth = newValue
        }
    }

    @IBInspectable var borderColor: UIColor? {
        get {
            return UIColor(cgColor: layer.borderColor!)
        }
        set {
            layer.borderColor = newValue?.cgColor
        }
    }
}

Swift 2.2:

extension UIView {

    @IBInspectable var cornerRadius: CGFloat {
        get {
            return layer.cornerRadius
        }
        set {
            layer.cornerRadius = newValue
            layer.masksToBounds = newValue > 0
        }
    }

    @IBInspectable var borderWidth: CGFloat {
        get {
            return layer.borderWidth
        }
        set {
            layer.borderWidth = newValue
        }
    }

    @IBInspectable var borderColor: UIColor? {
        get {
            return UIColor(CGColor: layer.borderColor!)
        }
        set {
            layer.borderColor = newValue?.CGColor
        }
    }
}
Mohamed Jaleel Nazir
quelle
Hallo, ich erstelle eine CustomeView-Klasse in Ziel c, aber sie wird nicht in meinem Storyboard angezeigt. Bitte helfen Sie mir.
Pooja Srivastava
Vielen Dank dafür! :)
Vijay VS
Vielen Dank, Awesome, Perfect
Abo3atef
1
Ordentlich, aber XCode (Version 8.3.3 (8E3004b)) zeigt kein Ergebnis in der Vorschau an. Ist dies richtig und kann nicht geändert werden (außer beim Erstellen einer benutzerdefinierten Ansicht)?
Konstantin Berkov
Dies ist die eleganteste Lösung! Gute Arbeit!
Zoltan Vinkler
88

Ich habe eine Antwort bekommen. Ändern Sie borderColor anstelle von layer.borderColor :

Xcode-Snippet

und fügen Sie diesen Code in die .m-Datei ein:

#import <QuartzCore/QuartzCore.h>
@implementation CALayer (Additions)

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

@end

Aktivieren Sie die Eigenschaften im Attributinspektor

Attributinspektor

Mohamed Jaleel Nazir
quelle
5
@jithin Ich habe es als Swift-Erweiterung geschrieben, hier ist der Code: Erweiterung CALayer {func setBorderColorFromUIColor (Farbe: UIColor) {self.borderColor = color.CGColor}}
Guy
Trick hat funktioniert. teilweise. Wie um alles in der Welt bekomme ich schwarze Randfarbe, obwohl ich rote Farbe angegeben habe? !!!!!! irgendwelche Ideen? jemand?
static0886
@ static0886: Es lag daran, dass die Farbe, die Sie anwenden, nicht auf den Rand festgelegt ist. Nach meinem Verständnis können wir die Rahmenfarbe nicht über das Storyboard festlegen, da diese Eigenschaft zur Laufzeit nicht in der UIComponent angezeigt wird. Standardmäßig ist es schwarz. Wenn Sie eine Testversion erstellen möchten, entfernen Sie die Farbeigenschaft aus den Attributen.
Javeed
Für schnell können Sie es einstellen als: self.button.layer.borderColor = <UIColor.CGColor>
Sam
Diese layer.borderColorFromUIColor hat für mich im Storyboard gearbeitet. Vielen Dank.
Ramakrishna
50

Swift 4, Xcode 9.2 - Verwenden Sie IBDesignableund IBInspectable, um benutzerdefinierte Steuerelemente zu erstellen und eine Live-Vorschau des Designs in Interface Builder anzuzeigen.

Hier ist ein Beispielcode in Swift, der sich direkt unter dem UIKitin ViewController.swift befindet:

@IBDesignable extension UIButton {

    @IBInspectable var borderWidth: CGFloat {
        set {
            layer.borderWidth = newValue
        }
        get {
            return layer.borderWidth
        }
    }

    @IBInspectable var cornerRadius: CGFloat {
        set {
            layer.cornerRadius = newValue
        }
        get {
            return layer.cornerRadius
        }
    }

    @IBInspectable var borderColor: UIColor? {
        set {
            guard let uiColor = newValue else { return }
            layer.borderColor = uiColor.cgColor
        }
        get {
            guard let color = layer.borderColor else { return nil }
            return UIColor(cgColor: color)
        }
    }
}

Wenn Sie zu den in der Ansicht überprüfbaren Attributen wechseln, sollten Sie diese Eigenschaften visuell finden und die Eigenschaften bearbeiten:

Geben Sie hier die Bildbeschreibung ein

Die Änderungen werden auch in benutzerdefinierten Laufzeitattributen berücksichtigt:

Geben Sie hier die Bildbeschreibung ein

Laufen Sie in der Bauzeit und Voila! Sie sehen Ihren klaren, abgerundeten Knopf mit Rand.

Geben Sie hier die Bildbeschreibung ein

Nachteile Bulaquena
quelle
Dies hat mir geholfen, es im Storyboard zu erreichen. Ihre Antwort ist sehr klar umzusetzen.
R. Mohan
Dies ist die genaueste Antwort auf diese Frage mit einem klar erläuterten Beispiel.
SeaWarrior404
Wenn Sie für Objective-C hinzufügen könnten, wird es geschätzt.
Mihir Oza
9

Die Erklärung, die vielleicht in einigen anderen Antworten hier verloren geht:

Der Grund, warum diese Eigenschaft nicht festgelegt wird, ist, dass layer.borderColorein Wert mit Typ erforderlich ist CGColor.

Es UIColorkönnen jedoch nur Typen über die benutzerdefinierten Laufzeitattribute von Interface Builder festgelegt werden!

Sie müssen also über Interface Builder eine UIColor für eine Proxy-Eigenschaft festlegen und dann diesen Aufruf abfangen, um die entsprechende CGColor für die layer.borderColorEigenschaft festzulegen .

Dies kann erreicht werden, indem eine Kategorie in CALayer erstellt, der Schlüsselpfad auf eine eindeutige neue "Eigenschaft" ( borderColorFromUIColor) gesetzt und in der Kategorie der entsprechende Setter ( setBorderColorFromUIColor:) überschrieben wird .

pkamb
quelle
1

Es gibt einen viel besseren Weg, dies zu tun! Sie sollten @IBInspectable verwenden. Den Blogeintrag von Mike Woelmer finden Sie hier: https://spin.atomicobject.com/2017/07/18/swift-interface-builder/

Es fügt tatsächlich die Funktion zu IB in Xcode hinzu! Einige der Screenshots in anderen Antworten lassen den Eindruck entstehen, dass die Felder in IB vorhanden sind, in Xcode 9 jedoch nicht. Aber wenn er seinem Beitrag folgt, werden sie hinzugefügt.

cdeerinck
quelle
Ich habe diesen Ansatz ausprobiert und er hat Xcode sehr langsam gemacht. Passiert es euch allen auch?
Meep
0

Bei Swift funktioniert die Funktion nicht. Sie benötigen eine berechnete Eigenschaft, um das gewünschte Ergebnis zu erzielen:

extension CALayer {
    var borderColorFromUIColor: UIColor {
        get {
            return UIColor(CGColor: self.borderColor!)
        } set {
            self.borderColor = newValue.CGColor
        }
    }
}
Furqan Khan
quelle
0

Das funktioniert bei mir.

Swift 3, Xcode 8.3

Identitätsinspektor (in diesem Fall UIButton)

CALayer-Erweiterung:

extension CALayer {
var borderWidthIB: NSNumber {
    get {
        return NSNumber(value: Float(borderWidth))
    }
    set {
        borderWidth = CGFloat(newValue.floatValue)
    }
}
var borderColorIB: UIColor? {
    get {
        return borderColor != nil ? UIColor(cgColor: borderColor!) : nil
    }
    set {
        borderColor = newValue?.cgColor
    }
}
var cornerRadiusIB: NSNumber {
    get {
        return NSNumber(value: Float(cornerRadius))
    }
    set {
        cornerRadius = CGFloat(newValue.floatValue)
    }
}

}}

Jovan Stankovic
quelle