App-Entwicklung mit iOS Grundkurs 2: Das User Interface

Ein Objekt an seinem nächsten Nachbarn fixieren

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Pinning ist recht einfach für ein Objekt einzurichten, doch Art und Reihenfolge weiterer UI-Objekte in der Oberfläche beeinflussen, worauf sich hinzugefügte Pins beziehen. Dieses Video erklärt die Fallstricke der Pin-Platzierung.

Transkript

Das Anpassen von der Größe von Textfeldern oder Komponenten allgemein an die Ränder von einem Device ist nicht der Weisheit letzter Schluss. Es kann sehr gut funktionieren, man kann durchaus auch Komponenten nebeneinander anordnen und diese behalten ihren Abstand zueinander bei und die Größe von einer Komponente verändert sich. Aber was ist, wenn sich die Größe von mehreren Komponenten verändert? Beispielsweise haben wir zwei Textfelder oder aber die Größe von dem Button wird dynamisch zum Beispiel geschrieben oder ändert sich sonst irgendwie. Sofern diese beiden Komponenten nichts voneinander wissen, kann es zu so einem Effekt führen. Das heißt, die Größe des Buttons hat sich jetzt geändert und ganz offensichtlich ragt dieser Button in diese andere Komponente hinein. Es kann sehr sinnvoll sein, in gewissen Situationen, dass diese grafischen Objekte von den Nachbar-Objekten etwas wissen. Mit anderen Worten, dass Constraints gesetzt werden, Pins gesetzt werden, die auf Nachbar-Elemente abzielen die also damit verankern. Widmen wir uns diesen Problem. Ich ändere mal den Text wieder zurück. Und wir schauen uns hier die Constraints von dem Textfeld an. Und hier gibt es diesen "Trailing Space to". Und hier taucht ein Begriff auf, der heißt "Superview". Superview ist jetzt entscheidend für das gesamte Problem beziehungsweise dessen Lösung. Was ist denn die Superview? Das ist die View, wo alle anderen Views enthalten sind, und damit auch alle Elemente, alle grafischen Elemente. Die Superview von diesem Textfeld ist die View selbst Das können wir uns ansehen, wenn wir hier die Document Outline ansehen und dort sehen Sie, dass dieses Textfeld hier in der View enthalten ist. Man redet dann auch von einer sogenannten Subview. Das heißt, dieses Textfield ist eine Subview von einer Superview-View. Und in Bezug auf unser Problem bedeutet dass, das sich dieses Textfeld nicht die Bohne um den Button kümmert. Es steht immer nur in Bezug auf diese View, die Superview. Nun schauen wir uns nochmal diese Schaltfläche "Add New Constraints" an von dem Textfeld. Es gibt hier einen Eintrag "Spacing to nearest neighbor". Zum Zeitpunkt, wo diese Oberfläche entworfen wurde, gab es den Button nicht und das heißt, der nächste Nachbar war gar nicht vorhanden, deswegen kann das hier keine Auswirkungen haben, zumindest nicht in Bezug auf das später hinzugefügte visuelle Element. Oder wenn wir es noch mal etwas genauer beschreiben: Es gibt natürlich einen nächsten Nachbarn, das ist eben die Superview. Das heißt, zum Zeitpunkt, wo wir die Pins erzeugen, spielen die bis dahin bereits vorhandenen Elemente der visuellen Oberfläche, der GUI, eine entscheidende Rolle. Nun ist es leider nicht möglich, den Bezug des Pins nachträglich zu ändern. Zumindest nicht auf normalen Weg. Ich empfinde das als eine gewisse Schwäche im System, aber es ist nun mal so. Das heißt also, wenn wir jetzt wirklich eine Relation von den Textfield zu den Button aufbauen wollen, dann müssen wir diesen Pin, den wir schon angelegt haben, erstmal wieder löschen und dann neue Pins erzeugen. Ich selektiere also das Textfeld. Ich lösche hier den Pin "Trailing Space to". Anklicken und "Entfernen"-Taste drücken zum Beispiel, eventuell auch die Backspace-Taste, das hängt an Ihrer Tastatur und dann ist erstmal dieser Pin beseitigt und Sie sehen, das hatte auch einen massiven Effekt auf die Größe von dem Textfeld. Ziehen wir das etwas wieder größer, sodass es unseren Wünschen entspricht, und nun fügen wir einen neuen Pin hinzu und zwar auf die rechte Seite. "Spacing to nearest neighbor" wird jetzt, das kann man relativ schnell erkennen sich auf den Button beziehen, denn dieser Abstand hier, 24 Punkte, ist definitiv weniger als zum rechten Rand, das sieht man sofort. Wir können hier auch die "Constrain to margins" weglassen, das spielt keine Rolle. Auf jeden Fall füge ich es jetzt erstmal eine Zwangsbedingung hinzu. Und Sie sehen, da ist jetzt noch ziemlich viel rot. Das liegt daran, dass wir erst einmal nur das Textfeld mit dem Button verbunden haben. Nur, lassen Sie uns überlegen, was eigentlich genau das Problem ist. Wir haben hier ein Texteingabefeld und ein Texteingabefeld kann sich unter gewissen Umständen an die Größe des Inhaltes anpassen. Das gilt nicht nur für Texteingabefelder, sondern für alle Elemente, die können sich an den Inhalt von der Größe her anpassen. Was konkret wir für ein Problem haben, das wird uns hier auch angezeigt. Sie haben hier ganz offensichtlich einen Hinweispfeil auf potenzielle Probleme. Klicken wir das mal an. Wir haben hier einen Konflikt der Prioritäten bezüglich der Anpassung an den Inhalt und der Anpassung an die Größe des Device beziehungsweise die Bezüge zu Nachbar-Elementen. Es gibt hier detaillierte Informationen, was sich dahinter verbirgt, aber ohne zu weit in das Detail zu gehen, wir haben hier Lösungsmöglichkeiten und darauf wollen wir uns erstmal beschränken. Klicken wir mal diese Schaltfläche hier an und Sie sehen, dass wir hier einen Prioritäten-Konflikt haben. Wir klicken einfach auf "Change Priority" und der Konflikt ist gelöst. Was konkret eigentlich nur bedeutet in dem Zusammenhang, dass die Priorität des Verhältnisses unseres Textfeldes zu dem Button einfach höher ist jetzt, als die Regel, dass sich die Größe des Textfeldes an den Inhalt anpasst. Sie finden diese Angaben auch hier bei den "Constraints" unter den "Content Hugging Priority". Und Sie sehen hier den gewählten Wert, der eben auch von Xcode automatisch vorgeschlagen wird. Lassen Sie uns ansehen, ob die Mühe sich überhaupt gelohnt hat und wir ändern mal die Größe hier von den Text und Sie sehen, das Textfeld wurde automatisch verkleinert, das war ja vorher nicht der Fall und damit ist ganz offensichtlich dieses Problem beseitigt.

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!