icancode.de

Programmierung

Buttons im Code erstellen & manipulieren

Veröffentlicht am .

Buttons im Code erstellen & manipulieren

Einleitung

In diesem Beitrag wollen wir uns mit der programmatischen Erstellung, bzw. der Manipulation von Buttons mit Hilfe der Programmiersprache Swift beschäftigen.

Erfahrene Nutzer von Xcode werden jetzt sagen: „Warum mit Code Buttons erstellen? Warum nicht mit dem Interface-Builder?“
Und da habt ihr grundlegend recht, allerdings kam ich kürzlich bei der Arbeit an meiner App (travmedic.de) an einen Punkt an dem mir der Interface-Builder ein merkwürdiges Button-Verhalten für das ändern der UIControlStates ausgab – aber dazu gleich mehr.

Worum es gleich konkret gehen wird:

  • Wir erstellen einen Button mit Code
  • Wir ändern den Status des Buttons (Normal, Highlighted, Selected, Disabled) mit Code
  • Wir setzen verschiedene Attribute abhängig des gewünschten Status
  • Wir schaffen es den gewählten Status optisch zu fixieren

Vorbereitung:

Natürlich habt ihr einen Mac sowie Xcode bereits heruntergeladen und installiert.
Hinweis: Für das reine Arbeiten mit Xcode und Preview der App im Simulator wird keinerlei Apple Development Membership benötigt! Erst für das echte Deployment (und ein Dutzend anderer Vorteile) innerhalb des App Stores.

Im ersten Schritt starten wir Xcode und legen ein neues Projekt an.
Wir wählen hier die SingleViewApplication. Die Benennung obliegt euch. Core Data ist nicht erforderlich.

Nun ist das Fundament gelegt und wir können mit einigen wenigen Handgriffen innerhalb des MainStoryboard einen neuen UIViewController anlegen. Am rechten oberen Bildrand findet ihr 3 Buttons zur Aktivierung oder Deaktivierung von bestimmten Bildschirminhalten. Wir benötigen nun den 3. der Buttons – die sogenannten Utilities.

Einmal aktiviert findet ihr nun der eben geöffneten Leiste nach unten folgend Objekte die ihr nun per Drag&Drop platzieren könnt. Wir wählen einen ViewController. Soweit so gut – um nun aber mit diesem View „sprechen“ zu können benötigen wir eine dazu passende Klasse. Wir gehen also auf der linken Seite, wo ihr auch das StoryBoard finden könnt, direkt auf das StoryBoard (ihr könnt auch auf jedes andere Element klicken, solltet aber in der gleichen Ebene bleiben) und drückt CMD + N. Hier achten wir darauf, das wir uns im iOS-Bereich bewegen und wählen im Reiter Source das Objekt Cocoa Touch Class. Entsprechend dem View benennen und im App-Ordner (i.d.R alles vorausgewählt) erstellen.

Nun, da wir den Klassennamen haben, verbinden wir ihn mit dem View in dem die Buttons erstellt werden sollen. Dazu navigieren wir im StoryBoard zum entsprechenden View, klick auf das gelbe Symbol oberhalb und wählen in der rechten Leiste den Identity Inspector (das Symbol erinnert an ein Bild das vom Text umflossen wird).

Dort tragen wir in die erste Zeile den Namen der eben erstellten Klasse ein (Autovervollständigung erledigt den Rest).

Let’s write some code

Wir navigieren einfach auf die erstelle Klasse und entdecken dort einiges an vorgefertigtem Code – dieser soll uns für’s erste nicht stören.
Was uns jedoch brennend interessiert ist die Funktion viewDidLoad() – hier werden alle Elemente zur Laufzeit erzeugt – ihr seht den erstellten Button also nicht im Interface-Builder.

Dort angekommen löschen wir die Kommentare (darauf achten, die geschweiften Klammern nicht zu löschen) und platzieren unsere Variable, die den Button hält:

var Button: UIButton! = UIButton.buttonWithType(UIButtonType.System) as! UIButton

Nun füllen wir die Variable mit Leben:

//Button wird in der linken oberen Ecke (x:0,y:0) in der Größe 100x100 erstellt.
Button.frame = CGRectMake(0, 0, 100, 100) 
Button.backgroundColor = UIColor(red:0.94, green:0.94, blue:0.94, alpha:1)
Button.titleLabel?.font = UIFont.systemFontOfSize(16)

//nötig um beim Deselect des Buttons keine merkwürdige Hintergrundfarben-Animation zu generieren.
Button.tintColor = UIColor.clearColor() 

//Dieser Befehl fügt den Button letztendlich als Subview zum gewählten View hinzu.
self.view.addSubview(Button as UIView) 

//Konfigurationen abhängig vom UIControlState
Button.setTitle("Code", forState: UIControlState.Normal)
Button.setTitle("", forState: UIControlState.Selected) // nil funktioniert nicht, da ein String gefordert ist
Button.setTitleColor(UIColor(red:0.67, green:0.67, blue:0.67, alpha:1), forState: UIControlState.Normal)
Button.setTitleShadowColor(UIColor(red:0.94, green:0.94, blue:0.94, alpha:1), forState: UIControlState.Normal)
Button.setBackgroundImage(UIImage(named: "done"), forState: UIControlState.Selected)

Hier habe ich für den ButtonState Selected ein Hintergrundbild vorgesehen, das die Auswahl des Buttons optisch bestätigt – hier könnt ihr euch eine beliebige Grafik anfertigen, müsst sie aber in den ImageAssets platzieren um sie für Xcode zugänglich zu machen.

Jetzt haben wir einen Button zur Laufzeit erzeugt, können aber den State noch nicht halten. Das Hintergrundbild bleibt also nur solange bestehen, wie die Touch Gesture registriert wird. Hierfür gibt es einen kleinen Hack.

Zunächst wollen wir dem Button sagen, dass er beim Tapping eine Aktion vollführen soll:

Button.addTarget(self, action: "buttonClicked:", forControlEvents: UIControlEvents.TouchUpInside)

Gemäß Button.addTarget wird folgende Funktion ausgeführt die dafür sorgt, das unser Button den State .selected hält:

func buttonClicked(sender:UIButton){ 
    sender.selected = !sender.selected;
}

Wenn alle passt, solltet ihr nun einen funktionsfähigen Button haben, der auf Knopfdruck den State wechselt.

Happy Coding!

Marcus Hopp

Marcus Hopp

http://travmedic.de

Navigation