Wie passt man SwiftUI-Layouts für iPhone Duo an? Einsteiger-Tutorial 2026

Wenn sich Ihre SwiftUI-Oberfläche an den tatsächlich verfügbaren Platz anpasst, statt eine bestimmte Gerätegröße oder Ausrichtung vorauszusetzen, vermeiden Sie viele typische Layoutfehler auf dem iPhone Duo. Prüfen Sie anschließend dieselbe Seite mit dem iPhone-Duo-Simulator in Xcode in unterschiedlichen Haltungen und Sicherheitsbereichen; das ist besonders wichtig, wenn Ihr Kurs eine Simulatorprüfung verlangt.

Wer sollte weiterlesen? Sie lernen SwiftUI und möchten ein Kursprojekt an Innen- und Außenbildschirm anpassen? Die folgenden Szenario-Prüfungen helfen Ihnen dabei.
Sie arbeiten überwiegend unter Windows, müssen aber ein Projekt in Xcode ausführen? Hier erfahren Sie, welche Mac-Umgebung Sie dafür einplanen müssen.
Sie haben bereits eine Seite gebaut und vermuten, dass beim Falten oder Drehen Inhalte verdeckt werden? Prüfen Sie sie gezielt anhand der Abschnitte weiter unten.

Stand der Prüfung: 30.10.2026. Die Angaben zu iPhone Duo und Xcode wurden anhand von Apples Vorbereitungsleitfaden, den Versionshinweisen zu Xcode 27.1, den Layout-Hinweisen und dem offiziellen Tech Talk geprüft.

Warum eine Kursseite nach dem Falten anders wirken kann

Ein häufiger Fehler ist nicht, dass SwiftUI plötzlich „falsch“ zeichnet. Häufiger passt die Oberfläche zu einer einzigen angenommenen Fläche: Ein Button hat eine feste Breite, eine Überschrift darf nicht umbrechen, oder ein Abstand funktioniert nur bei einer bestimmten Bildschirmaufteilung. Ändert sich die nutzbare Fläche, können Elemente dann zusammengedrückt, abgeschnitten oder weit auseinandergezogen erscheinen.

Bei einem Gerät mit Außen- und Innenbildschirm sollten Sie deshalb nicht nur fragen, ob dieselbe Seite grundsätzlich angezeigt wird. Prüfen Sie, ob ihre Inhalte in jedem Zustand lesbar und erreichbar bleiben. Der Außenbildschirm ist der kleinere sichtbare Bereich im gefalteten Zustand; der Innenbildschirm bietet im aufgeklappten Zustand eine andere verfügbare Fläche. Wie viel Platz Ihre App tatsächlich für Inhalte hat, hängt aber auch von Navigation, Systemoberfläche und Sicherheitsbereichen ab. Apples Vorbereitungsleitfaden für iPhone Duo beschreibt die gerätespezifische Vorbereitung. Die Apple Human Interface Guidelines für Layouts erläutern die allgemeinen Grundsätze für anpassungsfähige Oberflächen.

Für Ihr Kursprojekt bedeutet das: Behandeln Sie die Ansicht nicht als unveränderliches Bild, das auf jedem Zustand dieselbe Geometrie behalten muss. Verwenden Sie flexible Breiten, erlauben Sie Textumbruch und prüfen Sie, ob Navigation und Bedienaktionen auch bei weniger Platz verständlich bleiben. Ein Layout, das sich gut anpasst, muss nicht bei jeder Änderung komplett neu gestaltet werden; oft reicht es, die Reihenfolge, Gruppierung oder Darstellung einzelner Bereiche an die vorhandene Fläche anzupassen.

Außenbildschirm: Bleiben Titel und Hauptaktion bedienbar?

Beginnen Sie mit dem gefalteten Zustand und betrachten Sie zuerst die Aufgabe der Seite. Bei einer Kursseite könnte das heißen: Der Kurstitel ist lesbar, die aktuelle Lektion erkennbar und die wichtigste Aktion – etwa „Weiter“ oder „Aufgabe öffnen“ – erreichbar. Genau diese Kerninformationen sollten nicht davon abhängen, dass der Nutzer das Gerät aufklappt.

Suchen Sie in Ihrem SwiftUI-Code nach Stellen, an denen Sie eine Breite, Höhe oder einen großen Abstand fest vorgeben. Feste Werte sind nicht automatisch falsch: Ein kleines Symbol kann eine definierte Größe benötigen. Kritisch wird es, wenn die gesamte Inhaltsfläche mit einer angenommenen Gerätebreite kalkuliert wird und dadurch Text oder Schaltflächen keinen Spielraum mehr haben. Apples Layout-Leitfaden empfiehlt, Oberflächen an den verfügbaren Platz und die jeweilige Umgebung anzupassen, statt eine einzelne Bildschirmgeometrie als allgemeingültig zu behandeln.

Gehen Sie an der schmaleren Darstellung der Reihe nach vor:

• Lesen Sie Überschrift und kurzen Beschreibungstext, ohne dass Wörter oder Zeilen abgeschnitten wirken.
• Prüfen Sie, ob die Hauptaktion vollständig sichtbar und mit dem vorgesehenen Interaktionsziel erreichbar bleibt.
• Achten Sie darauf, ob ein horizontal angeordneter Bereich zu eng wird; eine vertikale Anordnung kann dann besser funktionieren.
• Kontrollieren Sie, ob Navigation und Inhalt einander Platz wegnehmen oder wichtige Informationen verdrängen.
• Notieren Sie, was tatsächlich problematisch ist, bevor Sie Werte im Code ändern.

Wichtig ist die Unterscheidung zwischen „weniger Inhalt anzeigen“ und „Inhalt verlieren“. Eine Kursseite darf auf wenig Platz beispielsweise Zusatzinformationen nachrangig behandeln. Die nächste Aktion oder eine notwendige Fehlermeldung sollte jedoch nicht verschwinden, nur weil eine feste Höhe oder ein knapp bemessener Container sie verdrängt.

Innenbildschirm: Mehr Fläche nutzen, ohne sie fest einzuplanen

Öffnen Sie danach dieselbe Seite auf dem Innenbildschirm. Prüfen Sie nicht nur, ob sie größer aussieht, sondern ob der zusätzliche Platz eine erkennbare Funktion erfüllt. Ein weiter auseinandergezogener Button und eine übermäßig breite Textzeile sind nicht automatisch eine bessere Nutzung der Fläche.

Bei einer Lektion können Sie beispielsweise den Erklärungstext und eine ergänzende Seitenleiste nebeneinander darstellen, sofern die verfügbare Breite dafür ausreicht und beide Bereiche lesbar bleiben. Ist die Fläche dafür nicht groß genug, sollte die Oberfläche zu einer gestapelten Darstellung zurückkehren. Entscheidend ist die konkrete verfügbare Fläche, nicht eine feste Annahme wie „aufgeklappt bedeutet immer zweispaltig“.

Hier kommt der Begriff Size Class ins Spiel. Vereinfacht gesagt beschreibt eine Size Class, ob der verfügbare Platz in einer Dimension als kompakt oder regulär eingeordnet wird. Sie ist eine Entscheidungshilfe für Layoutvarianten, aber kein Ersatz dafür, die tatsächliche Darstellung zu prüfen. Verwenden Sie Size Classes daher als Teil Ihrer Layoutlogik und nicht als Bezeichnung für eine bestimmte Gerätehaltung.

Prüfen Sie bei der breiteren Darstellung, ob:

• längere Textzeilen noch bequem lesbar sind oder eine begrenzte Textbreite sinnvoller ist;
• zusammengehörige Informationen als Gruppe erkennbar bleiben;
• eine zusätzliche Navigations- oder Inhaltsansicht wirklich hilft;
• Schaltflächen nicht ohne Grund an den Rand rutschen;
• ein Wechsel zwischen gestapelter und nebeneinanderliegender Darstellung die Lesereihenfolge verständlich lässt.

Ändern Sie nicht vorsorglich die gesamte Oberfläche, nur weil sich der Bildschirm geöffnet hat. Wenn dieselbe Anordnung weiterhin funktioniert, darf sie bestehen bleiben. Wenn Sie eine andere Anordnung benötigen, sollte deren Auslöser der verfügbare Platz oder die passende Size Class sein – nicht die bloße Annahme, eine bestimmte Haltung müsse immer ein bestimmtes Layout bedeuten.

Drehung und Zeltmodus: Inhalte neu ordnen und erneut lesen

Drehen Sie das Gerät im Simulator und prüfen Sie anschließend den Zeltmodus, sofern die bereitgestellten Simulatorsteuerungen diese Haltung anbieten. Die Ausrichtung beschreibt, wie die Oberfläche gedreht ist; sie sagt für sich allein nicht zuverlässig aus, wie viel Platz jeder Bereich Ihrer App erhält. Verwenden Sie daher keine pauschale Regel wie „Querformat heißt immer zwei Spalten“. Orientieren Sie Ihre Layoutentscheidung an der tatsächlich verfügbaren Fläche und kontrollieren Sie das Ergebnis in jeder relevanten Haltung. Apples Tech Talk zur Entwicklung für iPhone Duo behandelt die gerätespezifischen Entwicklungsszenarien.

Achten Sie nach jeder Änderung der Haltung auf dieselben Elemente, statt sich nur auf den ersten visuellen Eindruck zu verlassen: Ist die Lektion weiterhin in einer sinnvollen Lesereihenfolge aufgebaut? Können Sie auf Navigation und Hauptaktion zugreifen? Bleiben längere Texte vollständig? Gibt es eine auffällige leere Fläche, die auf eine starre Ausrichtung oder einen nicht mitwachsenden Container hindeutet?

Wenn Sie einen Fehler finden, grenzen Sie ihn ein, bevor Sie ihn beheben. Wird nur der Button abgeschnitten, prüfen Sie zunächst dessen umgebende Anordnung und verfügbare Breite. Verschiebt sich die gesamte Seite, untersuchen Sie den übergeordneten Container und die verwendeten Layoutannahmen. Wird ein Abschnitt nach der Drehung nicht mehr sichtbar, kontrollieren Sie, ob die Seite scrollen kann und ob eine feste Höhe den Inhalt begrenzt.

So vermeiden Sie den typischen Anfängerfehler, mehrere Layoutwerte gleichzeitig zu ändern und danach nicht mehr zu wissen, welche Änderung geholfen hat. Passen Sie eine Ursache an, prüfen Sie die betroffene Haltung erneut und vergleichen Sie anschließend die übrigen Ansichten. Eine Oberfläche ist erst dann ausreichend geprüft, wenn die Anpassung nicht bloß den einen Screenshot verbessert, sondern die anderen Zustände nicht unbrauchbar macht.

Faltbereich und Sicherheitsbereiche: Was darf bis an den Rand reichen?

Der Sicherheitsbereich ist der Teil der Oberfläche, in dem wichtige Inhalte nicht von Systemelementen oder gerätespezifischen Bereichen beeinträchtigt werden sollen. Am Rand können Bereiche liegen, die sich für eine Hintergrundfarbe oder ein dekoratives Bild eignen, während Text, Eingabefelder und wichtige Schaltflächen dort nicht ohne Prüfung platziert werden sollten. Bei iPhone Duo sollten Sie außerdem die gerätespezifischen Bereiche und Haltungen berücksichtigen, die Apples Vorbereitungsleitfaden beschreibt.

Unterscheiden Sie deshalb bewusst zwischen Hintergrund und Vordergrund. Ein farbiger Hintergrund darf je nach Gestaltung über eine größere Fläche verlaufen. Eine Schaltfläche, ein Kurstitel oder ein Feld, in das Lernende etwas eingeben müssen, braucht dagegen eine Position, an der es sichtbar und bedienbar bleibt. Verwenden Sie die systemüblichen Navigationskomponenten und die vorgesehenen Safe-Area-Verhaltensweisen, statt wichtige Elemente mit festen Bildschirmkoordinaten an einen vermeintlich freien Bereich zu setzen.

Das ist besonders wichtig, wenn Sie einen Bereich nahe der Falte oder um die Kamera herum gestalten. Verwechseln Sie dabei eine sichtbare Lücke nicht automatisch mit einem Fehler: Entscheidend ist, ob sie den Inhalt beeinträchtigt oder die Bedienung erschwert. Umgekehrt beweist ein optisch passender Screenshot nicht, dass ein überlagerter Button auch in einer anderen Haltung sicher erreichbar bleibt. Für gerätespezifische APIs sollten Sie sich an Apples bestätigte Angaben halten und keine Unterstützung aus einer ähnlichen Gerätefunktion ableiten.

So prüfen Sie Ihr Kursprojekt Schritt für Schritt im Simulator

Apple bestätigt die Unterstützung des iPhone-Duo-Simulators und der Device-Hub-Steuerung in den Versionshinweisen zu Xcode 27.1. Die Device-Hub-Dokumentation beschreibt die zugehörige Steuerung. Damit können Sie Haltung und Ausrichtung in einer kontrollierten Entwicklungsumgebung prüfen. Diese Prüfung behauptet nicht, dass der Simulator einen Test auf einem realen Gerät ersetzt.

1. Klären Sie zuerst, was der Kurs verlangt. Notieren Sie, ob Sie nur den SwiftUI-Code abgeben, einen Screenshot erstellen, die App im Simulator starten oder zusätzlich einen Nachweis für bestimmte Haltungen liefern müssen. So vermeiden Sie, eine nicht geforderte Geräteprüfung mit einer Simulatorprüfung zu verwechseln.

2. Öffnen Sie das vorhandene Projekt und starten Sie die Kursseite. Verwenden Sie zunächst die Ansicht, an der Sie bereits gearbeitet haben. Halten Sie fest, welche Elemente in der Ausgangsdarstellung sichtbar sind und welche Aktion die Seite ermöglichen soll.

3. Wählen Sie den iPhone-Duo-Simulator in der von Apple dokumentierten Xcode-Umgebung aus. Prüfen Sie in den Versionshinweisen zu Xcode 27.1, ob die beschriebene Unterstützung zu Ihrer installierten Version passt. Verlassen Sie sich nicht auf eine ältere Anleitung, ohne deren Versionsbezug zu kontrollieren.

4. Kontrollieren Sie den gefalteten Zustand. Prüfen Sie Titel, Text, Navigation und Hauptaktion. Notieren Sie jedes abgeschnittene Element und jede Interaktion, die nicht mehr erreichbar ist.

5. Wechseln Sie mit den dokumentierten Device-Hub-Steuerungen durch die verfügbaren Haltungen und Ausrichtungen. Prüfen Sie den aufgeklappten Zustand, die Drehung und weitere für Ihr Kursprojekt relevante Haltungen einzeln.

6. Wiederholen Sie dieselbe Inhaltsprüfung in jedem Zustand. Achten Sie auf Textumbruch, Reihenfolge, freie Flächen, Navigation und Sicherheitsbereiche. Notieren Sie pro Ansicht genau eine konkrete Abweichung, bevor Sie den Code ändern.

7. Ändern Sie die Layoutursache und führen Sie die Prüfung erneut aus. Falls ein Element abgeschnitten ist, suchen Sie zuerst nach einer festen Größe oder einem ungeeigneten Container. Falls eine breite Darstellung unruhig wirkt, prüfen Sie Gruppierung und Textbreite. Ändern Sie nicht wahllos mehrere Werte gleichzeitig.

8. Dokumentieren Sie, was Sie tatsächlich getestet haben. Ein Screenshot aus dem Simulator belegt eine Prüfung in dieser simulierten Umgebung. Stellen Sie ihn nicht als Nachweis für einen Test auf realer Hardware dar, wenn Sie diesen nicht durchgeführt haben.

Der letzte Punkt ist für die Abgabe wichtig: Ein Simulator hilft Ihnen, Layoutverhalten reproduzierbar zu untersuchen, aber er ist keine reale Geräteprüfung. Wenn die Aufgabenstellung einen Test auf Hardware fordert, müssen Sie diesen gesondert organisieren; wenn sie nur eine Simulatorprüfung verlangt, sollten Sie genau das dokumentieren und keine weitergehende Aussage machen.

Wenn Sie unter Windows arbeiten: Wo liegt die Umgebungsgrenze?

Sie können SwiftUI-Grundideen und Teile der Projektplanung auch ohne einen eigenen Mac lernen. Für das Öffnen und Ausführen eines iOS-Projekts in Xcode sowie den dort bereitgestellten iOS-Simulator brauchen Sie jedoch eine passende macOS-Entwicklungsumgebung. Maßgeblich sind Apples Xcode-Systemanforderungen zusammen mit den Angaben zur benötigten Simulatorversion in den Versionshinweisen zu Xcode 27.1. Prüfen Sie diese Angaben gegen die Kursvorgabe, bevor Sie eine Umgebung buchen oder eine Installation planen.

Ein Windows-PC kann für Swift-Grundlagen, Notizen und einen Teil der Arbeit am Quelltext nützlich sein. Er ersetzt aber nicht automatisch die Mac-Umgebung, die Sie zum Starten von Xcode und zum Ausführen des dortigen iOS-Simulators benötigen. Auch ein Screenshot aus einer anderen Vorschauumgebung weist nicht nach, dass Ihr Projekt im geforderten Simulator funktioniert.

Ein entfernter Mac kann die Lücke zwischen einem Windows-Rechner und einer benötigten Xcode-Umgebung schließen, wenn die Schule keinen passenden Rechner bereitstellt. Dabei sollten Sie die konkrete Umgebung und den Zugriff vorab prüfen, statt eine bestimmte Xcode-Version oder einen Simulatorzugang ungeprüft vorauszusetzen. Wenn Ihr Projekt vertrauliche Kurs- oder Personendaten enthält, lesen Sie vor der Übertragung außerdem die Datenschutzhinweise und beachten Sie die Vorgaben Ihrer Hochschule zur Datenverarbeitung.

Wenn Sie nur lernen, wie sich SwiftUI-Layouts an verfügbaren Platz anpassen, können Sie zunächst die Anordnungen und Bedingungen in Ihrem Projekt nachvollziehen. Verlangt Ihre Aufgabe jedoch, dass Sie iPhone Duo im Xcode-Simulator starten und verschiedene Haltungen dokumentieren, brauchen Sie Zugang zu einer passenden Mac-Umgebung. Informationen zu möglichen Einsatzszenarien für einen gemieteten Mac können Sie mit Ihrer Aufgabenstellung abgleichen; Mietoptionen sollten Sie erst prüfen, wenn Zeitraum und technische Anforderungen feststehen.

Ihr sinnvollster nächster Schritt hängt somit von der Abgabe ab: Ohne geforderte Simulatorprüfung können Sie die Layoutlogik zunächst in Ruhe überarbeiten; mit einer verbindlichen Xcode-Prüfung sollten Sie zuerst die Systemanforderungen und den tatsächlichen Zugang zu einem Mac klären. Ein Windows-only-Arbeitsplatz kann Xcode nicht ersetzen, während ein Kauf für eine einzelne Kursphase möglicherweise mehr Bindung bedeutet, als Sie benötigen. Ein gemieteter Mac von KVMFLUX ist dann eine Option, die Sie anhand der benötigten Xcode-Umgebung, des Zugriffs und des Mietzeitraums prüfen können. Wenn Sie den Mac dauerhaft für regelmäßige Entwicklungsarbeit oder spezielle physische Anschlüsse benötigen, kann ein eigener Rechner besser passen.