App-Entwicklung mit iOS Grundkurs 2: Das User Interface

Constraints mit dem Size Inspector ändern

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Der Size Inspector ist ein Tab in der Inspector-Leiste von Xcode. Dort können Sie neben der Festlegung der Größe von UI-Objekten auch die mit dem Auto-Layout hinzugefügten Constraints (Pins) auswählen und ändern.

Transkript

Die Gestaltung einer Oberfläche einer App mit "Auto Layout", erinnert mich sehr stark an die Web-Programmierung. Viele Dinge, die ich aus der Web-Programmierung kenne, CSS, werden sich hier wiederfinden. Das heißt, wir haben beispielsweise einen rechteckigen Bereich, ein "Frame Rectangle", um die Maße einer Komponente anzugeben, sprich eines Labels, eines Buttons et cetera. Sie sehen diese Dinge alle in dem sogenannten "Size Inspector". Und wenn Sie eine Komponente anklicken, dann sehen Sie die Breite der Komponente, die man automatisch an den Inhalt anpassen kann. Sie sehen aber auch die exakten Maße, die gerade von einer Komponente eingenommen werden. Bezüglich ihrer Position, aber eben auch der Breite und Höhe von diesem Rechteck hier, diesem umgebenden Rectangle. So etwas Ähnliches wie eine Box unter CSS, denke ich. Zumindest kann man es sich so assoziieren. Ansonsten haben Sie hier auch Margin-Angaben. Margin-Angaben sind Außenabstände und Sie haben besagte Constraints, die die Pins betreffen. Das heißt, Zwänge, die durch das Festlegen von Pins erfolgen. Und es kann jetzt ganz interessant sein, dass Sie nicht eine Komponente selbst modifizieren, wenn beispielsweise Abweichungen von einem gewissen vorgegebenen Layout durch Pins auftauchen, sondern man modifiziert die Pins selbst, die Constraints. Das schauen wir uns jetzt an. Zuerst einmal mache ich dieses Verschieben rückgängig, mit der üblichen Tastenkombination und dann schaue ich mir mal diesen Constraints-Bereich hier im "Size Inspector" etwas genauer an. Wir haben für dieses Label einen Pin festgelegt oder Zwänge, Constraints, für die Abstände nach links und nach oben. Das wird durch diese Linien hier angezeigt. Und wenn man diese Linien hier anklickt, die sogenannten Top oder Top Margin-Angaben, dann haben Sie darunter die konkreten Zwänge, sprich die Regeln für diesen Abstand. Genauso auch für diesen linken Abstand hier. Und Sie sehen, dass wir diese Angaben hier auch modifizieren können, da gibt es dieses "Edit". Wenn man da raufklickt, dann sieht man, wie groß ist dieser Abstand, in dem Fall der Wert 0. Des weiteren haben Sie eine Priorität. Eine Priorität ist dann interessant, wenn Sie verschiedene Pins haben, die Zwänge vorgeben und die sich widersprechen. Dann wird der Zwang zum tragen kommen, der die höhere Priorität hat. Ich möchte mal hier einen Wert einfach verändern. Ich gehe mal hier auf 10 und bestätige das und Sie sehen, das Label wurde nach unten verschoben. Ich gehe mal auf -10 und jetzt wurde das Label nach oben verschoben. Das heißt, kann man natürlich hier auch mit Standardwerten vorgeben, was auch immer also. Freie Texteingabe plus die üblichen weiteren Möglichkeiten zur Modifikation. Darüber kann man eine Komponente verschieben, wobei man wie gesagt eigentlich nicht die Komponente verschiebt, sondern man legt die Zwänge, die Pins fest, an denen sich die Komponente ausrichtet. Und das hat den wesentlichen Vorteil, dass es eben automatisch sich an verschiedene Devices wieder anpasst. Nun ist Ihnen vielleicht aufgefallen, dass ich bei den Werten hier bewusst keine Einheit genannt habe. Für was steht dieses 10 eigentlich? Für Pixel? Nein, das steht für Points, Punkte. Auch nur darüber bekommt man eine Plattform-Neutralität, denn die verschiedenen Devices haben hier ganz verschiedene Auflösungen, und von daher wäre es relativ unsinnig mit Pixel zu arbeiten. Wir reden hier also von Points, Punkten. Es gibt nun noch einige weitere Dinge, die man bei einem Pin modifizieren kann. Das sehen Sie hier beispielsweise. Das wird bei einer weiterführenden Gestaltung durchaus interessant. Für jetzt sollen Sie sich nur merken, dass Sie Ihre Pins hier über den Size Inspector sehr einfach und komfortabel modifizieren können.

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!