ObjectiveCeeds › iOS Tutorial:

iOS Tutorial: "Hallo Welt" - mit Xcode 5, aber mal ohne Storyboard

Von Manfred Kress

Seite 1 von 1



iOS „Hallo World“ Tutorials für Anfänger gibt es viele. Bisher fehlte mir jedoch ein Tutorial für Anfänger und leicht Fortgeschrittene, das ohne Storyboard auskommt. Um diese Lücke zu füllen, präsentiere ich Ihnen mein „Hallo World“-Tutorial mit Xcode 5 - from the scratch.

Zuerst muss Xcode 5 aus dem AppStore geladen und installiert werden, falls noch nicht geschehen. Beim ersten Start wird Xcode noch ein paar Dateien nachinstallieren und dann mit einem Willkommens-Bildschirm starten. Diesen schließen Sie am besten gleich wieder. Ein neues Projekt erstellen Jetzt wird ein neues Projekt aus einer der Vorlagen Xcodes angelegt. Wählen Sie im Menü von Xcode File >> New >> Project.. . Daraufhin öffnet sich der Assistent zum Anlegen eines neuen Projekts. Screenshot Hier werden Ihnen verschiedene Projektvorlagen angeboten. Für die iPhone bzw. iPad App wählen Sie iOS - Application - Empty Application. Screenshot Nachdem die Vorlage ausgewählt wurde, einfach auf den "Next" Button klicken, und der Assistent zeigt eine Ansicht zur Eingabe weiterer Optionen an. Hier ist vor allem natürlich zuerst einmal der Name des Projekts wichtig. Screenshot Neben dem "Product Name" kann noch eine Organisation angegeben werden. Dieser Name erscheint dann in neuen Dateien als Copyright Vermerk. Der "Company Identifier" muss ein eindeutiger String sein. Üblicherweise verwendet man hier die "Reverse URL Notation", also z.B. "com.objectiveceeds" oder "com.apple". Der "Bundle Identifier" ist wieder ein eindeutiger String und setzt sich üblicherweise aus dem Namen der App und dem Company Identifier zusammen. Über diesen String wird die App dann im AppStore eindeutig identifiziert. Aber es dauert noch ein wenig, bis es soweit ist. Das "Class Prefix" besteht üblicherweise aus zwei Großbuchstaben, das wären z.B. die Initialen des Entwicklernamens oder der Firma. Klassennamen sollten immer mit diesem Prefix beginnen. Die "Basisklassen" von Apple beginnen z.B. mit "NS", also "NSObject" oder "NSArray". Die Klassen des UIKit dann mit "UI", "UILabel", "UIButton". Ich verwende "OC" für ObjectiveCeeds, also z.B. "OCViewController". Dann wählen Sie unter "Devices" noch aus, ob die App für das iPhone, iPad oder beide Gerätearten ist (Universal). Ich empfehle Ihnen, es auf Universal zu belassen. Den Haken bei "Use Core Data" entfernen Sie dann bitte. CoreData ist ein sog. "Persistenz Framework" um Objekte zu speichern. Das brauchen Sie in diesem "Hallo Welt" Beispiel noch nicht. Es geht weiter mit dem "Next" Button zur letzten Seite des Assistenten. Hier wird ein Speicherort für den Projektordner gewählt. Den Haken bei "Source Control" bitte wieder entfernen, falls er angehakt ist. Screenshot Mit einem Klick auf "Create" wird das Projekt dann angelegt und sie bekommen ein Fenster mit dem neuen Projekt angezeigt, das in etwa wie unten abgebildet aussieht. Screenshot Xcode ist eine sehr umfangreiche IDE (Integrated Development Environment). Lassen Sie sich von der Vielfalt nicht verwirren. Sie werden nur den Dateibrowser auf der linken Seite brauchen, den Editor und den "Playbutton" oben links. Alle Einstellungen lassen Sie, wie sie sind. Das Template stellt den Rumpf für eine neue App zur Verfügung und kann "Out of the Box" verwendet werden. Auf der linken Seite sollten zwei Dateien zu sehen sein, bei mit "OCAppDelegate.h" und "OCAppDelegate.m". Diese beinhalten bereits die erste Klasse des Projekts, "OCAppDelegate". In Objective-C gibt es für eine neue Klasse immer zwei Dateien, das "Header File" mit dem Interface und der Endung .h und die Implementation mit der Endung .m (Methoden). Eine neue Objective-C Klasse erstellen Jetzt werden gleich die Files für eine eigene Klasse angelegt. Sie brauchen einen sog. "ViewController". Wieder im Xcode Menu auf File >> New >> File Screenshot Es öffnet sich der Assistent zum Anlegen einer neuen Datei. Auch hier stehen wieder dutzende von Möglichkeiten zur Auswahl. Sie benötigen eine Objective-C Klasse. Also iOS - Cocoa Touch - Objective-C Class auswählen und auf "Next" klicken. Screenshot Im nächsten Fenster müssen Sie einen Namen für die Klasse vergeben und die Klasse auswählen, von der Ihre Klasse erbt (Superklasse). Die Superklasse ist "UIViewController" und wird bei mir den Namen "OCViewController" haben. Achtung, Objective-C ist "Case Sensitive". Achten Sie strikt auf Groß- / Kleinschreibung. Achten Sie darauf, das "Targeted for iPad" angehakt ist, und kein Haken bei "With XIB for user interface". "Next" Button klicken... Screenshot Nun müssen Sie einen Speicherort für die neue Datei angeben. Per Default ist hier der Projektordner ausgewählt, Sie können diese Einstellungen einfach übernehmen und auf "Create" klicken. Bei den Targets, sollte wie im Screenshot, die "Hallo Welt" App ausgewählt sein. Xcode 5 legt automatisch noch ein Target für Unittests an, das brauchen Sie eigentlich nicht. Screenshot Nun haben Sie ein neues Projekt und den Rumpf für eine eigene Klasse angelegt. Das Projektfenster sollte nun so ähnlich aussehen, wie auf dem folgenden Screenshot. Screenshot Nun hatten Sie schon eine Menge Arbeit. Aber im Grunde sind das Standard Workflows für Xcode Entwickler, die Sie sich sehr schnell eingeprägt haben werden. Meist kann man die Voreinstellungen von Xcode einfach übernehmen. Im Dateibrowser auf der linken Seite sollten nun vier Dateien zu sehen sein. Stören Sie sich im Moment nicht an den anderen Dateien, die hier angezeigt werden, vor allem verändern Sie auch nichts an ihnen. Die Dateien die Sie benötigen, sind "OCAppDelegate.h", "OCAppDelegate.m", "OCViewController.h" und "OCViewController.m". Wenn Sie eine der Dateien anklicken, können Sie sie im Editor bearbeiten. Sie können übrigens sobald ein neues Projekt angelegt ist, auf den "Build & Run" Button klicken. Er ieht aus wie der Play Button von iTunes. Screenshot Die App wird compiliert, gelinkt, ein Bundle wird geschnürt. Danach wird sie auf dem ausgewählten Gerät installiert und im Debug Modus gestartet. Als Device sollte per Default irgendein iOS Simulator ausgewählt sein. Um auf einem richtigen Gerät zu debuggen, benötigen Sie eine "Apple Developer Licence" und die entsprechenden Zertifikate, bzw. so genannte "Provisioning Profiles". Aber zunächst genügt der Simulator. Die App, die im Simulator läuft, ist einfach nur weiß. Am unteren Rand von Xcode, sollte sich die Debugconsole öffnen und eine Ausgabe erscheinen, die jetzt allerdings zuerst mal ignoriert werden kann. Genug geklickt, ab jetzt wird Code geschrieben. Die nächste PowerApp programmieren Zuerst werden die beiden Implementationsdateien (.m Dateien) ein wenig aufgeräumt. Da ist mehr drin, als wir für den Anfang brauchen- also erst mal raus damit, um die Übersicht zu verbessern. In OCAppDelegate.m stehen ein paar Methoden. Sie brauchen hier nur die Methode
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
Diese Methode wird nach dem Start der App automatisch aufgerufen. Sie überschreiben sie und das ist der Punkt, an dem die App dann "zusammengebaut" wird. Bearbeiten Sie die Datei, das sie wie unten abgebildet aussieht.
//
//  OCAppDelegate.m
//  HalloWorld
//
//  Created by Manfred Kress on 06.12.13.
//  Copyright (c) 2013 Manfred Kress. All rights reserved.
//

#import "OCAppDelegate.h"

@implementation OCAppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];

    
    
    
    self.window.backgroundColor = [UIColor whiteColor];
    [self.window makeKeyAndVisible];
    return YES;
}


@end
Auch in OCViewController.m steht zu viel. Außerdem wird die Initialisierungsmethode, die hier per Default darin steht, nur für die Arbeit mit dem Interface Builder benötigt. Ändern Sie die Datei, sodass sie wie folgt aussieht:
//
//  OCViewController.m
//  HalloWorld
//
//  Created by Manfred Kress on 06.12.13.
//  Copyright (c) 2013 Manfred Kress. All rights reserved.
//

#import "OCViewController.h"

@interface OCViewController ()

@end

@implementation OCViewController

- (id)init
{
    self = [super init];
    if (self) {
        // Custom initialization
    }
    return self;
}

@end
Die init Methode ist der Standardkonstruktor in Objective-C. Die Methode wird praktisch von jeder Klasse überschrieben und folgt immer diesem Standardmuster. Klicken Sie zur Sicherheit auf den Build Button. Die App sollte starten, allerdings sieht sie immer noch aus wie zuvor - weiß. iOS 7 Apps sollen viel "Weißraum" haben, aber das ist zu viel. Jetzt geht es richtig los. Sie bleiben in OCViewController.m und ändern die init Methode wie folgt ab:
//
//  OCViewController.m
//  HalloWorld
//
//  Created by Manfred Kress on 06.12.13.
//  Copyright (c) 2013 Manfred Kress. All rights reserved.
//

#import "OCViewController.h"

@interface OCViewController ()

@end

@implementation OCViewController

- (id)init
{
    self = [super init];
    if (self)
    {
        UIColor *backgroundColor = [UIColor yellowColor];
        
        [[self view] setBackgroundColor: backgroundColor];
    }
    return self;
}

@end
ViewController sind ein fundamentales Konzept in Cocoa Touch. Sie werden durch die Klasse "UIViewController" repräsentiert, von der ja unser OCViewController erbt. ViewController stellen eine sogenannte Szene einer App dar. Über sie wird das "MVC Pattern" implementiert und sie haben eine wichtige Rolle bei der Navigation durch eine App. Jeder ViewController hat eine View, welche durch die Klasse UIView repräsentiert wird. Diese View wird dann letztendlich angezeigt. Mit Views wird das User Interface einer App gestaltet. OCViewController erzeugt nun bei der Initialisierung ein UIColor Objekt, in dem Fall ein gelbes. Über den Methodenaufruf [self view] wird auf das eigene UIView Objekt zugegriffen. Mit setBackgroundColor: wird dann die gelbe Farbe als Hintergrundfarbe der View zugewiesen. Die ist eben per Default weiß. Aber die App wird immer noch weiß sein. Bis jetzt haben Sie ja nur eine Klasse für einen ViewController geschrieben. Jetzt muss davon natürlich auch eine Instanz erstellt und an der richtigen Stelle eingebaut werden. Und das passiert eben in OCAppDelegate.m, und zwar in der didFinishLaunching... Methode. Ändern Sie OCAppDelegate wie folgt ab:
//
//  OCAppDelegate.m
//  HalloWorld
//
//  Created by Manfred Kress on 06.12.13.
//  Copyright (c) 2013 Manfred Kress. All rights reserved.
//

#import "OCAppDelegate.h"

#import "OCViewController.h"

@implementation OCAppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];

    OCViewController *controller = [[OCViewController alloc] init];
    
    [[self window] setRootViewController: controller];
    
    
    self.window.backgroundColor = [UIColor whiteColor];
    [self.window makeKeyAndVisible];
    return YES;
}
@end
Zunächst muss das Headerfile unserer Klasse importiert werden. Nach der Erzeugung des App Windows, was in derVorlage schon gegeben ist, wird ein Objekt der Klasse OCViewController erzeugt. Genau genommen handelt es sich dabei um zwei Methodenaufrufe. "alloc" wird an die Klasse "OCViewController" geschickt und reserviert Speicher für das Objekt. Dem Objekt wird dann die Nachricht "init" geschickt- genau der Initializer, den Sie überschrieben haben und in dem der View die Hintergrundfarbe zugewiesen wird. Ihr ViewController (OCViewController Objekt) wird dann dem Window als "RootViewController" zugewiesen. Das Window wird nun die View ihres ViewControllers anzeigen. Ein Klick auf den "Build" Button (oder Apfel-r) wird die App bauen und auf dem iOS Simulator laufen lassen. Und wenn Sie alles richtig gemacht haben, sollte die App nun in strahlendem Gelb erscheinen. Screenshot Nun fehlt noch das "Hallo Welt". Ungeduldige können vielleicht in die application:DidFinishLaunching:withOptions die Zeile "NSLog (@"Hallo Welt");" einfügen, dann wäre das schon mal ganz klassisch über die Konsole geschehen. Das muss aber nicht sein, da Sie das jetzt unter Ausnutzung modernster iOS 7 Technologien bewerkstelligen können. Zurück zur Datei OCViewController.m . Hier wird eine neue Methode hinzugefügt. Besser gesagt eine bestehende Methode von UIViewController überschrieben. Die Methode heisst
- (void) viewDidAppear: (BOOL)animated;
. Fügen Sie folgenden Code in OCViewController.m hinzu:
- (void) viewDidAppear:(BOOL)animated
{
    [super viewDidAppear: animated];
    
    NSLog (@"Appear");   
}

Lassen Sie die App laufen. Sobald die View eines ViewControllers angezeigt wurde, wird der ViewController über dieses Ereignis informiert. Die Methode viewDidAppear: wird aufgerufen. Diese haben Sie überschrieben. Zunächst wird die Nachricht an die Superklasse (UIViewController) weitergeleitet, für den Fall, das UIViewController diese Nachricht benötigt. Dann kommt Ihr Code, in diesem Fall wird einfach "Appear" in der Konsole geloggt. Jetzt fügen Sie, sobald die View angezeigt wird, ein Label hinzu (UILabel). UILabel ist selbst auch wieder eine Unterklasse von UIView. Alle UI Elemente (Widgets) sind Unterklassen von UIView. Diese Views können wieder Subviews beinhalten. Man kann sich das wie Kärtchen vorstellen, die nebeneinander positioniert, bzw. ineinander verschachtelt werden. Die Position einer View innerhalb ihrer Superview wird durch ihren sog. Frame bestimmt. Ein Rechteck, mit einem Ursprungspunkt (oben links) und einer Größe. Nun ändern Sie die viewDidAppear: Methode wie folgt ab:
- (void) viewDidAppear:(BOOL)animated
{
    [super viewDidAppear: animated];
    
    CGRect frame = [[self view] frame];
    
    frame.size.height = 100;
    frame.origin.x = 0;
    frame.origin.y = 100;
    
    UILabel *label = [[UILabel alloc] initWithFrame: frame];
    
    UIColor *backgroundColor = [UIColor clearColor];
    UIColor *textColor = [UIColor blackColor];
    UIFont *font = [UIFont systemFontOfSize: 44];
    
    [label setText: @"Hallo Welt"];
    [label setBackgroundColor: backgroundColor];
    [label setTextColor: textColor];
    [label setFont: font];
    [label setTextAlignment: NSTextAlignmentCenter];
    
    [[self view] addSubview: label];   
}
Gespeichert wird so ein Frame in einem CGRect. Das ist kein Objective-C Objekt, sondern ein klassisches c struct. Zuerst wird der Frame der eigenen View gelesen. Dann wird die Höhe auf 100 Punkte gesetzt. Die Breite (frame.size.width) bleibt wie sie ist, damit ist das Label genau so breit wie die View. Der Ursprung wird auf x=0 gesetzt (ganz links) und y=100 (100 Punkte unter der "Oberkante"). Dann wird ein UILabel mit diesem Frame erzeugt. Jetzt folgen schon die Verschönerungsarbeiten. Hintergrundfarbe, Textfarbe, Schrift und Textausrichtung des UILabel werden angepasst. Schließlich wird das Label der eigenen View als Subview hinzugefügt. Screenshot Yeah, "Hallo Welt" im iStyle, handgemacht! Noch können Sie sich nicht auf Ihren Lorbeeren ausruhen. Eine Animation muss schon noch rein. Schon alleine, um etwas einfaches zu machen, bei dem man mit dem Interface Builder bzw. Storyboard an die Grenzen kommt. Also, frame.origin.y wird nicht auf 100, sondern -100 gesetzt. So wird das Label unsichtbar oberhalb der View platziert. Dann wird am Ende noch folgender Code eingefügt:
	frame.origin.y = 150;
    
    [UIView animateWithDuration: 1.0 animations:^{
        
        [label setFrame: frame];
        
    }];
Das ist ein Block, in dem Fall für eine Animation. Die Syntax von Blocks ist furchtbar, aber sie sind sehr praktisch. Schreiben Sie einfach Zeichen für Zeichen ab oder kopieren Sie es. Die viewDidAppear: sollte dann so aussehen:
- (void) viewDidAppear:(BOOL)animated
{
    [super viewDidAppear: animated];
    
    CGRect frame = [[self view] frame];
    
    frame.size.height = 100;
    frame.origin.x = 0;
    frame.origin.y = -100;
    
    UIColor *backgroundColor = [UIColor clearColor];
    UIColor *textColor = [UIColor blackColor];
    UIFont *font = [UIFont systemFontOfSize: 44];
    
    UILabel *label = [[UILabel alloc] initWithFrame: frame];
    [label setText: @"Hallo Welt"];
    [label setBackgroundColor: backgroundColor];
    [label setTextColor: textColor];
    [label setFont: font];
    [label setTextAlignment: NSTextAlignmentCenter];
    
    [[self view] addSubview: label];
    
    frame.origin.y = 150;
    
    [UIView animateWithDuration: 1.0 animations:^{
        
        [label setFrame: frame];
        
    }]; 
}
Build and Run. Das Label wird geschmeidig in den Bildschirm animiert. Ein "Hallo Welt" das einem iOS Gerät würdig ist. Wie geht es weiter? Ich möchte Sie auf meine iOS Entwickler Schulungen hinweisen. Vielleicht ist ja etwas für Sie dabei. Eine Fortsetzung dieses Tutorials ist bereits in Arbeit. Folgen Sie mir auf Twitter um Informationen über neue Tutorials zu erhalten. Und hier noch der Download der Projektdateien.


Seite: 1 von 1


iOS Tutorial: "Hallo Welt" - mit Xcode 5, aber mal ohne Storyboard