13. Februar 2017

UIButton mit Outline versehen

Im Folgenden wird gezeigt, wie ein UIButton mit einer Outline versehen werden kann:

Button Border

Die einfachste Variante ist das Setzen eines Inset-Abstandes für die Abstände zur Außenkante:

Content Inset

Die Eigenschaften für eine Umrandung können über CGLayer im Code gesetzt werden:

class ViewController: UIViewController {

    @IBOutlet weak var button: UIButton!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        button.layer.borderWidth = 1
button.layer.borderColor = button.tintColor.cgColor
button.layer.cornerRadius = 5
    }

}

Tipp: Mit UIViewInspectable.swift können diese Eigenschaften auch im Interface Builder konfiguriert werden:

Ibinspectable

Eine Alternative dazu ist die Verwendung eines Hintergrundbildes. Damit können auch weitergehende Effekte erreicht werden. In Sketch kann beispielsweise eine entsprechende Grafik vorbereitet und als größenunabhängiges PDF exportiert werden:

Border Sketch

Die Grafik kann in Xcode in Images.xcassets übernommen werden und dort mit einem Slicing versehen werden, so dass nur der Innenbereich skaliert wird, der Kantenbereich aber von der Skalierung ausgenommen wird:

Asset

Dazu müssen die Slices auf die Kantenbereiche beschränkt werden und der Innenbereich als Stretches (größer skalieren) statt Tiles (kacheln) konfiguriert werden:

Asset Slicing
iOS Training Schulung Workshop
Nächste iOS-Schulung:
21. – 25. Oktober 2019
München
iOS Buch
iOS 12-Apps entwickeln mit Swift & Xcode 10