iphone tutorial deutsch.pdf

of 21 /21

Click here to load reader

Embed Size (px)

Transcript of iphone tutorial deutsch.pdf

Einsteiger Tutorial deutsch Eine eigene App entwickeln | i...

http://www.iosdevgermany.de/tutorial/einsteiger-tutorial-deut...

iOsDevGermanyDeutsche iPhone App Tutorials

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 fr 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 natrlich in die Versuchung es selbst einmal zu probieren: Eine eigene App programmieren. Natrlich 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 bentige ich um eine App zu entwickeln? Einen Mac: Die Software, mit welcher Apps entwickelt werden, luft 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 erwhnte Entwicklungsumgebung (engl. IDE fr Integrated development environment), also die Software mit der Apps entwickelt werden. Xcode lsst sich wie ein normales Programm im Mac App Store kostenlos laden und installieren. Mit dem Download erhltst du das komplette iOS SDK (Software Development Kit), das weitere Programme, eine Dokumentation uvm. enthlt.

Englischkenntnisse: Die Fachsprache der Informatik ist Englisch. Die meisten Ressourcen, Foreneintrge und auch die SDK-Dokumentation von Apple ist auf englisch. Ein gewisser Grundwortschatz ist deshalb durchaus von Nten. 2. Was bentige 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 gibts spter) nicht notwendig. Ich erwhne gleich, dass man, ohne dem Apple Developer Program beigetreten zu sein, die Apps gar nicht auf seinem eigenen Gert laufen lassen kann. Das Apple Developer Program: Jeder der seine fertige App im App Store anbieten mchte, muss diesem

1 von 21

08.04.12 04:26

Einsteiger Tutorial deutsch Eine eigene App entwickeln | i...

http://www.iosdevgermany.de/tutorial/einsteiger-tutorial-deut...

Program beitreten. Auerdem erhlt man erst so die Mglichkeit, die App auf dem eigenem Gert zu testen. Allerdings ist diese Program fr Einsteiger keine Notwendigkeit. Die eigenen Apps lassen sich ganz einfach auf einem virtuellen iPhone/iPad auf dem Mac ausfhren. 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 wrde man spter mal die aktuellsten Xcode-Projekte sehen, also die, die man zuletzt geffnet 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 darber startet der User Guide fr Xcode. Interessant fr uns ist vorallem der erste Link. Damit erstellen wir ein neues Xcode-Projekt. Klicke den Link an. Daraufhin ffnet sich ein greres Fenster mit einem weiteren Dialog.

2 von 21

08.04.12 04:26

Einsteiger Tutorial deutsch Eine eigene App entwickeln | i...

http://www.iosdevgermany.de/tutorial/einsteiger-tutorial-deut...

In diesem Fenster knnen wir ein Projekt-Template auswhlen. Ein Template ist eine Vorlage, mit der wir unsere App erstellen. Soll das erste Fenster der App eine Tabelle enthalten, so whlt man das Master-Detail ApplicationTemplate, welches eine funktionsfhige App mit einer leeren Tabelle darstellt. In die Tabbed Application ist bereits eine Tab Bar eingebaut, die Single View Application enthlt 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 fr iOS, sondern auch fr Mac OS zu entwickeln. In unserem Fall bleiben wir allerdings bei iOS. Fr dieses Tutorial whlen wir das Single View Application-Template. Im nchsten Fenster knnen wir unserem Projekt einen Namen geben. Gib diesen bei Product Name ein. Es ist zwar fr die App nicht von Belangen, aber ich empfehle den gleichen Product Name zu whlen 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 whle nun den Speicherort fr das Projekt. Ich habe mir einen extra Ordner fr 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 knnen nun mit Xcode arbeiten.

3 von 21

08.04.12 04:26

Einsteiger Tutorial deutsch Eine eigene App entwickeln | i...

http://www.iosdevgermany.de/tutorial/einsteiger-tutorial-deut...

Sehen wir uns den IDE genauer an:

1. Das ist die linke Seitenleiste. Am oberen Rand dieser Leiste findest du 7 verschiedene Buttons. Alle stehen fr einen navigator. Whlst du einen anderen Button, erscheint ein anderer navigator. Der erste Button ist fr 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 enthlt den fr uns wichtigsten Ordner, mit dem Namen Tutorial_1. In ihm liegen alle Dateien, mit denen wir beim Programmieren hauptschlich arbeiten. Im Project navigator knnen wir also Dateien auswhlen. Zu den anderen navigators komme ich zu gegebener Zeit. 2. Das ist der Editor-Bereich. Hier knnen die im Project navigator ausgewhlten 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 ausgewhlt 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.

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

Seitenleiste je nach

4 von 21

08.04.12 04:26

Einsteiger Tutorial deutsch Eine eigene App entwickeln | i...

http://www.iosdevgermany.de/tutorial/einsteiger-tutorial-deut...

angewhlter Datei anders aus. Sie wird hauptschlich bei Dateien mit der Endung .storyboard bentigt, also wenn der Storyboard-Editor geffnet ist (wie im Bild gezeigt). Sie ist in zwei Teile unterteilt: Unten befindet sich die Library, oben die verschiedenen inspectors. Die Library enthlt Objekte, mit denen wir das Aussehen, das Interface, der App basteln knnen (was wir spter auch tun werden). Dazu zieht man die Objects aus der Library in den Storyboard-Editor. Dann knnen diese Objects in den inspectors bearbeitet werden. 4. Am oberen Rand des Fenster befindet sich die Toolbar. Sie enthlt verschiedene Buttons, auf die man schnell Zugriff haben will. Die genaueren Funktionen der Buttons werde ich zu gegebener Zeit erlutern. Wie ich weiter oben bereits erklrt habe, ist ein Template schon eine funktionsfhige App. Da wir das Single View Application-Template gewhlt haben, enthlt unsere App bereits ein erstes leeres Fenster. Bevor wir also zu programmieren beginnen, fhren wir die unvernderte App einfach mal aus. Hier kommt nun der iPhoneSimulator ins Spiel. Um die App testen zu knnen 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 knnen mit einer Wischgeste durch den Home-Bildschrim navigieren oder knnten sogar mit Safari ins Internet

5 von 21

08.04.12 04:26

Einsteiger Tutorial deutsch Eine eigene App entwickeln | i...

http://www.iosdevgermany.de/tutorial/einsteiger-tutorial-deut...

gehen. Nun aber beginnen wir erstmal damit, unserer App eine Funktion zu verleihen. Dazu begeben wir uns zurck 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 knnen 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 hflich begrt. Das Interface einer App wird einer Storyboard-Datei bearbeitet. Diese ist bereits geffnet:

Hier sehen wir auch gleich das bisherige Aussehen der App: ein weier Bildschirm. Genau dieser wurde gezeigt, als die App im iOS-Simulator lief. Dieser weie Bildschirm, den wir im Editor sehen, ist ein sogenannter View. Dieser View wird in einem View Controller aufbewahrt. Unter dem weien 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 enthlt (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 fr das Hauptmen, darber 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

Einsteiger Tutorial deutsch Eine eigene App entwickeln | i...

http://www.iosdevgermany.de/tutorial/einsteiger-tutorial-deut...

Controller. Klickt man auf den kleinen grauen Pfeil neben dem View Controller, so wird der View sichtbar, den er enthlt. So jetzt gehts 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. Fr mehr bersicht kannst du die Library etwas vergrern:

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

Einsteiger Tutorial deutsch Eine eigene App entwickeln | i...

http://www.iosdevgermany.de/tutorial/einsteiger-tutorial-deut...

Um die Objects anzuordnen, ziehen wir sie einfach an den gewnschten 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 Lnge. Als nchstes whlst 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

Einsteiger Tutorial deutsch Eine eigene App entwickeln | i...

http://www.iosdevgermany.de/tutorial/einsteiger-tutorial-deut...

So weit so gut. Zunchst wollen wird das Textfeld ein bisschen abndern. 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 ausgewhlt ist, knnen hier andere Einstellungen bearbeitet werden. Den Wert, den wir beim Textfeld abndern mchten, 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. Zunchst ndern wir noch den Text des Labels. Wir knnten 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 heit du?. Genauso funktioniert auch das Beschriften des Buttons. Nenne den Button Fertig.

9 von 21

08.04.12 04:26

Einsteiger Tutorial deutsch Eine eigene App entwickeln | i...

http://www.iosdevgermany.de/tutorial/einsteiger-tutorial-deut...

Fhren wir nun die App noch einmal aus. Klicke dazu wieder auf den Run-Button. Wir knnen 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 gehts ans Programmieren. 5. Eine funktionierende App programmieren Was jetzt noch fehlt ist, dass etwas passiert wenn man den Button drckt. Dazu erstellen wir eine Methode im Code. Diese Methode wird also aufgerufen, wenn der Button gedrckt wird und fhrt dann eine Reihe von Befehlen aus. Da in dieser Methode das Label und das Textfeld vorkommen, mssen wir diese Objects im Code reprsentieren. 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 bentigen wir einen weiteren Button in der Toolbar, den Button fr den Assistant editor.

10 von 21

08.04.12 04:26

Einsteiger Tutorial deutsch Eine eigene App entwickeln | i...

http://www.iosdevgermany.de/tutorial/einsteiger-tutorial-deut...

Um trotz der zwei Teile alles im Blickfeld zu haben, kannst du das Xcode-Fenster grer 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 geffnet. Er zeigt die Datei ViewController.h. Diese Datei gehrt 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, bentigen 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 gedrckter 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 mssen. Nenne es label. Achte darauf, dass du label klein schreibst! Klicke dann auf Connect.

11 von 21

08.04.12 04:26

Einsteiger Tutorial deutsch Eine eigene App entwickeln | i...

http://www.iosdevgermany.de/tutorial/einsteiger-tutorial-deut...

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, knnen wir im Connections inspector sehen. Whle zuerst den View Controller aus, indem du auf das schwarze Dock klickst und klicke dann auf den letzten Button in der rechten Seitenleiste fr 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 gedrckt wird. Eine Methode ist wie gesagt eine Aneinanderreihung von Befehlen. Die Befehle, die in unserer Methode ausgefhrt werden, sind zuerst den Namen des Users im Textfeld zu ermitteln und ihn dann in eine Begrungsformel wie Herzlich Willkommen [hier wird der Name eingefgt]! einzufgen. Dann wird dieser Begrungstext dem Text-Label zugewiesen, sodass es die Begrung anzeigt. Im MainStoryboard.storyboard gibt es fr jeden Button eine Event, der aufgerufen wird, wenn dieser Button gedrckt wird. Diesen Event mssen wir, wie bei den Objects, im Code reprsentieren. Um dies zu tun, bleiben wir gleich im Assistant editor-Modus. In der rechten Seitenleiste sollte weiterhin der Connections inspector angezeigt werden. Whle dann den Button im View aus. Eine Unterteilung im Connection inspector heit Sent Events und

12 von 21

08.04.12 04:26

Einsteiger Tutorial deutsch Eine eigene App entwickeln | i...

http://www.iosdevgermany.de/tutorial/einsteiger-tutorial-deut...

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 wars auch schon. Sobald der Button den Event Touch Up Inside erfhrt, ruft er unsere Methode doneButtonPressed auf. Jetzt fehlt nur noch, dass wir angeben, was in dieser Methode passiert. Zunchst aber verlassen wir den Assistant editor-Modus und whlen 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: 1 2 3 4 5 6 - (IBAction)doneButtonPressed:(id)sender { NSString *textfieldText = textfield.text; NSString *helloMessage = [NSString stringWithFormat:@"Herzlich Willkommen %@" label.text = helloMessage; textfield.text = NULL; }

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 Begrungstext darstellt. In die Zeichenkette %@ wird die dahinterstehende Variable, textfieldText, eingesetzt. Zeile 4: Der Text wird dem Label zugewiesen.

13 von 21

08.04.12 04:26

Einsteiger Tutorial deutsch Eine eigene App entwickeln | i...

http://www.iosdevgermany.de/tutorial/einsteiger-tutorial-deut...

Zeile 5: Der eingegebene Name wird aus dem Textfeld wieder gelscht. Die Methode ist fertig und der Fertig-Button damit funktionstchtig. Probieren wir die App erneut aus. Starte sie ber den Run-Button. Nebenbei erwhnt: 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 schlieen, so tut sich nichts. Das liegt daran, dass wir dem Textfeld nicht gesagt haben, dass es die Tastatur bei return schlieen soll. Bevor wir weiterarbeiten sollten/knnten wir die App noch mit dem Stop-Button in der Toolbar beenden. Das mchte ich nun aber absichtlich nicht tun, um zu zeigen, dass es auch so funktioniert. Kehre einfach zu Xcode zurck, um weiterzumachen. Damit die return-Taste funktioniert, bentigen 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 Schlieen der Tastatur, sie heit 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 knnen und sie so abndern, dass sie unseren Ansprchen gengt. Das heit definieren mssen wir diese

14 von 21

08.04.12 04:26

Einsteiger Tutorial deutsch Eine eigene App entwickeln | i...

http://www.iosdevgermany.de/tutorial/einsteiger-tutorial-deut...

Methode, deklariert ist sie schon. Damit Xcode bei der Definition wei, wo textFieldShouldReturn deklariert wurde, mssen wir dieses Delegate in unsere ViewController-Dateien einbinden. Das machen wir indem wir hinter die Zeile @interface ViewController : UIViewController noch etwas dazuschreiben: 1

Jetzt knnen wir die Methode definieren. ffne dazu wieder die Datei ViewController.m. Fge den folgenden Code direkt ber @end ein bzw. nach der schlieenden geschweiften Klammer von doneButtonPressed: 1 2 3 4 5 6 -(BOOL) textFieldShouldReturn:(UITextField *)textField { if (textField == self.textfield) { [textField resignFirstResponder]; } return TRUE; }

Neben dem Methodennamen textFieldShouldReturn: befindet sich ein sogenanntes Argument. Dieses heit hnlich wie unser Textfield-Outlet textfield, ist aber nicht das selbe. Beim Aufruf der Methode, wenn der ReturnButton gedrckt wird, wird in dieser Variable gespeichert, zu welchem Textfeld die Tastatur gehrt. Dann knnen wir mit einer if-Bedingung berprfen, ob die Methode von unserem Textfeld aufgerufen wurde (eigentlich ist das in unserem Fall hinfllig, da wir nur ein Textfeld haben). Dann rufen wir mit der Variable textField die Methode resignFirstResponder auf, welche die Tastatur schliet. Mit return TRUE geben wir an, dass alles einwandfrei geklappt hat. Damit haben wir die Methode definiert. Zuletzt mssen 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 bentigen wir wieder die Datei fr das Interface, MainStoryboard.storyboard. Whle 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 knnen wir mit dem UITextFieldDelegate verbinden. Ziehe den blauen

15 von 21

08.04.12 04:26

Einsteiger Tutorial deutsch Eine eigene App entwickeln | i...

http://www.iosdevgermany.de/tutorial/einsteiger-tutorial-deut...

Faden dafr 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 ausfhren. 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 auszufhren.

16 von 21

08.04.12 04:26

Einsteiger Tutorial deutsch Eine eigene App entwickeln | i...

http://www.iosdevgermany.de/tutorial/einsteiger-tutorial-deut...

In der fertigen App lsst sich nach der Eingabe die Tastatur schlieen.

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 knnen wir festlegen, was passiert, wenn ein Button gedrckt wird Damit sich die Tastatur eines Textfeldes bei return schliet, bentigen 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 hingehrt. Jetzt hast du deine erste eigene App programmiert. Mit einer kleinen App wie diesen fngt jeder Entwickler einmal an. Ich werde diese Tutorial-Serie fortfhren und spter auch fortgeschrittenere Themen behandeln. Wenn du noch irgendwelche Fragen, Vorschlge oder Kritikpunkte hast, kannst Du mir gerne ein Kommentar hinterlassen. Mchtest Du keine weiteren Tutorials verpassen, so abonniere einfach den Blog RSS oder folge mir

17 von 21

08.04.12 04:26

Einsteiger Tutorial deutsch Eine eigene App entwickeln | i...

http://www.iosdevgermany.de/tutorial/einsteiger-tutorial-deut...

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

Senden an Twitter 2 2 This entry was posted in iPhone SDK, Tutorial and tagged Anfnger, iOS 5, Storyboard, Xcode, Xcode 4.2. Bookmark the permalink.

7 Responses to Einsteiger Tutorial deutsch Eine eigene App entwickelnPingback: UIWebView Tutorial deutsch Websites anzeigen | iOsDevGermany

HennD says:14. Februar 2012 at

Hallo Felix! Danke fr Deine Antwort! So wird das Tutorial fr mich noch wertvoller!! Und evtl. hat sich ja noch jemand die gleiche Frage gestellt Ich glaube ich habe es geschnallt! Jedes Textfeld ruft beim Drcken von Enter zum verbergen der Tastatur dieses Objekt auf (und kann fr den Zweck auch nur dieses Objekt aufrufen). Will ich verschiedene Reaktionen auslsen, muss ich ber den Absender, d.h. das jeweilige Textfeld und eine If-Bedingung (gibt es in Object-C auch eine Case Anweisung?) bercksichtigen, welches Textfeld gerade bearbeitet wird. Gibt es auch eine Mglichkeit die Tastatur verschwinden zu lassen, wenn ich den Fokus des Textfeldes verlasse, also irgendwo anders hintippe? Und noch eine doofe Frage: Was genau ist ein Delegate (Sammlung von Methoden)? Erstelle ich nicht aus Klassen des Framework Methoden, bzw. erstelle eigene Klassen und dann daraus Methoden? Viele Fragen Viele Gre HennDAntworten

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 schlieen, wenn man wo anders hintippt sind ein paar Schritte notwendig: 1. Erstelle das Outlet des Textfeldes

18 von 21

08.04.12 04:26

Einsteiger Tutorial deutsch Eine eigene App entwickeln | i...

http://www.iosdevgermany.de/tutorial/einsteiger-tutorial-deut...

2. Whle im Storyboard den View (nicht den View Controller) im Document Outline aus und lass ihn dir im Identity inspector anzeigen (3. Button von links). Bei Class musst Du UIControl eingeben. 3. Dann ffnest du den Connections inspector und erstellst die Action fr 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 Delegate hinzufgt, gibt dieses Delegate immer Bescheid, wenn etwas passiert. Also z.B. wenn Return gedrckt wird. Anstatt dass die App auf diesen Event automatisch reagiert, knnen wir eingreifen und angeben ob bspw. sich die Tastatur schlieen soll. Man erweitert also den Methodenumfang, somit stehen nicht nur die Framework-Methoden zur Verfgung. Ich hoffe ich konnte dir deine Fragen beantworten. Bei weiteren Fragen gib einfach Bescheid. Gre FelixAntworten

Hennd says:15. Februar 2012 at

Hallo Felix! Vielen Dank fr Deine sehr ausfhrlichen Antworten! Bei der Case-Anweisung htte ich gedachte, dass man bei mehreren Textfeldern eleganter ist, als mit immer tiefer geschachtelten if then else Anweisungen. Case textfeld=loginfield: View laden Case textfield=textfield: Tastatur weg Case textfield=nachnamefeld: gehe zum nchsten Textfeld Mhhh sieht ja nicht mal in dieser Schreibweise nach weniger Code aus Eleganter trifft es dann wohl eher nicht. Ich freue mich schon auf das nchste Tutorial! Werde mir jetzt Storyboard Teil I vornehmen. Viele Gre HennDAntworten

Felix says:17. Februar 2012 at

Hallo, bei einer switch-Anweisung sind nur Integer zulssig, weshalb das beim Textfeld gar nicht funktioniert. Und wie Du schon sagst, so viel besser wre es eh nicht. Gre FelixAntworten

19 von 21

08.04.12 04:26

Einsteiger Tutorial deutsch Eine eigene App entwickeln | i...

http://www.iosdevgermany.de/tutorial/einsteiger-tutorial-deut...

Hennd says:12. Februar 2012 at

Hallo! Super Tutorial! Und endlich auch eines fr 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 verknpft sind, schliessen die Tastatur nach drcken von Enter. Alle anderen bleiben dann doch erhalten (wenn es welche gbe), oder? Reicht es dann nicht, die Methode zu verkrzen: -(BOOL) textFieldShouldReturn:(UITextField *)textField { [textField resignFirstResponder]; return TRUE; } und nur mit den Textfeldern zu verknpfen, bei denen die Tastatur bei drcken von Enter verschwinden soll? Dann wre das Objekt auch immer schn wiederverwendbar. Viele Gre HennDAntworten

Felix says:12. Februar 2012 at

Hallo, erstmal danke fr dein Kommentar. Zu 1: Das ist Zufall, dass diese beide gleich heien. Das ist nicht unser Textfeld sondern das gehrt immer zu dieser Methode. Also auch wenn unser Textfeld bspw. nameField hiee, wre der Funktionskopf der gleiche:-(BOOL) textFieldShouldReturn:(UITextField *)textField { if (textField == self.nameField) { [textField resignFirstResponder]; } return TRUE; }

Das werde ich im Tutorial ndern, denn das fhrt tatschlich zu Verwechslungen. Danke fr den Hinweis

.

Zu 2: Ja, du hast Recht. Eigentlich wrde diese kurze Variante im Beispiel reichen, aber in manchen Fllen mchte man evtl. zwischen den Textfeldern unterscheiden. Bei anderen Textfelder soll beispielsweise ein neuer View erscheinen oder so. Und da jedes Textfeld im Storyboard mit dem selben Delegate verbunden wird, also jedes mit der selben Methode, textFieldShouldReturn:, muss man innerhalb der Methode zwischen den Textfeldern unterscheiden. Ein Beispiel:-(BOOL) textFieldShouldReturn:(UITextField *)textField { if (textField == self.textfield) { / / W en n d as T ex tf el d t e x t f i e l d h ei t , s ol l d ie T as ta tu r s ch li e en // We nn da s Te xt fe ld he i t, so ll di e Ta st at ur sc hl ie e n [textField resignFirstResponder]; } else if (textField == self.loginField) { / / W en n b ei m l o g i n F i e l d d ie R et ur n- Ta st e g ed r ck t w ir d, s ol l s ic h d ie T as ta tu r s ch li e en , // We nn be im di e Re tu rn -T as te ge dr c kt wi rd , so ll si ch di e Ta st at ur sc hl ie e n,

20 von 21

08.04.12 04:26

Einsteiger Tutorial deutsch Eine eigene App entwickeln | i...

http://www.iosdevgermany.de/tutorial/einsteiger-tutorial-deut...

a be r a uc h e in n eu er V ie w a ng ez ei gt w er de n. ab er au ch ei n ne ue r Vi ew an ge ze ig t we rd en . [textField resignFirstResponder];

View laden...return TRUE; }

Mchte man allerdings, dass sich bei jedem Textfeld die Tastatur bei Return schliet muss man die kurze Variante whlen:-(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. Gre FelixAntworten

iOsDevGermanyProudly powered by WordPress.

21 von 21

08.04.12 04:26