2015-02-13 14 views
10

Wie kann ich einen UIButton Rahmen so aussehen lassen, dass er im unteren Bild (die "Erste Schritte") -Schaltfläche mit einem transparenten Hintergrund aussieht?Button Border mit transparentem Hintergrund in Swift

Wie soll ich dies mit dem Storyboard erreichen oder wie programmgesteuert?

enter image description here

+2

Haben Sie etwas versucht? Was hast du versucht? Was hat nicht funktioniert? –

Antwort

27

Einstellen der backgroundColor-clearColor macht die Schaltfläche transparent.
Probieren Sie den folgenden Code zum Beispiel. Sie können BorderAlpha, CornerRadius und Farben nach Ihren Wünschen konfigurieren und variieren.

let borderAlpha : CGFloat = 0.7 
let cornerRadius : CGFloat = 5.0 

button.frame = CGRectMake(100, 100, 200, 40) 
button.setTitle("Get Started", forState: UIControlState.Normal) 
button.setTitleColor(UIColor.whiteColor(), forState: UIControlState.Normal) 
button.backgroundColor = UIColor.clearColor() 
button.layer.borderWidth = 1.0 
button.layer.borderColor = UIColor(white: 1.0, alpha: borderAlpha).CGColor 
button.layer.cornerRadius = cornerRadius 
3

mit Erweiterung:

extension UIButton 
{ 
func setUpLayer(sampleButton: UIButton?) { 
    sampleButton!.setTitle("GET STARTED", forState: UIControlState.Normal) 
    sampleButton?.tintColor = UIColor.whiteColor() 
    sampleButton!.frame = CGRect(x:50, y:500, width:170, height:40) 
    sampleButton!.layer.borderWidth = 1.0 
    sampleButton!.layer.borderColor = UIColor.whiteColor().colorWithAlphaComponent(0.5).CGColor 
    sampleButton!.layer.cornerRadius = 5.0 

    sampleButton!.layer.shadowRadius = 3.0 
    sampleButton!.layer.shadowColor = UIColor.whiteColor().CGColor 
    sampleButton!.layer.shadowOpacity = 0.3 
} 

} 

Verbrauch:

let sampleUIButton = UIButton() 
    sampleUIButton.setUpLayer(sampleUIButton) 
    self.view.addSubview(sampleUIButton) 
1

Mit Swift 3, für Storyboard, fügen Sie einfach diese Unterklasse zu einem Projekt, dann im Identity-Inspektoren machen Dies ist die Klasse für den UIButton auf Ihrem Storyboard. Sie sollten dann in der Lage sein, die Farbe und Breite der Boarder anzupassen.

@IBDesignable class CustomButton: UIButton { 

@IBInspectable var borderColor: UIColor = UIColor.white { 
    didSet { 
     layer.borderColor = borderColor.cgColor 
    } 
} 

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

override public func layoutSubviews() { 
    super.layoutSubviews() 
    clipsToBounds = true 
} 
} 
Verwandte Themen