Wie erstelle ich einen Rahmen in UIButton?

Ich verwende in meiner App eine benutzerdefinierte Schaltfläche mit dem Namen "addButton" und möchte sie mit weißer Farbe umrahmen. Wie kann ich die weiße Farbe um meine benutzerdefinierte Schaltfläche herum einrahmen?

Sie können die Randeigenschaften im CALayer festlegen, indem Sie auf die Ebeneneigenschaft der Schaltfläche zugreifen.

Fügen Sie zuerst Quarz hinzu

#import <QuartzCore/QuartzCore.h>

Eigenschaften festlegen:

myButton.layer.borderWidth = 2.0f;
myButton.layer.borderColor = [UIColor greenColor].CGColor;

Sehen:

https://developer.apple.com/documentation/quartzcore/calayer#//apple_ref/occ/cl/CALayer

Mit dem CALayer im obigen Link können Sie andere Eigenschaften wie Eckenradius, maskToBounds usw. festlegen.

Auch ein guter Artikel über Knopfspaß:

https://web.archive.org/web/20161221132308/http://www.apptite.be/tutorial_custom_uibuttons.php

Es ist sehr einfach, fügen Sie einfach den quartzCore-Header in Ihre Datei ein (dafür müssen Sie das Quarz-Framework zu Ihrem Projekt hinzufügen).

und dann mach das

[[button layer] setCornerRadius:8.0f];

[[button layer] setMasksToBounds:YES];

[[button layer] setBorderWidth:1.0f];

Sie können die Float-Werte nach Bedarf ändern.

genießen.

Hier ist ein typischer moderner Code ...

self.buttonTag.layer.borderWidth = 1.0f;
self.buttonCancel.layer.borderWidth = 1.0f;

self.buttonTag.layer.borderColor = [UIColor blueColor].CGColor;
self.buttonCancel.layer.borderColor = [UIColor blueColor].CGColor;

self.buttonTag.layer.cornerRadius = 4.0f;
self.buttonCancel.layer.cornerRadius = 4.0f;

Das sieht ähnlich aus wie bei segmentierten Steuerelementen.

UPDATE für Swift:

• "QuartzCore" muss nicht hinzugefügt werden.

Mach einfach:

button.layer.cornerRadius = 8.0
button.layer.borderWidth = 1.0
button.layer.borderColor = UIColor.black.cgColor

Und in Kürze müssen Sie "QuartzCore / QuartzCore.h" nicht importieren.

Benutz einfach:

button.layer.borderWidth = 0.8
button.layer.borderColor = (UIColor( red: 0.5, green: 0.5, blue:0, alpha: 1.0 )).cgColor

oder

button.layer.borderWidth = 0.8
button.layer.borderColor = UIColor.grayColor().cgColor

Das Problem der Schicht der Einstellung borderWidthund borderColorist , dass die , wenn Sie die Taste berühren nicht die Grenze nicht den Highlight - Effekt animieren.

Natürlich können Sie die Ereignisse der Schaltfläche beobachten und die Rahmenfarbe entsprechend ändern, aber das ist unnötig.

Eine weitere Option besteht darin, ein dehnbares UIImage zu erstellen und es als Hintergrundbild der Schaltfläche festzulegen. Sie können einen Bildsatz in Ihren Images.x-Kassetten wie folgt erstellen:

Dann legen Sie es als Hintergrundbild der Schaltfläche fest:

Wenn es sich bei Ihrem Bild um ein Vorlagenbild handelt, können Sie die Farbtonfarbe der Schaltfläche festlegen. Der Rand ändert sich:

Jetzt wird der Rand beim Berühren mit dem Rest der Schaltfläche hervorgehoben.

Um die Schaltfläche Radius, Farbe und Breite zu ändern, stelle ich Folgendes ein:

self.myBtn.layer.cornerRadius = 10;
self.myBtn.layer.borderWidth = 1;
self.myBtn.layer.borderColor =[UIColor colorWithRed:189.0/255.0f green:189.0/255.0f blue:189.0/255.0f alpha:1.0].CGColor;

Hier ist eine aktualisierte Version ( Swift 3.0.1 ) von Ben Packards Antwort .

import UIKit

@IBDesignable class BorderedButton: UIButton {

    @IBInspectable var borderColor: UIColor? {
        didSet {
            if let bColor = borderColor {
                self.layer.borderColor = bColor.cgColor
            }
        }
    }

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

    override var isHighlighted: Bool {
        didSet {
            guard let currentBorderColor = borderColor else {
                return
            }

            let fadedColor = currentBorderColor.withAlphaComponent(0.2).cgColor

            if isHighlighted {
                layer.borderColor = fadedColor
            } else {

                self.layer.borderColor = currentBorderColor.cgColor

                let animation = CABasicAnimation(keyPath: "borderColor")
                animation.fromValue = fadedColor
                animation.toValue = currentBorderColor.cgColor
                animation.duration = 0.4
                self.layer.add(animation, forKey: "")
            }
        }
    }
}

Die resultierende Schaltfläche kann dank der Tags @IBDesignableund in Ihrem StoryBoard verwendet werden @IBInspectable.

Mit den beiden definierten Eigenschaften können Sie die Rahmenbreite und -farbe direkt im Interface Builder festlegen und eine Vorschau des Ergebnisses anzeigen.

Andere Eigenschaften könnten auf ähnliche Weise hinzugefügt werden, um den Randradius und die Überblendzeit hervorzuheben.

Sie müssen jetzt nicht importieren QuartzCore.h. Nehmen Sie iOS 8 SDK und Xcode 6.1 als Referenz.

Direkt verwenden:

[[myButton layer] setBorderWidth:2.0f];
[[myButton layer] setBorderColor:[UIColor greenColor].CGColor];

Hier ist ein UIButton Unterklasse, die die Animation mit hervorgehobenem Status ohne Verwendung von Bildern unterstützt. Außerdem wird die Rahmenfarbe aktualisiert, wenn sich der Farbtonmodus der Ansicht ändert.

class BorderedButton: UIButton {
    override init(frame: CGRect) {
        super.init(frame: frame)

        layer.borderColor = tintColor.CGColor
        layer.borderWidth = 1
        layer.cornerRadius = 5

        contentEdgeInsets = UIEdgeInsets(top: 5, left: 10, bottom: 5, right: 10)
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("NSCoding not supported")
    }

    override func tintColorDidChange() {
        super.tintColorDidChange()

        layer.borderColor = tintColor.CGColor
    }

    override var highlighted: Bool {
        didSet {
            let fadedColor = tintColor.colorWithAlphaComponent(0.2).CGColor

            if highlighted {
                layer.borderColor = fadedColor
            } else {
                layer.borderColor = tintColor.CGColor

                let animation = CABasicAnimation(keyPath: "borderColor")
                animation.fromValue = fadedColor
                animation.toValue = tintColor.CGColor
                animation.duration = 0.4
                layer.addAnimation(animation, forKey: "")
            }
        }
    }
}

Verwendung:

let button = BorderedButton(style: .System) //style .System is important

Aussehen:

Dies kann mit verschiedenen Methoden in Swift 3.0 erreicht werden. Arbeitete an der neuesten Version von August bis 2017

Option 1:

Weisen Sie die borderWidth-Eigenschaftswerte für die UI-Schaltfläche direkt zu:

  btnUserButtonName.layer.borderWidth = 1.0

Titel mit Standardfarbwerten für die UI-Schaltfläche festlegen:

btnUserButtonName.setTitleColor(UIColor.darkGray, for: .normal)

Festlegen des Rahmens mit der Standardfarbe für die Rahmeneigenschaftswerte für die UI-Schaltfläche:

btnUserButtonName.layer.borderColor = UIColor.red

Festlegen der benutzerdefinierten Farbe für die Rahmeneigenschaftswerte für die UI-Schaltfläche:

   let myGrayColor = UIColor(red: 0.889415, green: 0.889436, blue:0.889424, alpha: 1.0 )
   btnUserButtonName.layer.borderColor = myGrayColor.cgColor

Option 2: [Empfohlen]

Verwenden Sie die Erweiterungsmethode, damit die Schaltfläche in der gesamten Anwendung konsistent aussieht und nicht überall mehrere Codezeilen wiederholt werden müssen.

//Create an extension class in any of the swift file

extension UIButton {
func setBordersSettings() {
        let c1GreenColor = (UIColor(red: -0.108958, green: 0.714926, blue: 0.758113, alpha: 1.0))
        self.layer.borderWidth = 1.0
        self.layer.cornerRadius = 5.0
        self.layer.borderColor = c1GreenColor.cgColor
        self.setTitleColor(c1GreenColor, for: .normal)
        self.layer.masksToBounds = true
    }
}

Verwendung im Code:

//use the method and call whever the border has to be applied

btnUserButtonName.setBordersSettings()

Ausgabe der Erweiterungsmethode Schaltfläche:

Update mit Swift 3

    button.layer.borderWidth = 0.8
    button.layer.borderColor = UIColor.blue.cgColor

**** In Swift 3 ****

Rand erstellen

 btnName.layer.borderWidth = 1
 btnName.layer.borderColor = UIColor.black.cgColor

Ecke abgerundet machen

 btnName.layer.cornerRadius = 5

Swift 5

button.layer.borderWidth = 2

Um die Farbe des Rahmens zu ändern, verwenden Sie

button.layer.borderColor = CGColor(srgbRed: 255/255, green: 126/255, blue: 121/255, alpha: 1)