CALayer — UIButton modifizieren

article_header_2

Nach der Modifizierung eines Bildes mithilfe der CALayer-Eigenschaften, geht es im dritten Teil darum die Ecken eines UIButtons abzurunden.

Dafür existiert die CALayer Property cornerRadius. Im Gegensatz zu den beiden vorherigen Artikeln, nutzen wir keinen Playground, sondern erstellen ein kleines iOS-Projekt. Diese App soll lediglich “Hello World!” anzeigen, sobald der Nutzer einen Button berührt.

Wer mit der Erstellung eines Xcode-Projektes vertraut ist, kann direkt zum Abschnitt “Den Button modifizieren” weiter unten auf dieser Seite navigieren.

Das Grundgerüst

Startet Xcode und legt ein neues Projekt an. Wählt im Abschnitt iOS als Applikations-Typ “Single View Application” aus.

Create a new iOS app in Xcode

Im nächsten Fenster gebt Ihr dem Projekt einen Namen. In meinem Fall heißt die App “CALayerButtonExample”. Achtet darauf, dass “Swift” als Sprache ausgewählt ist, und es sich um eine iPhone-App handelt. Etwaige Häkchen bei Core Data oder den Tests müssen nicht gesetzt werden.

basic configuration for new iOS app

Nach einem Klick auf “Next” kann im nächsten Fenster das Zielverzeichnis festgelegt werden. “Create Git Repository on” lasst Ihr deaktiviert.

Kümmern wir uns im Interface Builder (IB) zunächst um das Aussehen der App. Öffnet dazu “Main.storyboard” und fügt zur View ein UILabel und einen UIButton hinzu. Hinsichtlich des Aussehens mache ich nicht viel Aufhebens, sondern zentriere und vergrößere die Elemente etwas.

Ihr solltet nun das Label und den Button auswählen, unten rechts auf “Resolve Auto Layout Issues” klicken und unter “Selected Views” die Option “Reset to Suggested Constraints” auswählen. Damit werden alle erforderlichen Constraints hinzugefügt, so dass die Elemente später an der richtigen Stelle dargestellt werden.

reset to suggested constraints

Um sicherzustellen, dass alles funktioniert, könnt Ihr nun Euer Projekt kompilieren und im Simulator einmal ausführen.

 

iOS app with uilabel and uibutton

 

Als nächstes soll der Button einen grünen Hintergrund erhalten. Wählt Ihn dazu aus und sucht im Attributes Inspector im Bereich View nach Background. Dort kann die Hintergrundfarbe definiert werden. Da der blaue Text “Button” jetzt schwer zu lesen ist, habe ich zusätzlich noch bei Text Color die Farbe auf “Dark Text Color” gesetzt.

 

Damit Interaktionen möglich sind, müssen die UI-Elemente nun noch mit der Controller-Klasse (hier: ViewController) verknüpft werden. Dafür nutze ich den “Assistant Editor”, der über die obere rechte Button-Leiste geöffnet werden kann. Anschließend ziehe ich bei gedrückter Ctrl-Taste mit der linken Maustaste eine Linie vom Label und anschließend vom Button in die Controller-Klasse. Dies veranlaßt Xcode dazu, in der Klasse ViewController die erforderlichen Outlets zu generieren.

add IB outlets

 

Letztendlich erhalte ich nachfolgenden Code, wobei ich mein Label als “helloLabel” und meinen Button als “showButton” bezeichnet habe.

class ViewController: UIViewController {

    // IB outlets
    @IBOutlet weak var helloLabel: UILabel!
    @IBOutlet weak var showButton: UIButton!

    override func viewDidLoad() {
        super.viewDidLoad()
        // Code goes here...
    }
}

Die Methode didReceiveMemoryWarning() habe ich gelöscht, da sie nicht benötigt wird.

Den Button modifizieren

Nun geht es daran, die Ecken abzurunden. Wie bereits erwähnt, nutzen wir dazu die CALayer Property cornerRadius. Der erforderliche Code wird in die Methode viewDidLoad() eingefügt:

override func viewDidLoad() {
    super.viewDidLoad()

    showButton.layer.cornerRadius = 15
}

Die Code-Zeile ist recht simpel: Mit

showButton.layer.cornerRadius

soll cornerRadius festgelegt werden. Je größer der zugewiesene Wert ist, dester deutlicher ist die Rundung. Eine sehr gleichmäßige Form erhaltet Ihr übrigens, wenn die Höhe des Buttons durch zwei dividiert wird:

showButton.layer.cornerRadius = showButton.bounds.height/2.0

IBAction hinzufügen

Aber es fehlt noch etwas: Bei einer Berührung des Buttons soll “Hello World!” angezeigt werden. Dafür muss der Button wiederum mit dem ViewController verknüpft werden. Diesmal erzeugen wir aber kein Outlet, sondern eine Action. Dafür nutze ich wiederum den “Assistant Editor” im Interface Builder, der über die obere rechte Button-Leiste geöffnet werden kann. Anschließend ziehe ich bei gedrückter Ctrl-Taste mit der linken Maustaste eine Linie vom Button in die Controller-Klasse. Bei Connection muss nun aber Action ausgewählt werden. Als Name verwende ich showText.

add IB action in iOS project

In der ViewController-Klasse findet sich nun folgender Code:

@IBAction func showText(_ sender: Any) {
}

Zu dieser Methode fügt Ihr folgende Zeile hinzu:

helloLabel.text = "Hello World!"

Persönlich finde ich es übrigens schöner, anstelle des Parametertyps “Any” den spezielleren Typ “UIButton” zu verwenden. Der komplette Code sieht dann wie folgt aus:

import UIKit

class ViewController: UIViewController {

    // IB outlets
    @IBOutlet weak var helloLabel: UILabel!
    @IBOutlet weak var showButton: UIButton!

    override func viewDidLoad() {
        super.viewDidLoad()
        showButton.layer.cornerRadius = 15
        //showButton.layer.cornerRadius = showButton.bounds.height/2.0
    }

    @IBAction func showText(_ sender: UIButton) {
        helloLabel.text = "Hello World!"
    }
}

Durch Benutzung dieser Website erklären Sie sich mit der Verwendung von Cookies einverstanden. Mehr Informationen

Die Verwendung von Cookies dient dazu, Inhalte und Anzeigen zu personalisieren, Funktionen für soziale Medien anbieten zu können und die Zugriffe auf diese Website zu analysieren. Außerdem werden Informationen zur Nutzung dieser Webseite an Partner für soziale Medien, Werbung und Analysen weitergegeben.

Schließen