Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

App-Entwicklung mit iOS Grundkurs 2: Das User Interface

Storyboards und Interface Builder

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Der Interface Builder ist der Teil von Xcode, mit dem Sie Benutzeroberflächen entwerfen und bearbeiten, die in Storyboard-Dateien enthalten sind. Dieses Video erklärt die Organisation von Storyboards im Detail.

Transkript

Ich möchte mich mit Ihnen hier in diesem Video darüber unterhalten, wie die Storyboards in Xcode beziehungsweise bei der Entwicklung von iOS genauer funktionieren. Ich habe dazu ein Projekt angelegt. Das ist eine Single-View-App und die heißt hier "Basic UI" -- das spielt keine große Rolle, aber das wird die Basis aller Erklärungen sein. Wie Sie sehen, habe ich hier das "Main.storyboard" angeklickt. Und Sie sehen hier die "View Controller Scene" hier neben das Aussehen meiner App -- da ist noch nicht allzu viel zu sehen -- und hier haben Sie die Strukturen, die man in der Document Outline sich anzeigen kann. Man kann hier mit dem Pfeil -- das wissen Sie sicherlich -- eine Hierarchie expandieren und auch wieder kollabieren. In dem Projekt gibt es keinerlei Modifikationen, es ist also direkt aus der Schablone entwickelt worden, sozusagen jungfräulich. Diese Document Outline ist für Sie hauptsächlich zur Navigation gedacht. Es erleichtert viele Schritte, wenn man hier in der Document Outline navigiert und nicht hier auf dieser visuellen Ebene. Das schauen wir uns gleich etwas genauer an. Es gibt einige Situationen, wo man wirklich über die Outline bedeutend besser die Strukturen von einem Projekt erkennen kann. Unser View Controller ist jetzt das Wurzelelement von einer App. Sie haben hier drei Unterstrukturen derzeit. Der Top Layout Guide, das ist hier oben dieser kleine Bereich. Der Bottom Layout Guide, wie der Name schon sagt, wird sich am unteren Ende der App befinden. Möglicherweise ist auch gar nichts sichtbar; es ist also kollabiert, wenn kein Inhalt dort zu sehen ist. Und selbstverständlich die gesamte View; die wird Komponenten aufnehmen wie Label, Schaltflächen et cetera. Suchen wir uns mal ein Label und ziehen das da drauf. Das kann man beispielsweise so machen, indem man hier in diesem Filterbereich nach "label" sucht. Sobald man es gefunden hat, kann man es einfach per Drag-and-Drop hier auf diese View ziehen. Mit den Hilfslinien sieht man auch genau, wo man diese Komponente jetzt anordnen würde. Beachten Sie, dass sich jetzt natürlich hier auch was in dem Document Outline-Bereich getan hat. Sie sehen hier in der Hierarchie unter der View diese Komponente. Das sagt also, diese Komponente ist ein Kindelement -- sagt man -- von diesem Elternelement, in dem Fall die View. Das, was Sie hier sehen, sieht so aus, als wäre das das gleiche wie das, was Sie hier als Beschriftung von diesem Label sehen, aber das ist nicht der Fall. Das ist der Name von dem dazugehörigen Objekt, denn im Grunde liegen dahinter nichts anderes als Objekte. Und das hier ist defaultmäßig vom Namen zwar identisch wie die Beschriftung; es sind zwei unterschiedliche Paar Schuhe. Wenn Sie hier in der Document Outline auf das Label klicken, können Sie den Namen verändern, das heißt, ich schreibe jetzt mal "title" hin, bestätige mit der Return-Taste oder klicke irgendwo an eine andere Stelle, und dann sehen Sie, hier hat sich der Name von dieser Komponente geändert, aber die Beschriftung hat sich nicht geändert. Das sind unterschiedliche Eigenschaften. Über einen entsprechenden Namen kann man später eine Komponente identifizieren. Die Beschriftung kann sich jederzeit ändern; das ist eine Eigenschaft, die in der Regel sogar zur Laufzeit geändert wird, der Name normalerweise nicht. Nun ist ein Label möglicherweise noch nicht so eindrucksvoll. Warum soll ich hier in der Document Outline navigieren und nicht hier in meinem User-Interface? Wenn wir hier mal eine weitere Komponente suchen, beispielsweise eine View, dazu gebe ich hier "view" ein und dann muss ich ein bisschen scrollen, weil es gibt eine ganze Menge von Komponenten, die den Bezeichner "view" enthalten. Und etwas weiter unten, ziemlich weit unten sogar, werde ich die View finden, mit der wir hier oben im Grunde auch schon arbeiten. Wir können auch eine weitere View auf das User-Interface ziehen -- ganz einfach mit Drag-and-Drop -- und es spielt keine Rolle, wo die jetzt abgelegt wird. Wenn ich die View eingefügt habe, dann sehen Sie hier an diesen Anpackern, wo sich die View befindet, aber das gilt nur so lange, solange diese View auch markiert ist. Wenn ich jetzt an eine andere Stelle klicke, dann ist die View plötzlich nicht mehr sichtbar hier im User-Interface; sie hat ja die gleiche Hintergrundfarbe wie die umgebende View. Und wenn ich jetzt hier klicke, da klicke, um sie irgendwie wiederzufinden, dann ist es Zufall, wann ich sie wirklich erwische. Ich habe es hier gesehen, als der Mauszeiger sich verändert hat, aber im Grunde ist es sehr schwer, hier die View wiederzufinden. Hier sehe ich sie sofort, das heißt, auch wenn sie nicht selektiert ist, kann ich sie jederzeit hier über die Document Outline selektieren, wiederfinden. Das zeigt zum Beispiel eine sehr nützliche Anwendung: Ich werde mal jetzt die Hintergrundfarbe von dieser View etwas ändern. Das kann ich hier machen in meinem "Attributes Inspector". Das ist dieser Inspektor, der mit diesem Pfeil nach unten hier markiert ist. Und hier gibt es eine Eigenschaft "Background". Wenn ich hier drauf klicke, kann ich beispielsweise die Hintergrundfarbe auf "Light Gray" stellen. Das ist optisch sicherlich nicht sonderlich schön, aber ich sehe die View jetzt. Fassen wir kurz zusammen: Die Document Outline eignet sich hervorragend, etwas wiederzufinden, was nicht sichtbar ist; entweder weil es die gleiche Farbe hat -- Hintergrundfarbe -- oder weil es auch möglicherweise verdeckt ist. Man kann Komponenten übereinander legen und die dahinterliegenden Komponenten sieht man dann überhaupt nicht hier im User-Interface. Sofern hier die Document Outline übrigens nicht sichtbar ist, man kann die jederzeit hier ausblenden und wieder einblenden vor allen Dingen; das macht diese kleine Schaltfläche hier. Nun möchte ich das Label in diese innere View hineinziehen. Das kann man machen, um beispielsweise mehrere Komponenten zu gruppieren, also mehrere Komponenten zusammen in einer inneren View zusammenfassen. Dazu kann ich das Label hier anpacken, und wenn ich es erwische, kann ich auch direkt es hier hineinziehen. Sie sehen es an der Kennzeichnung, dass ich mich jetzt innerhalb der inneren View befinde. Und wenn ich jetzt loslasse, wird sich das Label als Kindelement in der inneren View befinden. Es kann nun teilweise aber ein bisschen trickreich sein, dieses Label hier zu erwischen. Und man kann hier auch mit der Document Outline arbeiten, denn Sie sehen, dieses Label ist jetzt hier ein Kindelement der View und ich kann es nehmen und an der Stelle auch an eine andere Stelle ziehen, das heißt in der Ebene zum Beispiel nach oben in der Hierarchie. Beachten Sie, dass diese blaue Linie da mit diesem runden Kreis eine Bedeutung hat, das heißt, wo der runde Kreis sich befindet. Ich lasse jetzt mal los und Sie sehen, dass sich das Label wieder in der äußeren View befindet und nicht mehr in der inneren. Die Position sei jetzt mal außer Acht gelassen. Ich ziehe jetzt das Label in die innere View hinein, aber auch hier über das Document Outline, und lasse los; und es befindet sich wieder im Inneren der View. Das gleiche wieder zurück. Nun achten Sie bitte genau auf die blaue Linie. Die blaue Linie hat jetzt diesen Kreis am rechten Rand der View. Ziehe ich es etwas weiter nach links... Und jetzt ist der Kreis am linken Rand. Wenn ich dann loslasse, befindet sich das Label nicht in der View, sondern in der Hierarchie hinter der View. Das hat Konsequenzen. Man nennt diese Komponenten, die sich hier auf gleicher Ebene befinden sogenannte Geschwisterelemente der Hierarchie, Siblings. Und die Reihenfolge hier ist immens interessant, wenn sich diese Komponenten überdecken. Ich ziehe das Label jetzt mal nach oben, und zwar so, dass es sich nicht in der View befindet, aber geringfügig darüber hinausragt. Das war ein wenig zu wenig; müssen wir noch nach außen gehen. Ich ziehe es wieder nach unten. Sie sehen, dass die Navigation und das Verschieben teilweise in der Outline viel zuverlässiger geht. So, jetzt müsste ich außerhalb sein; jetzt bin ich wieder innerhalb, jetzt wieder außerhalb. Wenn ich jetzt die View darüber ziehe, geringfügig, dann haben wir den Effekt, den ich eigentlich haben möchte. Dann sehen Sie, dass das Label die View überdeckt. Die Reihenfolge, wie diese Komponenten hier gerendert werden, ist so, dass das, was zuerst hier in der Hierarchie auftaucht, zuerst gerendert wird und das nachfolgende danach. Und damit überdeckt das nachfolgende das zuerst gerenderte. Das ist bemerkenswert, weil in einigen Grafikprogrammen wie Photoshop ist das umgekehrt. Wir sehen den Effekt ganz extrem, wenn ich jetzt dieses Label nach oben ziehe -- auch als Geschwisterelement -- und die View danach gerendert wird. Sie sehen, die View verdeckt jetzt das Label. Wir haben also diese Document Outline als eine hervorragende und mächtige Möglichkeit jetzt kennengelernt, zwischen den Komponenten, den Bestandteilen einer App, zu navigieren. Insbesondere dann ist das sehr wichtig, wenn sich Komponenten verdecken oder nicht sichtbar sind im User-Interface.

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!