App-Entwicklung mit iOS Grundkurs 2: Das User Interface

Größe von Objekten automatisch anpassen

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Constraints und Pins können nicht nur die Positionierung der Benutzeroberflächenobjekte steuern. Man kann damit auch die Größe der UI-Objekte steuern.

Transkript

Zu einem vernünftigen Auto-Layout zählt neben der Anpassung der Position einer Komponente an verschiedene Devices auch die Anpassung der Größe, zumindest kann man sich sowas vorstellen. Eine sehr sinnvolle Forderung wäre zum Beispiel, dass ein Textfeld sich immer über den gesamten Raum erstreckt, der vom Device zur Verfügung gestellt wird, also beispielsweise vom linken bis zum rechten Rand abzüglich gewisser Abstände. Ich nehme mir mal ein Textfeld, dass ich hier suchen kann über diesen Filter "text" beispielsweise und zieh dieses Textfeld hier auf die Oberfläche und expandier das so ein bisschen. Nun sollte sich die Größe von diesem Textfeld, wie gesagt, immer am linken und rechten Rand orientieren und möglicherweise auch am oberen Rand. Das heißt, wir geben Zwangsbedingungen vor, die sich aufgrund der Größe des Devices ergeben bezüglich der Größe der Komponente. Eine Möglichkeit, das zu gewährleisten, ist, manuell Pins zu setzen, das heißt, Sie klicken hier mit der rechten Maustaste und ziehen so eine Linie hier drüben hin und setzen damit einen Pin, genauso machen Sie das nach oben und nach rechts. Diese Möglichkeit existiert, aber es gibt auch durchaus etwas komfortablere Möglichkeiten mit der selektierten Komponente. Schauen wir mal hier unten auf diese Schaltflächen hier. Es gibt hier Möglichkeiten, Probleme zu lösen bezüglich des Autolayouts; es gibt die Möglichkeit, eine innere Ausrichtung vorzunehmen; Sie können über den Stack, also wie sie gestapelt werden, Angaben machen und es gibt vor allen Dingen hier auch diese Schaltfläche, um neue Contraints hinzuzufügen, das heißt Pins. Und mit diesem hier folgenden Fenster haben Sie eine sehr genaue Kontrolle und eine sehr komfortable Eingabemöglichkeit, die Pins festzulegen. Wir haben hier die Contraints für "top", "left", "right" und "bottom", also oben, links, rechts, unten, und die kann ich wirklich exakt festlegen, nicht nur mit der Maus gezogen, was oft relativ ungenau ist, sondern erstens auf einen Schlag und zweitens eben sehr detailliert. Sie können auch festlegen, ob diese Constraints zu den Margins passen sollen, also den Außenabständen. Sie sehen, dass sich jetzt hier die Werte links und rechts verändern, das sind die vorgegebenen Außenabstände, das heißt das, was an Standardabstand hier von diesem Rand des Geräts, der View hier zu der Komponente, benutzt wird. Ob Sie die benutzen wollen oder nicht, das ist ihre persönliche Entscheidung. Nun hatte ich Sie wahrscheinlich ein bisschen neugierig gemacht, wie das jetzt bequemer geht, hier einen Pin zu setzen, denn das hatte ich ja angekündigt. Nun, Sie sehen hier diese gestrichelten Linien; ich pinne nach links, nach oben, nach rechts, einfach durch Anklicken dieser gestrichelten Linien hier. Hier unten sehen Sie jetzt "Add 3 Constraints". Das müssen Sie anklicken, damit sich diese Constraints auswirken, damit sie übernommen werden, wenn Sie woanders hinklicken und den Dialog schließen, werden die Einstellungen nicht übernommen. Und nun sehen Sie hier auch die entsprechenden Constraints, wie ich sie festgelegt habe. Sie sehen auch hier im Constraintsbereich die festgelegten Constraints. Es kann sogar durchaus sein, dass es hier mehrere Constraints gibt, die sich widersprechen. Sie sehen hier beispielsweise, dass es zwei gibt, die möglicherweise sich im Weg sind. Und man kann die überflüssigen Constraints gegebenenfalls auch löschen. Das ist ein Bug, der jetzt hier in dieser Version von Xcode nicht mehr auftaucht, aber in älteren Versionen von Xcode bekannt war. Also sofern Sie dann hier mehr Constraints sehen, als Sie eben festgelegt hatten, dann löschen Sie die einfach über die Entfernen-Taste auf Ihrer Tastatur. Nun ist es natürlich interessant zu sehen, was passiert, wenn wir hier verschiedene Devices auswählen. Und Sie sehen, egal wie groß, wie breit das Device ist, das Texteingabefeld passt sich immer der Größe, der Breite, von dem Device an und genau das wollen wir ja mit dieser Maßnahme erreichen. Merken Sie sich also, dass Sie für Komponenten Constraints sehr bequem hier über diese Schaltfläche "Add New Constraints" hinzufügen können, was in vielen Fällen bedeutend einfacher ist, als wenn Sie mit der Maus versuchen, diese Pins festzulegen.

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!