webentwicklung-frage-antwort-db.com.de

Wie kann ich einen Button in Swift mit einem abgerundeten Rand versehen lassen?

Ich baue eine App mit Swift in der neuesten Version von Xcode 6 und würde gerne wissen, wie ich meine Schaltfläche so anpassen kann, dass sie einen abgerundeten Rand hat, den ich bei Bedarf anpassen kann. Wie kann ich dann die Farbe des Rahmens selbst ändern, ohne einen Hintergrund hinzuzufügen? Mit anderen Worten, ich möchte einen leicht abgerundeten Knopf ohne Hintergrund, nur einen 1-Punkt-Rand einer bestimmten Farbe.

188
GuiGui23

Verwenden Sie button.layer.cornerRadius, button.layer.borderColor und button.layer.borderWidth. Beachten Sie, dass borderColor eine CGColor erfordert.

button.backgroundColor = .clear
button.layer.cornerRadius = 5
button.layer.borderWidth = 1
button.layer.borderColor = UIColor.black.cgColor
437
return true

Um diese Aufgabe im Storyboard auszuführen (Interface Builder Inspector)

Mit IBDesignable können Sie dem Interface Builder Inspector weitere Optionen für UIButton hinzufügen und diese im Storyboard optimieren. Fügen Sie Ihrem Projekt zunächst folgenden Code hinzu.

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

Legen Sie dann einfach die Attribute für die Schaltflächen im Storyboard fest.

 enter image description here

35
Fangming

Ich habe eine einfache UIButton-Unterklasse erstellt, die die tintColor für Text- und Randfarben verwendet. Wenn sie hervorgehoben wird, ändert sich der Hintergrund in tintColor.

class BorderedButton: UIButton {

required init?(coder aDecoder: NSCoder) {
    super.init(coder: aDecoder)
    layer.borderWidth = 1.0
    layer.borderColor = tintColor.CGColor
    layer.cornerRadius = 5.0
    clipsToBounds = true
    contentEdgeInsets = UIEdgeInsets(top: 8, left: 8, bottom: 8, right: 8)
    setTitleColor(tintColor, forState: .Normal)
    setTitleColor(UIColor.whiteColor(), forState: .Highlighted)
    setBackgroundImage(UIImage(color: tintColor), forState: .Highlighted)
}
}

Hierfür wird eine UIImage-Erweiterung verwendet, die ein Bild aus einer Farbe erstellt. Diesen Code habe ich hier gefunden: https://stackoverflow.com/a/33675160

Es funktioniert am besten, wenn Sie im Interface Builder auf Benutzerdefiniert setzen, da der Standardsystemtyp die Farben leicht ändert, wenn die Schaltfläche hervorgehoben wird.

20
sgib

Diese Klasse basiert auf allen Kommentaren und Vorschlägen in Antworten und kann auch direkt von Xcode aus entworfen werden. Kopieren Sie in Ihr Projekt, fügen Sie einen beliebigen UIButton ein und ändern Sie ihn, um die benutzerdefinierte Klasse zu verwenden. Wählen Sie nun die Rahmen- oder Hintergrundfarbe aus Xcode für normale und/oder hervorgehobene Zustände. 

//
//  RoundedButton.Swift
//

import UIKit

@IBDesignable
class RoundedButton:UIButton {

    @IBInspectable var borderWidth: CGFloat = 0 {
        didSet {
            layer.borderWidth = borderWidth
        }
    }
    //Normal state bg and border
    @IBInspectable var normalBorderColor: UIColor? {
        didSet {
            layer.borderColor = normalBorderColor?.CGColor
        }
    }

    @IBInspectable var normalBackgroundColor: UIColor? {
        didSet {
            setBgColorForState(normalBackgroundColor, forState: .Normal)
        }
    }


    //Highlighted state bg and border
    @IBInspectable var highlightedBorderColor: UIColor?

    @IBInspectable var highlightedBackgroundColor: UIColor? {
        didSet {
            setBgColorForState(highlightedBackgroundColor, forState: .Highlighted)
        }
    }


    private func setBgColorForState(color: UIColor?, forState: UIControlState){
        if color != nil {
            setBackgroundImage(UIImage.imageWithColor(color!), forState: forState)

        } else {
            setBackgroundImage(nil, forState: forState)
        }
    }

    override func layoutSubviews() {
        super.layoutSubviews()

        layer.cornerRadius = layer.frame.height / 2
        clipsToBounds = true

        if borderWidth > 0 {
            if state == .Normal && !CGColorEqualToColor(layer.borderColor, normalBorderColor?.CGColor) {
                layer.borderColor = normalBorderColor?.CGColor
            } else if state == .Highlighted && highlightedBorderColor != nil{
                layer.borderColor = highlightedBorderColor!.CGColor
            }
        }
    }

}

//Extension Required by RoundedButton to create UIImage from UIColor
extension UIImage {
    class func imageWithColor(color: UIColor) -> UIImage {
        let rect: CGRect = CGRectMake(0, 0, 1, 1)
        UIGraphicsBeginImageContextWithOptions(CGSizeMake(1, 1), false, 1.0)
        color.setFill()
        UIRectFill(rect)
        let image: UIImage = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        return image
    }
}
13
le0diaz

Basierend auf der Antwort von @returntrue konnte ich es in Interface Builder implementieren.

Um runde Ecken mit dem Button Builder zu erhalten, fügen Sie einen Schlüssel Path = "layer.cornerRadius" mit Type = "Number" und Value = "10" (oder einem anderen erforderlichen Wert) in "User Defined RunTime Attribute" des Identity Inspector der Schaltfläche hinzu.

8
Zvi

Sie können diese Unterklasse von UIButton verwenden, um UIButton an Ihre Anforderungen anzupassen.

Besuchen Sie dieses Github Repo als Referenz

class RoundedRectButton: UIButton {

    var selectedState: Bool = false

    override func awakeFromNib() {
        super.awakeFromNib()
        layer.borderWidth = 2 / UIScreen.main.nativeScale
        layer.borderColor = UIColor.white.cgColor
        contentEdgeInsets = UIEdgeInsets(top: 0, left: 5, bottom: 0, right: 5)
    }


    override func layoutSubviews(){
        super.layoutSubviews()
        layer.cornerRadius = frame.height / 2
        backgroundColor = selectedState ? UIColor.white : UIColor.clear
        self.titleLabel?.textColor = selectedState ? UIColor.green : UIColor.white
    }

    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
        selectedState = !selectedState
        self.layoutSubviews()
    }
}
2
Nikesh Jha
   @IBOutlet weak var yourButton: UIButton! {
        didSet{
            yourButton.backgroundColor = .clear
            yourButton.layer.cornerRadius = 10
            yourButton.layer.borderWidth = 2
            yourButton.layer.borderColor = UIColor.white.cgColor
        }
    }
2
Giang

Ich denke, der einfachste und sauberste Weg ist die Verwendung des Protokolls, um das Erben und die Wiederholung von Code zu vermeiden. Sie können diese Eigenschaften direkt vom Storyboard aus ändern 

protocol Traceable {
    var cornerRadius: CGFloat { get set }
    var borderColor: UIColor? { get set }
    var borderWidth: CGFloat { get set }
}

extension UIView: Traceable {

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

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

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

Update 

In diesem link finden Sie ein Beispiel mit dem Dienstprogramm des Protokolls nachvollziehbar 

 enter image description here

1
Hamza

VERSUCHEN SIE DIESES Knopfleiste mit abgerundeten Ecken

anyButton.backgroundColor = .clear

anyButton.layer.cornerRadius = anyButton.frame.height / 2

anyButton.layer.borderWidth = 1

anyButton.layer.borderColor = UIColor.black.cgColor
0
Raghib Arshi

stellen Sie sicher, dass Ihre Schaltfläche keine Unterklasse einer benutzerdefinierten Klasse im Storyboard ist. In einem solchen Fall sollte Ihr Code am besten in der benutzerdefinierten Klasse gespeichert werden. Der Code selbst funktioniert nur dann, wenn Ihre Schaltfläche der Standardklasse entspricht UIButton-Klasse und Outlet davon, ich hoffe, dass dies jemandem helfen kann, sich zu fragen, warum Eckradios nicht auf meinen Button vom Code angewendet werden. 

0
IsPha
@IBOutlet weak var button: UIButton!

...

Ich denke für den Radius gerade genug diesen Parameter:

button.layer.cornerRadius = 5
0
Iryna Batvina