Jak stworzyć obramowanie w UIButton?

Używam przycisku niestandardowego w mojej aplikacji o nazwie „addButton” i chcę go obramować białym kolorem. Jak mogę uzyskać białą ramkę wokół przycisku niestandardowego?

Możesz ustawić właściwości obramowania w CALayer, uzyskując dostęp do właściwości warstwy przycisku.

Najpierw dodaj kwarc

#import <QuartzCore/QuartzCore.h>

Ustaw właściwości:

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

Widzieć:

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

CALayer w powyższym linku pozwala ustawić inne właściwości, takie jak promień narożnika, maskToBounds itp.

Dobry artykuł na temat zabawy z przyciskami:

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

To bardzo proste, po prostu dodaj nagłówek quartzCore w swoim pliku (w tym celu musisz dodać strukturę kwarcową do swojego projektu)

a następnie zrób to

[[button layer] setCornerRadius:8.0f];

[[button layer] setMasksToBounds:YES];

[[button layer] setBorderWidth:1.0f];

w razie potrzeby można zmienić wartości zmiennoprzecinkowe.

cieszyć się.

Oto typowy nowoczesny kod ...

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;

wygląda podobnie do segmentowanych elementów sterujących.

UPDATE for Swift:

• Nie ma potrzeby dodawania „QuartzCore”

Po prostu zrób:

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

I szybko, nie musisz importować „QuartzCore / QuartzCore.h”

Po prostu użyj:

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

lub

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

Ustawianie warstwy problemem borderWidthi borderColorjest to, że po dotknięciu przycisku granica nie animować efekt podświetlenia.

Oczywiście możesz obserwować zdarzenia przycisku i odpowiednio zmieniać kolor obramowania, ale wydaje się to niepotrzebne.

Inną opcją jest utworzenie rozciągliwego UIImage i ustawienie go jako obrazu tła przycisku. Możesz utworzyć zestaw obrazów w swoich Images.xcassets w następujący sposób:

Następnie ustawiasz go jako obraz tła przycisku:

Jeśli obraz jest szablonem, możesz ustawić odcień przycisku, a obramowanie ulegnie zmianie:

Teraz obramowanie zostanie podświetlone wraz z resztą przycisku po dotknięciu.

Aby zmienić promień, kolor i szerokość przycisku ustawiam w ten sposób:

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;

Oto zaktualizowana wersja ( Swift 3.0.1 ) z Ben Packarda odpowiedź .

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: "")
            }
        }
    }
}

Wynikowy przycisk może być używany wewnątrz StoryBoard dzięki tagom @IBDesignablei @IBInspectable.

Również dwie zdefiniowane właściwości pozwalają ustawić szerokość i kolor obramowania bezpośrednio w programie do tworzenia interfejsu i wyświetlić podgląd wyniku.

Inne właściwości można dodać w podobny sposób, dla promienia obramowania i podświetlenia czasu blaknięcia.

Nie musisz QuartzCore.hteraz importować . Biorąc iOS 8 SDK i Xcode 6.1 w odwołaniu.

Bezpośrednio użyj:

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

Oto UIButtonpodklasa, która obsługuje animację stanu podświetlenia bez używania obrazów. Aktualizuje również kolor obramowania, gdy zmienia się tryb odcienia widoku.

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: "")
            }
        }
    }
}

Stosowanie:

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

Wygląd:

Można to osiągnąć różnymi metodami w Swift 3.0. Pracowano nad najnowszą wersją sierpień - 2017

Opcja 1:

Bezpośrednio przypisz wartości właściwości borderWidth dla przycisku interfejsu użytkownika:

  btnUserButtonName.layer.borderWidth = 1.0

Ustaw tytuł z domyślnymi wartościami koloru dla przycisku interfejsu użytkownika:

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

Ustaw obramowanie z domyślnym kolorem dla wartości właściwości obramowania dla przycisku interfejsu użytkownika:

btnUserButtonName.layer.borderColor = UIColor.red

Ustaw kolor zdefiniowany przez użytkownika dla wartości właściwości obramowania dla przycisku interfejsu użytkownika:

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

Opcja 2: [zalecane]

Użyj metody Extension, aby przycisk w całej aplikacji wyglądał spójnie i nie ma potrzeby powtarzania wielu wierszy kodu w każdym miejscu.

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

Użycie w kodzie:

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

btnUserButtonName.setBordersSettings()

Wyjście przycisku metody rozszerzania:

Zaktualizuj za pomocą Swift 3

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

**** w Swift 3 ****

Aby utworzyć obramowanie

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

Aby narożnik był zaokrąglony

 btnName.layer.cornerRadius = 5

Szybki 5

button.layer.borderWidth = 2

Aby zmienić kolor obramowania, użyj

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