Xcode-Rundgang

Das Problem: Ein Cockpit voller Knöpfe

Wer Xcode zum ersten Mal öffnet, fühlt sich oft wie im Cockpit eines Flugzeugs: überall Knöpfe, Leisten und Symbole. Die gute Nachricht: Du brauchst am Anfang nur einen kleinen Teil davon. Den lernst du jetzt kennen. Den Rest entdeckst du nach und nach im Kurs.

Schritt 1: Ein neues Projekt anlegen

Ein Projekt ist in Xcode der Ordner, in dem alles zu einer App liegt: Code, Bilder, Einstellungen.

1. Öffne Xcode.
2. Klick im Willkommensfenster auf Create New Project… (oder später über das Menü File → New → Project…, Kürzel ⇧ ⌘ N)
3. Wähle oben iOS und dann die Vorlage App. Klick auf Next.

Jetzt fragt Xcode nach ein paar Angaben:

4. Klick auf Next, wähle einen Speicherort (z. B. einen Ordner „SwiftUI-Kurs“ in deinen Dokumenten) und dann Create.

Schritt 2: Die fünf Bereiche von Xcode

Nach dem Erstellen öffnet sich das Hauptfenster. Es besteht aus fünf Bereichen:

┌─────────────────────────────────────────────────────────────┐
│  ① Toolbar   [▶ ■]  HelloWorld › iPhone-Simulator           │
├───────────┬───────────────────────────┬───────────┬─────────┤
│           │                           │           │         │
│ ② Navi-   │   ③ Editor                │  ④ Canvas │ Inspec- │
│   gator   │   (dein Code)             │  (Vor-    │ tor     │
│           │                           │  schau)   │         │
│           ├───────────────────────────┴───────────┤         │
│           │  ⑤ Debug-Bereich / Konsole            │         │
└───────────┴───────────────────────────────────────┴─────────┘

(Der Gerätename in der Toolbar hängt von deiner Xcode-Version ab.)

① Die Toolbar (oben)

Die wichtigsten Elemente:

• ▶ Play-Button (⌘ R): baut deine App und startet sie
• ■ Stop-Button (⌘ .): beendet die laufende App
• Geräteauswahl: Neben dem Projektnamen siehst du ein Gerät, z. B. ein iPhone-Modell. Klick darauf, um zu wählen, auf welchem Simulator oder iPhone die App laufen soll.
• Statusanzeige in der Mitte: zeigt, was Xcode gerade tut („Building…“, „Running…“) und ob es Fehler oder Warnungen gibt.

② Der Navigator (links)

Hier siehst du alle Dateien deines Projekts, ähnlich wie im Finder. In einem neuen Projekt sind das:

Ein Klick auf eine Datei öffnet sie im Editor.

③ Der Editor (Mitte)

Hier schreibst du deinen Code. Klick im Navigator auf ContentView.swift. Du siehst ungefähr das hier:

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Image(systemName: "globe")
                .imageScale(.large)
                .foregroundStyle(.tint)
            Text("Hello, world!")
        }
        .padding()
    }
}

#Preview {
    ContentView()
}

Du musst das noch nicht verstehen. Nur so viel:

• Image(systemName: "globe") zeigt ein Globus-Symbol.
• Text("Hello, world!") zeigt einen Text.
• VStack stapelt beides untereinander.

Die Farben im Code nennt man Syntax-Highlighting. Sie helfen dir, Code schneller zu lesen: Texte in Anführungszeichen haben eine Farbe, Schlüsselwörter wie struct oder var eine andere.

④ Der Canvas (rechts neben dem Editor)

Das ist die Vorschau (Preview) deines Bildschirms. Sie aktualisiert sich automatisch, während du tippst. Du siehst sofort, wie deine Änderung aussieht, ohne die App zu starten.

Siehst du keinen Canvas? Dann:

• Menü Editor → Canvas aktivieren, oder
• Kürzel ⌥ ⌘ ↩ (Option + Command + Enter)

Wenn die Vorschau pausiert ist, klick auf den kleinen Aktualisieren-Pfeil im Canvas oder drück ⌥ ⌘ P.

Der Inspector (ganz rechts) zeigt Details zur gerade ausgewählten Datei oder zum ausgewählten Element. Am Anfang brauchst du ihn kaum. Ein- und ausblenden kannst du ihn mit ⌥ ⌘ 0.

⑤ Der Debug-Bereich (unten)

Hier erscheinen Ausgaben, während deine App läuft, zum Beispiel Nachrichten, die du mit print(...) ausgibst, und Fehlerberichte. Der rechte Teil heißt Konsole.

Ein- und ausblenden mit ⇧ ⌘ Y.

Schritt 3: Deine erste Änderung

Jetzt wird's ernst. Ändere im Editor die Zeile

Text("Hello, world!")

in

Text("Hallo, ich lerne SwiftUI!")

Schau auf den Canvas: Der Text ändert sich fast sofort. 🎉

Und jetzt mach absichtlich etwas kaputt. Lösch das letzte Anführungszeichen:

Text("Hallo, ich lerne SwiftUI!)

Nach kurzer Zeit erscheint eine rote Markierung am Zeilenrand und eine Fehlermeldung, z. B.:

Übersetzt: „Der Text wurde nicht abgeschlossen.“ Xcode vermisst das schließende Anführungszeichen. Füg es wieder ein, und der Fehler verschwindet.

Schritt 4: Die App im Simulator starten

Der Canvas ist praktisch, aber nur eine Vorschau. Jetzt starten wir die App „richtig“:

1. Wähle oben in der Toolbar ein iPhone-Modell als Ziel aus.
2. Klick auf ▶ oder drück ⌘ R.
3. Warte einen Moment: Xcode baut die App, startet den Simulator und installiert die App darauf.

Beim ersten Mal dauert das etwas länger, weil der Simulator hochfahren muss.

Der Simulator verhält sich wie ein echtes iPhone: Du kannst mit der Maus tippen und wischen, zum Home-Bildschirm wechseln (⇧ ⌘ H) und deine App erneut öffnen.

Beenden kannst du die App mit ■ in Xcode (⌘ .).

Die wichtigsten Tastenkürzel

Du musst sie nicht alle sofort lernen. Druck dir die Tabelle aus oder kehr später hierher zurück.

Typische Probleme

Der Canvas zeigt „Preview paused“ oder eine Fehlermeldung

Klick auf den Aktualisieren-Pfeil oder drück ⌥ ⌘ P. Hilft das nicht: Prüf, ob dein Code einen roten Fehler hat. Die Vorschau funktioniert nur, wenn der Code fehlerfrei ist.

Ich habe aus Versehen „Storyboard“ statt „SwiftUI“ gewählt

Dann sieht dein Projekt völlig anders aus. Am einfachsten: Projekt schließen, löschen und neu anlegen, diesmal mit Interface: SwiftUI.

Ich habe einen Bereich versehentlich ausgeblendet

Alle Bereiche lassen sich über das Menü View wieder einblenden. Oder du nutzt die Kürzel oben.

Der Simulator ist sehr langsam

Beim ersten Start ist das normal. Bleibt er langsam, hilft es oft, andere Programme zu schließen oder den Simulator einmal zu beenden und neu zu starten.

FAQ

Übungen

Zusammenfassung

• Ein neues Projekt: iOS → App, Interface SwiftUI, Sprache Swift.
• Navigator (links): deine Dateien. Editor (Mitte): dein Code. Canvas (rechts): die Vorschau. Debug-Bereich (unten): Ausgaben.
• ⌘ R startet die App im Simulator, ⌘ . stoppt sie.
• 🔴 Rot = Fehler, 🟡 Gelb = Warnung.

Spickzettel

⌘ R       Starten          ⌘ .      Stoppen
⌥ ⌘ ↩     Canvas           ⌥ ⌘ P    Vorschau aktualisieren
⌘ 0       Navigator        ⇧ ⌘ Y    Debug-Bereich