iphone tutorial deutsch.pdf

Einsteiger Tutorial deutsch – Eine eigene App entwickelnPosted on 21. Januar 2012 by Felix

Hinweis: Das ist ein Update des Einsteiger-Tutorials, da das andere nicht mehr ganz aktuell ist.

Einleitung

Im App Store gibt es mittlerweile schon 500.000 Apps für iPhone, iPad

und iPod touch. Das ist nicht zuletzt den vielen kleinen App Schmieden

und Ein-Mann-Unternehmen zu verdanken, die ihre App-Ideen in die

Tat umsetzen. Da kommt man natürlich in die Versuchung es selbst

einmal zu probieren: Eine eigene App programmieren.

Natürlich ist es nicht so einfach, wie es jetzt vielleicht erscheint. Schon

in eine kleine App muss viel Arbeit, Zeit und Nerven investiert werden,

um sie App Store tauglich zu machen.

1. Was benötige ich um eine App zu entwickeln?

Einen Mac: Die Software, mit welcher Apps entwickelt werden, läuft nur auf einem Macintosh Computer mit

Betriebssystem Mac OS.

Das neueste Betriebsystem Mac OS X Lion: Nur unter diesem Betriebssystem kann mit der neuesten Version

der Entwicklungsumgebung gearbeitet werden. Es wird mit jedem neuen Mac mitgeliefert.

Xcode: Dies ist die bereits erwähnte Entwicklungsumgebung (engl. IDE für Integrated development

environment), also die Software mit der Apps entwickelt werden. Xcode lässt sich wie ein normales Programm

im Mac App Store kostenlos laden und installieren. Mit dem Download erhältst du das komplette iOS SDK

(Software Development Kit), das weitere Programme, eine Dokumentation uvm. enthält.

Englischkenntnisse: Die Fachsprache der Informatik ist Englisch. Die meisten Ressourcen, Foreneinträge und

auch die SDK-Dokumentation von Apple ist auf englisch. Ein gewisser Grundwortschatz ist deshalb durchaus

von Nöten.

2. Was benötige ich nicht?

Ein(en) iPhone/iPad/iPod touch: Wer Apps entwickeln will hat zwar meist eine iDevice, aber diese ist dank

dem iPhone Simulator (Genaueres gibt’s später) nicht notwendig. Ich erwähne gleich, dass man, ohne dem

Apple Developer Program beigetreten zu sein, die Apps gar nicht auf seinem eigenen Gerät laufen lassen kann.

Das Apple Developer Program: Jeder der seine fertige App im App Store anbieten möchte, muss diesem

iOsDevGermanyDeutsche iPhone App Tutorials

Einsteiger Tutorial deutsch – Eine eigene App entwickeln | i... http://www.iosdevgermany.de/tutorial/einsteiger-tutorial-deut...

1 von 21 08.04.12 04:26

Program beitreten. Außerdem erhält man erst so die Möglichkeit, die App auf dem eigenem Gerät zu testen.

Allerdings ist diese Program für Einsteiger keine Notwendigkeit. Die eigenen Apps lassen sich ganz einfach

auf einem virtuellen iPhone/iPad auf dem Mac ausführen. Ich empfehle jedem erstmal in die iOS App

Entwicklung “rein zu schnuppern” und erst dann, vielleicht wenn man schon die ein oder andere kleine App

programmiert hat, dem Program beizutreten, zumal dies 99$ im Jahr kostet .

3. Xcode

Bevor wir zu programmieren beginnen, sehen wir uns die IDE, Xcode, genauer an. Nachdem du sie downgeloadet

und installiert hast, erscheint das Icon von Xcode, der Hammer, der auf einer blauen Zeichnung liegt, im Dock.

Sobald wir das Programm öffnen erscheint ein kleines Fenster.

Auf der rechten Seite würde man später mal die aktuellsten Xcode-Projekte sehen, also die, die man zuletzt

geöffnet hat. Unter “Welcome to Xcode” steht die Versions-Nummer der installierten Version. Darunter wiederum

befinden sich einige Links. Ganz unten gelangt man zu Apples Developer portal, wo man online die

SDK-Dokumentation und andere Ressourcen findet. Mit dem Link darüber startet der User Guide für Xcode.

Interessant für uns ist vorallem der erste Link. Damit erstellen wir ein neues Xcode-Projekt. Klicke den Link an.

Daraufhin öffnet sich ein größeres Fenster mit einem weiteren Dialog.


2 von 21 08.04.12 04:26

In diesem Fenster können wir ein Projekt-Template auswählen. Ein Template ist eine Vorlage, mit der wir unsere

App erstellen. Soll das erste Fenster der App eine Tabelle enthalten, so wählt man das Master-Detail Application-

Template, welches eine funktionsfähige App mit einer leeren Tabelle darstellt. In die Tabbed Application ist

bereits eine Tab Bar eingebaut, die Single View Application enthält schon ein einzelnes erstes Fenster usw.

In der linken Seitenleiste siehst du die verschiedenen Kategorien. Diese enthalten noch weitere Templates. Die

Kategorien sind unterteilt in iOS und Mac OS X. Man ist also, ohne weitere Programme zu installieren, in der

Lage, nicht nur für iOS, sondern auch für Mac OS zu entwickeln. In unserem Fall bleiben wir allerdings bei iOS.

Für dieses Tutorial wählen wir das Single View Application-Template. Im nächsten Fenster können wir unserem

Projekt einen Namen geben. Gib diesen bei Product Name ein. Es ist zwar für die App nicht von Belangen, aber

ich empfehle den gleichen Product Name zu wählen wie ich, sodass die Ordner die gleichen Namen haben. Ich

nenne das Projekt “Tutorial_1″. Das einzige was noch wichtig ist, ist dass bei Device Family der Wert auf

iPhone steht und der Haken nur bei Use Storyboard und Use Automatic Reference Counting gesetzt ist. So oder

so ähnlich sollten die Projekt-Optionen aussehen:

Klicke auf Next und wähle nun den Speicherort für das Projekt. Ich habe mir einen extra Ordner für die

App-Entwicklung im Benutzer-Ordner angelegt, in dem ich auch alle Xcode-Projekte speichere, dass kann aber

jeder selbst entscheiden. Wenn du fertig bist, klicke auf Create.

Jetzt ist das Projekt erstellt und wir können nun mit Xcode arbeiten.


3 von 21 08.04.12 04:26

Sehen wir uns den IDE genauer an:

Das ist die linke Seitenleiste. Am oberen Rand dieser Leiste findest du 7 verschiedene Buttons. Alle stehen für

einen navigator. Wählst du einen anderen Button, erscheint ein anderer navigator. Der erste Button ist für

den Project navigator (die Funktion eines Buttons wird sichtbar, wenn du mit der Maus auf ihm verweilst). Im

Project navigator siehst du, aus welchen Dateien unser Xcode-Projekt aufgebaut ist. Ganz oben befindet sich

die Projekt-Datei. Diese enthält den für uns wichtigsten Ordner, mit dem Namen “Tutorial_1″. In ihm liegen

alle Dateien, mit denen wir beim Programmieren hauptsächlich arbeiten.

Im Project navigator können wir also Dateien auswählen. Zu den anderen navigators komme ich zu

gegebener Zeit.

1.

Das ist der Editor-Bereich. Hier können die im Project navigator ausgewählten Dateien bearbeitet werden. Je

nach Dateityp sieht dieser Bereich anders aus. Ein Blick in die Seitenleiste bzw. auf den oberen Rand des

Fenster zeigt uns, dass die Projekt-Datei “Tutorial_1.xcodeproj” ausgewählt ist. Allerdings werden wir an

dieser Datei vorerst nichts ändern. Deshalb öffne einfach mal die Datei “MainStoryboard.storyboard”. Im

Editor-Bereich erscheint nun der sogenannte Storyboard-Editor.

2.

3. Die rechte Seitenleiste: Genauso wie der Editor-Bereich sieht die rechte Seitenleiste je nach


4 von 21 08.04.12 04:26

angewählter Datei anders aus. Sie wird hauptsächlich bei Dateien mit der Endung .storyboard benötigt, also wenn

der Storyboard-Editor geöffnet ist (wie im Bild gezeigt).

Sie ist in zwei Teile unterteilt: Unten befindet sich die Library, oben die verschiedenen inspectors. Die Library

enthält Objekte, mit denen wir das Aussehen, das Interface, der App basteln können (was wir später auch tun

werden). Dazu zieht man die Objects aus der Library in den Storyboard-Editor. Dann können diese Objects in den

inspectors bearbeitet werden.

4. Am oberen Rand des Fenster befindet sich die Toolbar. Sie enthält verschiedene Buttons, auf die man schnell

Zugriff haben will. Die genaueren Funktionen der Buttons werde ich zu gegebener Zeit erläutern.

Wie ich weiter oben bereits erklärt habe, ist ein Template schon eine funktionsfähige App. Da wir das Single View

Application-Template gewählt haben, enthält unsere App bereits ein erstes leeres Fenster. Bevor wir also zu

programmieren beginnen, führen wir die unveränderte App einfach mal aus. Hier kommt nun der iPhone-

Simulator ins Spiel. Um die App testen zu können verwenden wir kein echtes iPhone, sondern ein virtuelles auf

dem Bildschirm unseres Computers. Um die App zu starten, klicken wir in der Toolbar auf den Button mit dem

schwarzen Dreieck, unter dem Run steht. Jetzt wird das Projekt kompiliert. Das bedeutet der Code wird in

Computer-Sprache übersetzt und dann eine richtige iPhone-App daraus gemacht. Den Fortschritt des Compilers

(das was kompiliert) sehen wir in dem kleinen blau-grauen Fenster in der Toolbar. Ist er fertig so öffnet sich ein

weiteres Programm, der Simulator:

Wie Du siehst besitzt diese App noch keinerlei Funktion. Klicke mit der Maus auf den Home Button um die App

zu beenden. Der iOS Simulator sieht nicht nur wie ein iPhone aus, sondern hat auch ähnliche Funktionen. Wir

können mit einer Wischgeste durch den Home-Bildschrim navigieren oder könnten sogar mit Safari ins Internet


5 von 21 08.04.12 04:26

gehen. Nun aber beginnen wir erstmal damit, unserer App eine Funktion zu verleihen. Dazu begeben wir uns

zurück zu Xcode und klicken in der Toolbar auf den Button mit dem kleinen, schwarzen Quadrat, um die App

ganz zu beenden.

4. Das Interface gestalten

Jede App besteht aus Objekten, mit denen der User agieren kann. Sie bilden das Interface, also das Aussehen. Das

können Buttons, Textfelder, uvm. sein. Diese Objekte habe ich bereits angesprochen, als es um die Library in der

rechten Seitenleiste ging. Jetzt wollen wir diese verwenden um das Interface unserer App zu erstellen.

Die App soll eine ganz banale Funktion haben. Der User gibt in ein Textfeld seinen Namen ein, klickt auf einen

Button und wird höflich begrüßt.

Das Interface einer App wird einer Storyboard-Datei bearbeitet. Diese ist bereits geöffnet:

Hier sehen wir auch gleich das bisherige Aussehen der App: ein weißer Bildschirm. Genau dieser wurde gezeigt,

als die App im iOS-Simulator lief. Dieser weiße Bildschirm, den wir im Editor sehen, ist ein sogenannter View.

Dieser View wird in einem View Controller aufbewahrt. Unter dem weißen View ist eine schwarze Leiste,

das Dock, in dem die Art des Controllers steht. Dieser ist ein View Controller, also ein Controller der einen View

enthält (es gibt noch andere Controller). Der (View) Controller bildet zusammen mit einem oder mehreren

anderen Objekten, die erstmal nicht wichtig sind, eine Scene. Die meisten Apps enthalten mehr als nur eine

Scene. Da gibt es dann eine Scene für das Hauptmenü, darüber gelangt man zum Beispiel zu einer Scene mit einer

Tabelle und von dieser in eine Scene mit weiteren Informationen. Damit man nicht den Überblick verliert, gibt es

das Document Outline, das sich auf der linken Seite des Editor-Bereichs, rechts neben der linken Seitenleiste,

befindet. Im Document Outline werden alle Scenes untereinander angezeigt. Wenn wir uns die bisherige Scene

einmal genauer anschauen, wird der Aufbau dieser noch einmal klarer:

Die “View Controller Scene” wird unterteilt in ein First Responder Objekt (meist nicht wichtig) und den View


6 von 21 08.04.12 04:26

klim bim

klim bim

klim bim

klim bim

klim bim

klim bim

Controller. Klickt man auf den kleinen grauen Pfeil neben dem View Controller, so wird der View sichtbar, den er

enthält.

So jetzt geht’s los. Unsere App soll aus einem Textfeld, einem Button und einem Text bestehen. All diese Objects

finden wir in der Library. Scrolle runter bis du das Object Text Field siehst. Für mehr Übersicht kannst du die

Library etwas vergrößern:

Ziehe es aus der Library in den View im Editor-Bereich. Mache das gleiche mit eine Round Rect Button und einem

Label:


7 von 21 08.04.12 04:26

Um die Objects anzuordnen, ziehen wir sie einfach an den gewünschten Platz. Blaue Linien helfen dabei, die Mitte

bzw. den empfohlenen Abstand zum Rand des Views zu finden. Ordne die Objects wie folgt an:

Alle drei Objects sind leider noch etwas zu klein. Klicke deshalb zuerst den Button einmal an, sodass kleine

Anfasser erscheinen. Ziehe ihn ein bisschen nach links in die Länge. Als nächstes wählst Du das Textfeld aus und

ziehst es bis zum empfohlenen Abstand vom Rand. Das gleiche machst du mit dem Label.


8 von 21 08.04.12 04:26

So weit so gut. Zunächst wollen wird das Textfeld ein bisschen abändern. Klicke es dazu einmal an. Jetzt kommt

zum ersten Mal ein inspector ins Spiel. Klicke in der rechten Seitenleiste auf den vierten Button von links. Der

Attributes inspector wird angezeigt.

Je nachdem welches Object im View ausgewählt ist, können hier andere Einstellungen bearbeitet werden. Den

Wert, den wir beim Textfeld abändern möchten, ist der des Placeholders. Der Placeholder ist ein Text, der bevor

etwas eingegeben wird schon im Textfeld steht und bei der Eingabe verschwindet. Schreibe als Wert “Gib hier

deinen Namen ein” hinein. Jetzt ist im Textfeld im View schwach der Text zu sehen.

Zunächst ändern wir noch den Text des Labels. Wir könnten dies, wie beim Textfeld, im Attributes inspector

bewerkstelligen, allerdings geht es beim Label auch einfacher. Klicke doppelt auf das Label und gib den folgenden

Text ein: “Wie heißt du?”. Genauso funktioniert auch das Beschriften des Buttons. Nenne den Button “Fertig”.


9 von 21 08.04.12 04:26

klim bim

Führen wir nun die App noch einmal aus. Klicke dazu wieder auf den Run-Button. Wir können sogar schon etwas

in das Textfeld eingeben. Wenn wir auf den Button klicken, passiert allerdings noch nichts. Das werden wir gleich

ändern…

Damit ist das Interface unserer App fertig. Jetzt geht’s ans Programmieren.

5. Eine funktionierende App programmieren

Was jetzt noch fehlt ist, dass etwas passiert wenn man den Button drückt. Dazu erstellen wir eine Methode im

Code. Diese Methode wird also aufgerufen, wenn der Button gedrückt wird und führt dann eine Reihe von

Befehlen aus. Da in dieser Methode das Label und das Textfeld vorkommen, müssen wir diese Objects im Code

repräsentieren. Dazu verwendet man ein Outlet. Ändert man im Code etwas am Outlet, so ändert sich im

MainStoryboard etwas am Object des Views. Erstellen wir also zuerst die zwei Outlets.

Wir bleiben dazu in der Datei MainStoryboard.storyboard. Allerdings teilen wir den Editorbereich in zwei Teile.

Dazu benötigen wir einen weiteren Button in der Toolbar, den Button für den Assistant editor.


10 von 21 08.04.12 04:26

Um trotz der zwei Teile alles im Blickfeld zu haben, kannst du das Xcode-Fenster größer ziehen oder mit dem

Button in der rechten oberen Ecke in den Vollbildmodus wechseln.

Auf der rechten Seite im Editor-Bereich ist der Code-Editor geöffnet. Er zeigt die Datei “ViewController.h”. Diese

Datei gehört zur Scene, die wir vorhin im Storyboard-Editor bearbeitet haben und die jetzt auf der linken Seite zu

sehen ist. Die Dateien “ViewController.h” und “ViewController.m” stellen also den Code einer Scene dar. Bei

mehreren Scenes braucht man auch mehrere Dateien.

Um jetzt die Outlets des Textfeldes und des Labels zu erstellen, benötigen wir wieder das Document Outline. Dir

ist vielleicht schon aufgefallen, das innerhalb des View-Objects jetzt die drei anderen Objects erschienen sind. Um

das Outlet des Labels zu erstellen, klickst du mit gedrückter ctrl-Taste auf das Label im Document Outlet und

ziehst den erscheinenden blauen Faden in den Code-Editor, über die Zeile @end. Das Bild zeigt das nochmal:

Daraufhin erscheint eine kleine Sprechblase, in der wir nur den Namen des Outlets angeben müssen. Nenne es

“label”. Achte darauf, dass du “label” klein schreibst! Klicke dann auf Connect.


11 von 21 08.04.12 04:26

klim bim

Wiederhole diese Schritte beim Textfeld und nenne das Outlet “textfield” (Achtung: englisch).

Die Datei ViewController.h sollte dann so aussehen:

Dass die Verbindungen zwischen diesen Outlets und den Objects im Storyboard wirklich existieren, können wir

im Connections inspector sehen. Wähle zuerst den View Controller aus, indem du auf das schwarze Dock klickst

und klicke dann auf den letzten Button in der rechten Seitenleiste für den Connections inspector.

Dort sieht man, dass eine Verbindung zwischen textfield im Code und Text Field – … in

MainStoryboard.storyboard existiert. Das gleich beim Label. Damit sind die Outlets fertig.

Jetzt kommen wir zur Methode, die aufgerufen werden soll, wenn der Button gedrückt wird. Eine Methode ist wie

gesagt eine Aneinanderreihung von Befehlen. Die Befehle, die in unserer Methode ausgeführt werden, sind zuerst

den Namen des Users im Textfeld zu ermitteln und ihn dann in eine Begrüßungsformel wie “Herzlich

Willkommen [hier wird der Name eingefügt]!” einzufügen. Dann wird dieser Begrüßungstext dem Text-Label

zugewiesen, sodass es die Begrüßung anzeigt.

Im MainStoryboard.storyboard gibt es für jeden Button eine Event, der aufgerufen wird, wenn dieser Button

gedrückt wird. Diesen Event müssen wir, wie bei den Objects, im Code repräsentieren. Um dies zu tun, bleiben wir

gleich im Assistant editor-Modus. In der rechten Seitenleiste sollte weiterhin der Connections inspector angezeigt

werden. Wähle dann den Button im View aus. Eine Unterteilung im Connection inspector heißt “Sent Events” und


12 von 21 08.04.12 04:26

darunter finden wir den Event “Touch Up Inside”. Klicke in den kleinen Kreis rechts daneben und ziehe den

blauen Faden wieder in den Code-Editor, über @end aber unter die Outlets:

Wir nennen unsere Methode doneButtonPressed. Und das war’s auch schon. Sobald der Button den Event Touch

Up Inside erfährt, ruft er unsere Methode doneButtonPressed auf. Jetzt fehlt nur noch, dass wir angeben, was in

dieser Methode passiert.

Zunächst aber verlassen wir den Assistant editor-Modus und wählen wieder den Standard editor; das ist der

Button links daneben.

Öffne jetzt die Datei ”ViewController.m“. Dort befindet sich bereits unsere Methode, ganz unten, am Ende der

Datei:

Noch ist sie leer, das werden wir aber gleich ändern. Ersetze die Methode (im Bild das Rotmarkierte) durch

Folgendes:

Zeile 2: NSString ist eine Variable, in der Text gespeichert werden kann. Wir speichern in der Variable

textfieldText von ebendiesem Typ den Namen aus dem Textfeld.

Zeile 3: Dann erstellen wir einen weiteren NSString, der den gesamten Begrüßungstext darstellt. In die

Zeichenkette “%@” wird die dahinterstehende Variable, textfieldText, eingesetzt.

Zeile 4: Der Text wird dem Label zugewiesen.

123456

- (IBAction)doneButtonPressed:(id)sender { NSString *textfieldText = textfield.text; NSString *helloMessage = [NSString stringWithFormat:@"Herzlich Willkommen %@" label.text = helloMessage; textfield.text = NULL;}


13 von 21 08.04.12 04:26

klim bim

klim bim

Zeile 5: Der eingegebene Name wird aus dem Textfeld wieder gelöscht.

Die Methode ist fertig und der Fertig-Button damit funktionstüchtig. Probieren wir die App erneut aus. Starte sie

über den Run-Button. Nebenbei erwähnt: Du kannst zum Eingeben deines Namens auch die Tastatur deines

Computers verwenden.

Ganz fertig sind wir aber noch nicht. Versucht der User die Tastatur über return zu schließen, so tut sich nichts.

Das liegt daran, dass wir dem Textfeld nicht gesagt haben, dass es die Tastatur bei return schließen soll.

Bevor wir weiterarbeiten sollten/könnten wir die App noch mit dem “Stop”-Button in der Toolbar beenden. Das

möchte ich nun aber absichtlich nicht tun, um zu zeigen, dass es auch so funktioniert. Kehre einfach zu Xcode

zurück, um weiterzumachen.

Damit die return-Taste funktioniert, benötigen wir eine weitere Methode. Diese unterscheidet sich ein wenig von

der Methode doneButtonPressed:. In wiefern sehen wir gleich.

Öffne zuerst die Datei “ViewController.h”. Dort befindet sich die Deklaration der Methode doneButtonPressed:.

Bei der Deklaration wird der Name der Methode festgelegt. Vorhin haben wir diese dann in “ViewController.m”

definiert, indem wir angegeben haben, was in ihr passiert. Die Methode zum Schließen der Tastatur, sie heißt

textFieldShouldReturn:, muss auch deklariert und definiert werden. Allerdings ist dies eine Methode die uns

Apple vorgegeben hat und der Apple bereits einen Namen gegeben, also sie deklariert, hat. Und zwar fand die

Deklaration im TextFieldDelegate statt. Ein Delegate ist eine Sammlung von Methoden, die wir verwenden

können und sie so abändern, dass sie unseren Ansprüchen genügt. Das heißt definieren müssen wir diese


14 von 21 08.04.12 04:26

Methode, deklariert ist sie schon. Damit Xcode bei der Definition weiß, wo textFieldShouldReturn deklariert

wurde, müssen wir dieses Delegate in unsere ViewController-Dateien einbinden. Das machen wir indem wir

hinter die Zeile @interface ViewController : UIViewController noch etwas dazuschreiben:

Jetzt können wir die Methode definieren. Öffne dazu wieder die Datei “ViewController.m”.

Füge den folgenden Code direkt über @end ein bzw. nach der schließenden geschweiften Klammer von

doneButtonPressed:

Neben dem Methodennamen textFieldShouldReturn: befindet sich ein sogenanntes Argument. Dieses heißt

ähnlich wie unser Textfield-Outlet textfield, ist aber nicht das selbe. Beim Aufruf der Methode, wenn der Return-

Button gedrückt wird, wird in dieser Variable gespeichert, zu welchem Textfeld die Tastatur gehört. Dann können

wir mit einer if-Bedingung überprüfen, ob die Methode von unserem Textfeld aufgerufen wurde (eigentlich ist das

in unserem Fall hinfällig, da wir nur ein Textfeld haben). Dann rufen wir mit der Variable textField die Methode

resignFirstResponder auf, welche die Tastatur schließt. Mit return TRUE geben wir an, dass alles einwandfrei

geklappt hat. Damit haben wir die Methode definiert.

Zuletzt müssen wir Xcode noch im Storyboard mitteilen, bei welchem Textfeld die Tastatur bei return geschlossen

werden soll. Das machen wir, indem wir das TextfieldDelegate mit dem Textfeld verbinden. Dazu benötigen wir

wieder die Datei für das Interface, MainStoryboard.storyboard.

Wähle im Editor das Textfeld aus und lass es dir im Connections inspector anzeigen:

Jetzt kommt etwas, das so ähnlich ist wie das, was wir schonmal gemacht haben. Wir verbinden etwas aus dem

Storyboard mit etwas im Code: Wie du siehst gibt es im Connections inspector einen Unterpunkt namens

delegate. Dieses delegate vom Textfeld können wir mit dem UITextFieldDelegate verbinden. Ziehe den blauen

1 <UITextFieldDelegate>

123456

-(BOOL) textFieldShouldReturn:(UITextField *)textField { if (textField == self.textfield) { [textField resignFirstResponder]; } return TRUE;}


15 von 21 08.04.12 04:26

Faden dafür auf das View Controller Objekt, wie du es hier im Bild siehst:

Damit sind wir schlussendlich fertig mit der App. Jetzt wollen wir sie erneut ausführen. Wie gesagt wollten wir

ausprobieren, was passiert, wenn man die App nicht stoppt, nachdem man im Simulator fertig ist. Starte sie mit

einem Klick auf Run.

Daraufhin erscheint ein kleines Fenster unter der Toolbar:

Klicke auf Stop, um die App normal auszuführen.


16 von 21 08.04.12 04:26

In der fertigen App lässt sich nach der Eingabe die Tastatur schließen.

5. Zusammenfassung

Fassen wir nochmal grob zusammen, was Du in diesem Tutorial gelernt hast:

Im Storyboard kannst Du das Interface der App bearbeiten

Um im Code mit einem Object aus dem Storyboard zu arbeiten, musst du davon ein Outlet erstellen

Mit dem Event Touch Up Inside und einer passenden Methode können wir festlegen, was passiert, wenn ein

Button gedrückt wird

Damit sich die Tastatur eines Textfeldes bei return schließt, benötigen wir eine Methode aus dem

UITextFieldDelegate namens textFieldShouldReturn:

6. Schluss

Das Xcode Projekt der App kannst du hier downloaden: Einsteiger_Tutorial_deutsch-Eine_Eigene_App. Wirf

nochmal einen Blick darauf, falls Du dir nicht sicher bist, wo welches Codeschnipsel hingehört.

Jetzt hast du deine erste eigene App programmiert. Mit einer kleinen App wie diesen fängt jeder Entwickler

einmal an. Ich werde diese Tutorial-Serie fortführen und später auch fortgeschrittenere Themen behandeln.

Wenn du noch irgendwelche Fragen, Vorschläge oder Kritikpunkte hast, kannst Du mir gerne ein Kommentar

hinterlassen. Möchtest Du keine weiteren Tutorials verpassen, so abonniere einfach den Blog RSS oder folge mir


17 von 21 08.04.12 04:26

auf Twitter. Wenn dir das Tutorial gefallen hat, kannst du es gerne verbreiten und mit anderen teilen.

Senden an Twitter

2

2This entry was posted in iPhone SDK, Tutorial and tagged Anfänger, iOS 5, Storyboard, Xcode, Xcode 4.2. Bookmark the permalink.

7 Responses to Einsteiger Tutorial deutsch – Eine eigene App entwickeln

Pingback: UIWebView Tutorial deutsch – Websites anzeigen | iOsDevGermany

HennD says:14. Februar 2012 at

Hallo Felix!

Danke für Deine Antwort! So wird das Tutorial für mich noch wertvoller!! Und evtl. hat sich ja noch jemand die gleiche Fragegestellt…

Ich glaube ich habe es geschnallt! Jedes Textfeld ruft beim Drücken von “Enter” zum verbergen der Tastatur dieses Objektauf (und kann für den Zweck auch nur dieses Objekt aufrufen). Will ich verschiedene Reaktionen auslösen, muss ich überden “Absender”, d.h. das jeweilige Textfeld und eine If-Bedingung (gibt es in Object-C auch eine Case Anweisung?)berücksichtigen, welches Textfeld gerade bearbeitet wird.

Gibt es auch eine Möglichkeit die Tastatur verschwinden zu lassen, wenn ich den Fokus des Textfeldes verlasse, alsoirgendwo anders hintippe?

Und noch eine doofe Frage: Was genau ist ein Delegate (Sammlung von Methoden)? Erstelle ich nicht aus Klassen desFramework Methoden, bzw. erstelle eigene Klassen und dann daraus Methoden?

Viele Fragen…

Viele GrüßeHennD

Antworten

Felix says:15. Februar 2012 at

Hallo,

Zu 1: Genauso ist es! Zu 2: Das gibt es auch, kommt aber nach meiner Erfahrung nicht so oft zum Einsatz:

int var = 0;switch (var) {case 0:NSLog(@"Der Wert ist 0");break;default:NSLog(@"Der Wert ist ungleich 0");break;}

Zu 3: Um die Tastatur zu schließen, wenn man wo anders hintippt sind ein paar Schritte notwendig:1. Erstelle das Outlet des Textfeldes


18 von 21 08.04.12 04:26

2. Wähle im Storyboard den View (nicht den View Controller) im Document Outline aus und lass ihn dir im Identityinspector anzeigen (3. Button von links). Bei Class musst Du UIControl eingeben.3. Dann öffnest du den Connections inspector und erstellst die Action für “Touch Down”. Nenne sie bspw.“dismissKeyboard.4. Der Code der Action sollte wie folgt lauten:- (IBAction)dismissKeyboard:(id)sender {[textField resignFirstResponder];}Mit textField ist in diesem Fall das Outlet des Textfeldes gemeint.

Zu 4 (Delegate): Ein Delegate ist auch eine (Cocoa-)Klasse. Wenn man zu einem View Controller ein Delegatehinzufügt, gibt dieses Delegate immer Bescheid, wenn etwas passiert. Also z.B. wenn Return gedrückt wird. Anstattdass die App auf diesen Event automatisch reagiert, können wir eingreifen und angeben ob bspw. sich die Tastaturschließen soll.Man erweitert also den “Methodenumfang”, somit stehen nicht nur die Framework-Methoden zur Verfügung.

Ich hoffe ich konnte dir deine Fragen beantworten.

Bei weiteren Fragen gib einfach Bescheid.

GrüßeFelix

Antworten

Hennd says:15. Februar 2012 at

Hallo Felix!

Vielen Dank für Deine sehr ausführlichen Antworten!

Bei der Case-Anweisung hätte ich gedachte, dass man bei mehreren Textfeldern eleganter ist, als mit immertiefer geschachtelten if – then – else Anweisungen.

Case textfeld=loginfield: View ladenCase textfield=textfield: Tastatur wegCase textfield=nachnamefeld: gehe zum nächsten Textfeld

Mhhh… sieht ja nicht mal in dieser Schreibweise nach weniger Code aus… Eleganter trifft es dann wohl ehernicht.

Ich freue mich schon auf das nächste Tutorial! Werde mir jetzt Storyboard Teil I vornehmen.

Viele GrüßeHennD

Antworten


Hallo,

bei einer switch-Anweisung sind nur Integer zulässig, weshalb das beim Textfeld gar nichtfunktioniert. Und wie Du schon sagst, so viel besser wäre es eh nicht.

GrüßeFelix

Antworten


19 von 21 08.04.12 04:26

Hennd says:12. Februar 2012 at

Hallo!

Super Tutorial! Und endlich auch eines für die neuste Version von Xcode. Viele alte Tutorials funktionieren leider nicht.Danke!

Zwei Fragen habe ich zur textFieldShouldReturn-Methode:

1. Warum hat das Argument der Methode den selben Namen, wie unser Text-Feld. Muss das so sein?2. Warum fange ich explizit das eine Textfield ab? Nur Textfelder, die mit der Methode verknüpft sind, schliessen dieTastatur nach drücken von Enter. Alle anderen bleiben dann doch erhalten (wenn es welche gäbe), oder? Reicht es dannnicht, die Methode zu verkürzen:

-(BOOL) textFieldShouldReturn:(UITextField *)textField {[textField resignFirstResponder];return TRUE;}

und nur mit den Textfeldern zu verknüpfen, bei denen die Tastatur bei drücken von Enter verschwinden soll? Dann wäre dasObjekt auch immer schön wiederverwendbar.

Viele GrüßeHennD

Antworten


Hallo,

erstmal danke für dein Kommentar.

Zu 1: Das ist Zufall, dass diese beide gleich heißen. Das ist nicht unser Textfeld sondern das gehört immer zu dieserMethode. Also auch wenn unser Textfeld bspw. “nameField” hieße, wäre der Funktionskopf der gleiche:

-(BOOL) textFieldShouldReturn:(UITextField *)textField {if (textField == self.nameField) {[textField resignFirstResponder];}return TRUE;}

Das werde ich im Tutorial ändern, denn das führt tatsächlich zu Verwechslungen. Danke für den Hinweis .

Zu 2: Ja, du hast Recht. Eigentlich würde diese kurze Variante im Beispiel reichen, aber in manchen Fällen möchteman evtl. zwischen den Textfeldern unterscheiden. Bei anderen Textfelder soll beispielsweise ein neuer Viewerscheinen oder so. Und da jedes Textfeld im Storyboard mit dem selben Delegate verbunden wird, also jedes mit derselben Methode, textFieldShouldReturn:, muss man innerhalb der Methode zwischen den Textfeldernunterscheiden. Ein Beispiel:

-(BOOL) textFieldShouldReturn:(UITextField *)textField {if (textField == self.textfield) {//// WWeennnn ddaass TTeexxttffeelldd tteexxttffiieelldd hheeiißßtt,, ssoollll ddiiee TTaassttaattuurr sscchhlliieeßßeenn[textField resignFirstResponder];}else if (textField == self.loginField) {//// WWeennnn bbeeiimm llooggiinnFFiieelldd ddiiee RReettuurrnn--TTaassttee ggeeddrrüücckktt wwiirrdd,, ssoollll ssiicchh ddiiee TTaassttaattuurr sscchhlliieeßßeenn,,


20 von 21 08.04.12 04:26

iOsDevGermany

aabbeerr aauucchh eeiinn nneeuueerr VViieeww aannggeezzeeiiggtt wweerrddeenn..

[textField resignFirstResponder];View laden...return TRUE;}

Möchte man allerdings, dass sich bei jedem Textfeld die Tastatur bei Return schließt muss man die kurze Variantewählen:

-(BOOL) textFieldShouldReturn:(UITextField *)textField {[textField resignFirstResponder];return TRUE;}

Ich hoffe das klingt nicht allzu kompliziert, und dass ich dir ein wenig weiterhelfen konnte.Wenn du noch Fragen hast, schreib einfach ein Kommentar.

GrüßeFelix

Antworten

Proudly powered by WordPress.


21 von 21 08.04.12 04:26

Documents

iphone tutorial deutsch.pdf