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

Pins für mehrere Objekte anpassen

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Das Pinning mehrerer Objekte schafft Komplexität beim Entwerfen einer Benutzeroberfläche. Es gibt verschiedene Möglichkeiten, um Pins zu verwalten, wenn Sie mehrere Objekte im UI haben. Dieses Video zeigt eine einfache Variante.

Transkript

Das Anpassen der Größe von einer Komponente, wie hier so ein Textfeld an die Größe des Devices, ist relativ einfach. Man gibt in der Regel einen linken und einen rechten Pin an und fixiert damit die Breite der Komponente an die Breite des Geräts. Zusätzlich kann man noch eine obere Constraints angeben in der Regel, um die Position nach oben zu fixieren. Das heißt, die Festlegung von drei Constraints dürfte normalerweise zu einem Autolayout führen, wo sich die Breite von einer Komponente hervorragend an die Größe des Devices anpasst. Es ist etwas trickreich, wenn jetzt allerdings Komponenten nebeneinander angeordnet werden sollen. Denn wir können mit so einer fixierten Komponente natürlich das machen. Das heißt, wenn ich noch einen Button hier neben anordnen möchte, man stelle sich vor, das ist so ein Suchfeld, wo der Anwender auf "Los" tippt, einen Button, der daneben sich befindet, dann kann ich natürlich diese Komponente etwas verkleinern. Das kann ich hier mit der Maus machen, das kann ich auch hier im Size Inspector machen. In jedem Fall bekommen Sie so eine Warnung, dass jetzt der rechte Rand nicht mehr mit dem Pin übereinstimmt -- also mit dem, was der Pin so vorgibt --, aber ich habe jetzt Platz und kann einen Button nehmen, den hier auf die Oberfläche ziehen, vielleicht da noch einen Text festlegen, und diesen Button dann daneben fixieren. Das heißt, ich schiebe ihn so daneben und lege dann für diesen Button auch zwei Maße fest, beispielsweise so, indem ich mit der rechten Maustaste klicke, oben ziehe, und mit der linken Maustaste nach rechts ziehe, und damit ist hier dieser Button komplett fixiert. Die Größe muss ich nicht festlegen, denn der Text ist ja nicht dynamisch, von daher wird er sich nicht verändern. Das sieht so weit eigentlich ganz gut aus und es funktioniert scheinbar auch. Nur wenn Sie jetzt hier verschiedene Größen ausprobieren, dann bleibt der Button an seiner Position und die Größe hier von dem Textfeld bleibt auch wie gehabt, das heißt, sie wird nicht vergrößert. Das sieht vor allen Dingen sehr unangenehm aus, wenn das Device tatsächlich sehr klein wird. Denn dann kann es durchaus passieren, dass diese Komponente in die andere hineinreicht. Wir sind also noch nicht fertig, wir müssen hier noch Maßnahmen vornehmen, dass das einigermaßen vernünftig zueinander skaliert wird. Es gibt mehrere Möglichkeiten, wie Sie vorgehen können. Der eine Weg: Sie haben hier eine Warning, und wenn Sie draufklicken und sagen "Update constraints", dann ist alles gelöst. Dann werden die Constraints angepasst. Und egal, welche Größe Sie vom Device wählen, Sie sehen, dass dann auch die Größe des Textfeldes dennoch wieder angepasst wird und der Abstand zu dem Button aber überall gleich bleibt. Ich mache diese Schritte jetzt mal rückgängig und zeige einen anderen Weg. Das heißt, wir machen alle Schritte solange rückgängig, bis hier diese Warning auftaucht. Und man kann das jetzt auch auf eine andere Art und Weise lösen dieses Problem. Das ist ehrlich gesagt etwas umständlicher, gibt Ihnen aber mehr Kontrolle. Wir schauen uns hier im Size Inspector den Trailing Space an. Und den können wir modifizieren. Wir müssen den Wert so ändern, dass er passt. Zum Beispiel auf 70. Offensichtlich habe ich jetzt hier immer noch nicht die richtigen Maße gefunden, deswegen, ich hatte angedeutet, der andere Weg ist viel, viel schneller und bequemer, aber das bekommen wir entweder durch Rumexperimentieren, durch Rechnen natürlich auch oder aber man zieht die Größe von dieser Komponente soweit, dass sie wirklich übereinstimmt. Jetzt fehlt mir noch genau ein Point. Sobald dieser Point auf Null ist -- jetzt hätten wir ihn wieder zu groß --, dann -- ja, es ist ein bisschen trickreich, so, ja, fast -- gehen wir nochmal ins Edit hinein, so, das müsste dann hier 71 sein. 69. Dann passt das. Sie haben gemerkt, ich habe hier ein bisschen rumgespielt, aber das Rumspielen das ist eine weitere Motivation, warum ich eigentlich dieses automatische Korrigieren vorziehe. Das funktioniert hier genauso. Sie sehen, dass jetzt hier keinerlei Warnings mehr auftauchen, und wenn ich das hier anpasse, dann sehen Sie sowohl die Größe des Textfeldes passt sich automatisch an das Device an als auch die Abstände bleiben gleich. Es ist also alles so, wie wir es brauchen. Der Weg mit dem automatischen Anpassen ist wie gesagt meiner Meinung nach viel bequemer, viel leichter, man hat hier nicht dieses diffizile Rumziehen mit der Maus oder das Rechnen, wobei man hier diese Trailing Spaces eben anpassen muss, aber Sie kennen jetzt beide Möglichkeiten, und Sie können sich natürlich entscheiden, welche der Varianten für Sie sinnvoller erscheint.

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!