Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

App-Entwicklung mit iOS Grundkurs 1: Meine erste eigene App

Reaktion auf eine Schaltfläche

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Sehr oft muss man dynamisch auf das Auslösen einer Komponente wie einer Schaltfläche im Code reagieren. Der Film erklärt, wie man die Reaktion auf eine Schaltfläche verwerten kann. Die Kerntechnik ist eine Action-Connection und die daraus resultierende Action-Methode.

Transkript

Es ist die typische Aufgabe einer App, auf Benutzeraktion zu reagieren, beispielsweise wenn ein Anwender auf einen Button klickt oder, wenn Sie an ein mit den Fingern bedientes Gerät wie ein iPhone denken, wenn er mit dem Finger drauf tippt. Grundsätzlich gibt es also Komponenten in der Oberfläche, in der View, die müssen auf Events, Ereignisse, reagieren oder Actions. Wir werden uns jetzt ansehen am einfachsten denkbaren Beispiel, wie so etwas ablaufen kann, das heißt, wir nehmen eine Schaltfläche und wir nehmen ein Label und sobald der Anwender diese Schaltfläche auslöst, wird das Label aktualisiert. Wie gesagt, die wohl denkbar einfachste Möglichkeit, so eine Reaktion zu sehen. Ich habe jetzt hier Xcode in einer zugegeben sehr unübersichtlichen Version, das heißt, ich habe diverse kleinere Fensterchen hier auf, die den verfügbaren Platz doch ziemlich einschränken. Wir werden gleich etwas Platz schaffen. Was ich aber haben möchte, ist das Storyboard, hier nachher auf der linken Seite von Xcode zu sehen, und den View Controller, die SWIFT-Datei auf der rechten Seite, hier. Um das so nebeneinander anzuordnen, gibt es diverse Möglichkeiten. Mit die einfachste ist, dass Sie hier diese Schaltfläche auswählen für diese Assistant Editors. Dann werden die nebeneinander sichtbar oder man kann sie nebeneinander anordnen, wie man immer auch möchte. Ich brauche jetzt erstmal diesen Navigator-Bereich nicht mehr und blende ihn weg. Damit habe ich schon mal ein bisschen mehr Platz. Und irgendwie brauche ich da aber doch mein iPhone hier, mit dem ich dann arbeiten kann. Das ist der Controller. Mit dem werde ich eine ganze Menge jetzt machen, aber wir brauchen ja die Komponenten überhaupt erstmal auf der Oberfläche. Über diesen Utility-Bereich können Sie das Label und auch die Schaltfläche hier einfach reinziehen. Die muss ich aber erstmal finden in der "Objekt"-Bibliothek. Und es gibt die Möglichkeit, dass Sie hier diese "Objekt"-Bibliothek durch diese runde Schaltfläche und dieses Rechteck darin, dieses Quadrat, einfach durch Scrollen suchen. Diese Schaltfläche hier, "Show Icon View", macht die Sache ein bisschen einfacher. Das heißt, Sie kriegen da nur die Symbole für visuelle Objekte angezeigt. Und hier kann man relativ einfach das Label finden und auch den Button. Es gibt hier auch eine Filtermöglichkeit, das heißt, wenn wir so in diese Liste wieder reingehen und Sie geben hier in dem Filter zum Beispiel "Button" an, dann wird dieser Button relativ schnell sichtbar, oder auch Label, solange Sie nicht zu weit diese Eingabe machen. Und dann stimmt das hier nicht mehr überein, dann wird das auch nicht mehr angezeigt. Aber grundsätzlich, wenn Sie wissen, wie die Komponente heißt, dann ist der Filter eine sehr gute Möglichkeit, diese Komponenten zu finden. Die andere, wie gesagt, das hier, oder aber Sie haben tatsächlich die Liste und Sie scrollen hier einfach durch, bis Sie es gefunden haben. Ich ziehe jetzt das Label hier auf die Oberfläche und ich ziehe den Button genauso auf diese Oberfläche. Wie ich die anordne, das soll erstmal nebensächlich sein. Wir können natürlich dafür sorgen, dass sie direkt untereinander stehen. Da helfen diese Hilfslinien. Ich kann auch den Vorgabetext ändern. Und ich kann auch die Beschriftung von dem Button ändern, das geht vollkommen analog, wie bei einem Label. Sie haben hier auch den Inspektor, die Inspektoren genauer genommen, zur Verfügung. Das ist vollkommen egal, ob ich ein Label, einen Button oder sonst eine Komponente habe, natürlich eingeschränkt immer auf die Eigenschaften, die für eine bestimmte Komponente Sinn machen. Inwieweit hier jetzt diese Positionierung noch genau passt, das hängt davon ab, wie die Textausrichtung von einer Komponente ist. Ein Label wird linksbündig standardmäßig ausgerichtet, ein Button zentriert. Dadurch ist das jetzt nicht mehr direkt untereinander. Das können Sie aber jederzeit nachträglich anpassen und soll jetzt nicht unsere Baustelle sein. Wir wollen ja jetzt aus dem Controller heraus das Label ändern, denn das ist Aufgabe des Controllers. Der Controller aktualisiert die Oberfläche. Wir schaffen uns erstmal ein bisschen Platz und haben jetzt das Storyboard und den Controller nebeneinander angeordnet. Eine sehr einfache Möglichkeit, hier jetzt eine Verbindung zwischen diesen Komponenten zu schaffen, die geht darüber, dass wir einfach mit der rechten Maustaste zum Beispiel jetzt hier auf dieses Label klicken und hier rüberziehen. Damit kann man dann eine Variable, "meinLabel" anlegen und darüber ist diese Komponente dann ansprechbar. Das Spannende ist, bei einem Button funktioniert das vollkommen identisch. Nur, es gibt einen gravierenden Unterschied: Es ist eine andere Art der Verbindung. Ich kann jetzt hier genauso mit der rechten Maustaste diese Schaltfläche anklicken und so eine Linie da rüberziehen, aber jetzt habe ich keine Outlet Connection. Eine Outlet Connection ist eine Verknüpfung einer visuellen Komponente, die im Code benutzt wird. In dem Fall wollen wir eine Komponente haben, die eine Action auslöst, eine Aktion, und deswegen wählen wir hier den Typ "Action". Nun sind Komponenten standardmäßig mit bestimmten Ereignissen gekoppelt, das heißt, ein Button wird in der Regel ausgelöst, wenn der Anwender darauf klickt beziehungsweise mit dem Finger tippt. Hier sehen Sie eine Kategorie, einen Bereich "Event" Und dieses "Event" wird ausgelöst, wenn ein "Touch Up Inside" erfolgt. Das heißt, man klickt oder tippt diesen Button an und bleibt in dem Bereich dieser Komponente, wenn man diese Komponente wieder loslässt. Das heißt im Grunde, der runtergedrückte Button geht wieder nach oben, symbolisch gesehen. Das erlaubt es zum Beispiel, wenn Sie aus Versehen eine Schaltfläche anklicken und bewegen den Mauszeiger jetzt raus mit gedrückter Maustaste, dass das Event eben nicht ausgelöst wird. Man kann hier diese Art der Events beliebig ändern, sofern sie sinnvoll sind für eine Komponente. Und Sie können dort auch zum Beispiel beim Runterdrücken der Taste, der Schaltfläche etwa, das Event auslösen oder auch bei allen hier zu sehenden Events. Wir bleiben beim Standard-Event. Was wir explizit angeben müssen, ist der Name von der Connection. In "Tradition" des Codes, der hier bereits generiert wurde, nenne ich das hier "didTabButton". Damit bin ich synchron mit der Namensgebung, die automatisch hier von Xcode bereits vorgegeben wurde. Sie können hier natürlich auch einen anderen Namen vergeben. Bei "Type" bleiben wir in der Vorgabe, darüber brauchen Sie sich im Moment noch keine großen Gedanken zu machen. Dann lassen Sie uns mal "Connect" ausführen. Und Sie sehen, es ist jetzt keine Variable angelegt worden, sondern eine Methode, eine "Action"-Methode. Und diese wird ausgelöst, sobald eben dieses besagte Event eintritt. Innerhalb dieser Methode können wir jetzt SWIFT-Code notieren, der irgendwas Sinnvolles macht. Was wollen wir denn tun? Wir wollen die Beschriftung des Labels ändern. Ich nehme die Variable des Labels, habe ich ja schon vorgegeben. Ich ändere eine Eigenschaft. Da gibt es zum Beispiel die Eigenschaft "text" und der weise ich einen neuen Wert als String zu, also in Hochkomma, doppelte Hochkomma, einfach "Neu", irgendeinen Text. Führen wir die App aus, klicken also auf den Simulator beziehungsweise auf den Start des Simulators, warten ein bisschen. Gegebenenfalls müssen wir gleich noch skalieren, damit wir was Vernünftiges sehen, aber wir bekommen jetzt eine App mit einer Schaltfläche und einem Vorgabetext. Den habe ich hier nicht geändert. Ich klicke auf "Ok" und Sie sehen, hier ist der neue Text zu sehen. Der wurde dynamisch in das Label geschrieben. Sobald Sie also in Ihrer App eine "Action"-Methode generiert haben, einfach, indem Sie hier eine Connection bilden und diese als "Action" auswählen, dann können Sie innerhalb dieser geschweiften Klammern, die einen sogenannten Block in SWIFT kennzeichnen, beliebigen sinnvollen SWIFT-Code notieren, unter anderem auch, um beispielsweise andere Komponente, die natürlich zur Verfügung stehen müssen, über Variablen zu ändern.

App-Entwicklung mit iOS Grundkurs 1: Meine erste eigene App

Ihr Einstieg ohne Vorwissen: Unternehmen Sie die ersten Schritte zur eigenen iOS-App.

2 Std. 8 min (21 Videos)
Derzeit sind keine Feedbacks vorhanden...
 
Hersteller:
Software:
Exklusiv für Abo-Kunden
Erscheinungsdatum:05.05.2017

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!