• Blog
    Unterstützung für Ihre Anwendung

Swift 4 – Custom Renderer, die eigene stilvolle App

Du möchtest Deine App mit Deinem ganz eigenen Stil gestalten? Da wäre es doch schön, wenn alles so aussieht, wie Du es Dir vorstellst, nicht wahr? Hier lernst Du, wie Du Deine App so gestaltest. Jeder soll sehen, dass es Deine App ist. Sie soll sich von den Standardapps abheben.

Wichtigkeit des eigenen Stils

Es gibt viele Apps da draußen, einige können viel, sehen aber oft nicht gut aus. Heute ist es besonders wichtig, die App intuitiv zu gestalten. Das passiert nicht nur durch die richtige Platzierung der Buttons. Nein, es muss sich ein Stil der Oberfläche durch die App als roter Faden ziehen. So fällt es dem Benutzer viel leichter, diese zu bedienen. Sein Unterbewusstsein merkt sich, welche Farbe was zu bedeuten hat und auch das Element wird durch die Form schnell wahrgenommen.

Nun ist jedoch die Frage, wie soll ein Button noch außergewöhnlicher gestaltet werden, als der Standard es vorgibt. Da bist Du hier vollkommen richtig, denn darum soll es eigentlich gehen. Jedes Element kann mit einer eigenen Klasse völlig verändert werden. So kann für eine jede Art von Element eine eigene Klasse bzw. ein Custom Renderer entwickelt werden und angewendet werden. Unser Beispiel wird die Veränderung eines Buttons vorzeigen. Das ist jedoch auf andere Elemente übertragbar. Achtung: Jede Art von Element benötigt nur einen Custom Renderer. Wenn Du einen Custom Renderer für einen Button programmiert hast, kannst Du diesen für alle nutzen.

Entwickeln des Custom Renderers

Zielsetzung des Designs

Zu aller erst müssen wir uns ein Ziel setzen. Der Button in diesem Beispiel soll neben den Standardeinstellungen einen Radius an allen Ecken haben. Somit wird der Button sehr weich und vielen Designs von heute entsprechen. Während der Button betätigt wird, soll er langsam dunkler werden und beim Beenden der Betätigung, also beim Lösen des Fingers vom Button, soll die Farbe dessen wieder in ihren Ausgangszustand gehen. Um das wieder etwas weicher zu gestalten, soll das durch eine Animation geschehen. Natürlich muss das Ziel nicht von vornerein feststehen. Hier ist auch viel Probieren richtig, bis der eigene Stil entdeckt wird, der dann auch dem Inhalt der App entspricht.

Erstellung der Custom Renderer

Bevor die Klasse für den Custom Renderer erstellt wird, kann ich empfehlen eine Ordner Struktur zu erstellen. Ich habe dafür einen Ordner namens „Views“ erstellt. In diesem Ordner sichere ich alle Views zu den bestimmten Seiten der App, die ich im Storyboard erstellt habe. Für die Custom Renderer erstelle ich einen „Common“ Ordner und hier dann einen Ordner für die „Controls“. Hier kommen alle Views für die allgemeinen Elemente rein. Im Folgenden ein Bild als Beispiel.

swift projekt struktur

Hier wird nun eine neue Datei erstellt. Rechtsklick auf den Ordner Controls, dann Cocoa Touch auswählen. Einen Namen der Klasse eingeben, wie in meinem Fall „CustomButton“, als Subclass den UIButton auswählen und dann die Programmiersprache Swift auswählen. Der Code in der Klasse „Custom Button müsste nun wie folgt aussehen:

swift uibutton custom class

Initialisieren der Werte

Hier dürfen nun, sowohl das „/*“ als auch das „*/“ Zeichen gelöscht werden, da wir die Methode „draw“ nicht auskommentiert haben möchten. Zu aller erst müssen wir ein @IBDesignable über die Klasse schreiben, damit unsere Änderungen im Storyboard auch angezeigt werden können.

Nun können die ersten Eigenschaften angelegt werden, um den Button zu verändern. Wenn wir den Button in der Form ändern wollen, müssen wir auch die Hintergrundfarbe neben den Standard noch als Custom einfügen. Wenn wir hier den Standard nehmen würden, würde die Standard-Hintergrundfarbe unseren Radius an den Ecken überdecken uns sie wären somit nicht zu sehen. Ich füge also eine Farbe als Eigenschaft hinzu, die die Füllung übernimmt. Dazu kommt eine Farbe, die eingeblendet werden soll, sobald geklickt wird und die Werte für den Radius. Zu jeder Eigenschaft müssen wir ein „@IBInspectable“ hinzufügen, damit wir sie aus dem Storyboard verändern können und auch einen Standardwert müssen wir für die Initialisierung hinzufügen. Das sieht wie folgt aus:

swift eigenschaftem custom class

Als nächstes wird der Button im wahrsten Sinne des Wortes gezeichnet. In überschriebenen Funktion „draw“ werden die Eigenschaften initialisiert. Somit wird der Radius der Ecken nun mit „cornerRadius“ gesetzt. Der „cornerRadius“ liegt im layer des Buttons. Somit schreiben wir „layer.cornerRadius = cornerRadius“. Das gleiche für die Hintergrundfarbe „layer.backgroundColor = fillColor.cgColor“. Damit der „CustomButton“ auch angeklickt werden kann, schreiben wir noch ein „self.isUserInteractionEnabled = true“.

Animation beim Klicken

Damit wird der Button nun richtig gezeichnet. Jedoch haben wir die „clickColor“ noch nicht initialisiert. Dafür überschreiben wir die Funktionen „touchesBegan“ und „touchesEnded“. Damit die Änderung der Hintergrundfarbe auch leicht animiert wird, wird die Methode UIView.animate genutzt. „withDuration“ gibt die Dauer der Animation an, wie in diesem Fall 0.1 und 0.2 und „animations“ gibt die Art der Animation an. Die gleicht der Initialisierung in der „draw“ Methode „self.layer.backgroundColor = self.clickColor.cgColor“. Das self füge ich aus Gründen der besseren Übersicht hinzu. Das Ergebnis sieht folgendermaßen aus:

swift animation

Die „super“-Methoden sind dafür da, damit die Basismethode „touchesBegan“ und „touchesEnded“ auch ausgeführt werden. Da hier alle Werte gesetzt werden ist es nun wichtig, diese auch im Storyboard zu verwenden. Das soll nun als nächstes passieren.

Verwendung im Storyboard

Dafür fügen wir in einem beliebigen ViewController einen Standard-Button ein, welchen wir nun bearbeiten möchten. Und fügen eine „Custom Class“ ein. Diese „Custom Class“, ist unsere „CustomButton“ Klasse, die wir soeben erstellt haben.

swift custom class

Jetzt sind die Eigenschaften, die wir hinzugefügt haben, in den Darstellungseinstellungen für den Button zu sehen. Hier können nun beliebige Werte eingesetzt werden. Vorher müssen wir aber die Standardhintergrundfarbe auf transparent setzen. Ich setze nun bei „FillColor“ eine Farbe ein, die ich für „ClickColor“ dann einfach verdunkle. Sprich, wenn ich bei „FillColor“ ein Grün nehme, nehme ich für „ClickColor“ ein dunkles Grün. Somit wird der Klick deutlich sichtbar. Die Höhe des Buttons habe ich auf 40 gesetzt, und den Radius auf 20. So ist der Button außen etwas runder und macht einen weichen Eindruck.

swift custom properties swift custom button demo

Das Ergebnis sieht gut aus. Wir haben unser Ziel erreicht. Nun hast Du die Möglichkeit weiter damit herumzuspielen. Es gibt noch viele Möglichkeiten den Button oder auch andere Elemente zu verändern und einen individuellen Stil zu schaffen. Viel Erfolg dabei!