App-Entwicklung mit iOS Grundkurs 2: Das User Interface

Grundlagen des Auto-Layouts

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Auto-Layout bezeichnet in Xcode und iOS die Handhabung von verschiedenen Gerätegrößen, Seitenverhältnissen und Auflösungen. Dieses Video erklärt die Grundlagen des Auto-Layouts, die auf dem Einsatz von Constraints über sogenannte Pins (Sticker) beruhen.

Transkript

Wenn Sie Layouts von Apps erstellen, muss man unterscheiden zwischen statischen Layouts und dynamischen Layouts. Darunter versteht man folgendes: Angenommen man nimmt hier so eine App, wo man zwei Label hat auf der linken und rechten Seite genau positioniert, dann passen die nur zu einem speziellen Gerät, das heißt, wenn ich hier unten mal hinklicke und mir die verschiedenen möglichen Devices anschaue, dann sehen Sie, dass insbesondere das rechte Label nicht auf jedes Device passt. Auf manchen passt es, auf anderen ist es ziemlich weit vom rechten Rand entfernt. Wenn man nun eine Anpassung der Apps an die Devices haben möchte, dann muss man mit dynamischen Layouts arbeiten, sogenannten Autolayouts. Und das zu realisieren, macht man unter iOS mit sogenannten Pins, Stecker, oder auch Stiften. Man pinnt sozusagen eine Komponente, ein Widget hier, an irgendeine Position an und diese Position wird in der Regel von dem linken Rand und dem oberen Rand der View aus betrachtet, respektive vom rechten Rand und eben der oberen Begrenzung der View. Man kann natürlich auch den unteren Rand nehmen, aber wir beschränken uns jetzt mal auf vertikal, horizontal, nach links, rechts und oben. Um das Label jetzt anzupinnen, klicke ich mit der rechten Maustaste das Label an und ziehe es nach links -- Sie sehen, da entsteht so eine kleine Linie -- und ich lasse die rechte Maustaste in dem Moment los, wo ich diesen Rand erreiche, wird ein Kontextmenü eingeblendet mit einem Befehl "Leading Space to Container Margin", und den wähle ich aus. Nun sehen Sie, dass hier eine rote Linie auftaucht. Diese rote Linie sagt, dieses Label ist angepinnt am linken Rand, aber Rot suggeriert bereits, dass da noch gewisse Dinge nicht vollkommen in Ordnung sind. Tatsächlich kann man so ein Anpinnen eben nur dann vernünftig machen, wenn man in zwei Richtungen, vertikal und horizontal, eine Komponente anpinnt. Und das heißt, in dem Moment, wo ich jetzt links angepinnt habe, muss ich auch mit der rechten Maustaste erneut draufklicken, dann nach oben ziehen und auch am oberen Rand den Befehl zum Anpinnen wählen, also hier die Vertikale befestigen. Wenn ich das gemacht habe, entsteht jetzt hier eine blaue Linie. Und hier diese Linie hat auch die Farbe gewechselt von Rot auf Gelb. Das ist jetzt noch nicht ganz in Ordnung, aber wir wollen es hier mit dieser Fixierung belassen. Die Details bedeuten jetzt, dass das Layout funktionieren wird, aber man müsste noch gewisse Details genauer festlegen und das will ich an der Stelle noch nicht machen. Selbstverständlich müssen wir das jetzt auch mit dem rechten Label so durchziehen, das heißt, anklicken, rechte Maustaste, ziehen, Befehle auswählen, erneut rechte Maustaste, nach oben ziehen, Befehl auswählen. Und Sie sehen hier, für die rechte Komponente ist sogar alles in Ordnung; wir haben zwei blaue. Wir schauen uns das auf verschiedenen Devices an und da, wo es vorher nicht gepasst hat, ist jetzt alles in Ordnung. Das sieht man vor allen Dingen eben an der rechten Stelle. Das heißt also, wenn Sie die Grundlagen eines Autolayouts schaffen wollen, müssen Sie alle Komponenten, alle Widgets, die möglicherweise aus dem Layout eines Device rausfallen, auf die hier beschriebene Art und Weise mit Pins fixieren. Dann ist alles okay.

App-Entwicklung mit iOS Grundkurs 2: Das User Interface

Entwickeln Sie das User Interface Design einer iOS-App.

1 Std. 19 min (16 Videos)
Derzeit sind keine Feedbacks vorhanden...
Hersteller:
Software:
Exklusiv für Abo-Kunden
Erscheinungsdatum:29.05.2017

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!