Wie kann ich dafür sorgen, dass eine Schaltfläche in Swift einen abgerundeten Rand hat?

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

Verwenden Sie button.layer.cornerRadius, button.layer.borderColorund button.layer.borderWidth. Beachten Sie, dass ein a borderColorerforderlich ist CGColor, also könnte man sagen (Swift 3/4):

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

Um diesen Job im Storyboard zu erledigen (Interface Builder Inspector)

Mithilfe von IBDesignablekönnen wir dem Interface Builder Inspector weitere Optionen hinzufügen UIButtonund diese im Storyboard optimieren. Fügen Sie Ihrem Projekt zunächst den 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 Schaltflächen im Storyboard fest.

Ich habe eine einfache UIButton-Unterklasse erstellt, die die tintColorfür ihre Text- und Rahmenfarben verwendet und bei Hervorhebung ihren Hintergrund in die ändert 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)
}
}

Dies verwendet eine UIImage-Erweiterung, die ein Bild aus einer Farbe erstellt. Ich habe diesen Code hier gefunden: https://stackoverflow.com/a/33675160

Dies funktioniert am besten, wenn Sie im Interface Builder die Option Benutzerdefiniert eingeben, da der Standardsystemtyp die Farben geringfügig ändert, wenn die Schaltfläche hervorgehoben wird.

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

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

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

Um mit dem Interface Builder eine Schaltfläche für runde Ecken zu erhalten, fügen Sie einen Schlüssel Path = "layer.cornerRadius"mit Type = "Number"und Value = "10"(oder einem anderen erforderlichen Wert) in das " User Defined RunTime Attribute" Identity Inspectorder Schaltfläche ein.

Mit dieser Unterklasse von UIButton können Sie UIButton an Ihre Bedürfnisse anpassen.

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

Ich denke, der einfachste und sauberste Weg ist die Verwendung eines Protokolls, um Vererbung und Codewiederholung zu vermeiden. Sie können diese Eigenschaften direkt im Storyboard ä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 }
    }
}

Aktualisieren

In diesem Link finden Sie ein Beispiel mit dem Dienstprogramm Traceable Protocol

   @IBOutlet weak var yourButton: UIButton! {
        didSet{
            yourButton.backgroundColor = .clear
            yourButton.layer.cornerRadius = 10
            yourButton.layer.borderWidth = 2
            yourButton.layer.borderColor = UIColor.white.cgColor
        }
    }

Stellen Sie neben dem Tipp sicher, dass Ihre Schaltfläche keiner Unterklasse einer benutzerdefinierten Klasse im Storyboard angehört. In diesem Fall sollte Ihr Code am besten in der benutzerdefinierten Klasse platziert werden. Dies liegt daran, dass Code nur außerhalb der benutzerdefinierten Klasse funktioniert, wenn Ihre Schaltfläche eine Unterklasse der Standardklasse ist UIButton-Klasse und Ausgang davon, hoffe, dies kann jedem helfen, sich zu fragen, warum Eckradios nicht auf meinen Button aus Code angewendet werden.

@IBOutlet weak var button: UIButton!

...

Ich denke für Radius gerade genug diesen Parameter:

button.layer.cornerRadius = 5

VERSUCHEN SIE DIESEN Knopfrand mit abgerundeten Ecken

anyButton.backgroundColor = .clear

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

anyButton.layer.borderWidth = 1

anyButton.layer.borderColor = UIColor.black.cgColor

import UIKit

@IBDesignable
class RoundedButton: UIButton {
    
    @IBInspectable var cornerRadius: CGFloat = 8
    @IBInspectable var borderColor: UIColor? = .lightGray
    
    override func draw(_ rect: CGRect) {
        layer.cornerRadius = cornerRadius
        layer.masksToBounds = true
        layer.borderWidth = 1
        layer.borderColor = borderColor?.cgColor
        
    }
    
    
}

Sie können Unterklassen erstellen UIButtonund @IBInspectableVariablen hinzufügen , um die benutzerdefinierten Schaltflächenparameter über das StoryBoard "Attribute Inspector" zu konfigurieren. Unten schreibe ich diesen Code auf.

@IBDesignable
class BHButton: UIButton {

    /*
    // Only override draw() if you perform custom drawing.
    // An empty implementation adversely affects performance during animation.
    override func draw(_ rect: CGRect) {
        // Drawing code
    }
    */

    @IBInspectable lazy var isRoundRectButton : Bool = false

    @IBInspectable public var cornerRadius : CGFloat = 0.0 {
        didSet{
            setUpView()
        }
    }

    @IBInspectable public var borderColor : UIColor = UIColor.clear {
        didSet {
            self.layer.borderColor = borderColor.cgColor
        }
    }

    @IBInspectable public var borderWidth : CGFloat = 0.0 {
        didSet {
            self.layer.borderWidth = borderWidth
        }
    }

    //  MARK:   Awake From Nib

    override func awakeFromNib() {
        super.awakeFromNib()
        setUpView()
    }

    override func prepareForInterfaceBuilder() {
        super.prepareForInterfaceBuilder()
        setUpView()
    }

    func setUpView() {
        if isRoundRectButton {
            self.layer.cornerRadius = self.bounds.height/2;
            self.clipsToBounds = true
        }
        else{
            self.layer.cornerRadius = self.cornerRadius;
            self.clipsToBounds = true
        }
    }

}

Ich denke, das ist die einfache Form

        Button1.layer.cornerRadius = 10(Half of the length and width)
        Button1.layer.borderWidth = 2