DSVGO
Um unsere Webseite für Sie optimal zu gestalten und fortlaufend verbessern zu können, verwenden wir Cookies. Durch die weitere Nutzung der Webseite stimmen Sie der Verwendung von Cookies zu.
Server Wartungsarbeiten
...
TODO: Idk beispiele oder genauer sagen, warum das gut ist?
Anchor | ||||
---|---|---|---|---|
|
Spätestens mit der Ankündigung des iPhone X wurden sogenannte "edge-to-edge" oder randlose Displays zu einem weitverbreiteten Design auf der Mobile-Plattform. Damit die UI nicht von Notches oder Flächen für Gesten (z.B. iPhone Home-Geste) überlagert wird, gibt es die Safe Zone. Innerhalb der Safe Zone ist garantiert, dass Elemente bedienbar und vollständig sichtbar sind.
...
Anker sind ein gängiges Layout Konzept. Sie bestimmen zu welchem Punkt innerhalb des ParenParent-Rechtecks die eigene Position relativ ist – ähnlich wie beim normalen Transform, wo die Position relativ zum Ursprung des Parents ist. Ein Child ist standardmäßig zum Zentrum geankert. Häufige andere Konfigurationen können als Presets gefunden werden, indem man auf das Anchor Preset Symbol links oben im Rect Transform klickt.
Repräsentiert werden sie Anker durch vier dreieckige Griffe im Scene View. Im Inspector gibt es die Sektion „Anchors“, unter der Min und Max als Ankerpositionen gelistet sind. Min beschreibt dabei die linke untere Ecke bzw. den linken unteren Anker und Max den rechten oberen. Die Ankerpositionen werden als Werte zwischen 0 und 1 angegeben. Solange die beiden Anker am selben Punkt liegen, besitzt das Rechteck eine fixe Breite und Höhe, während es sich relativ zum Parent positioniert.
[Beispiel]
Zieht man sie auseinander, entsteht auf der entsprechenden Achse eine relative und damit flexible Größe. In diesem Fall kann man die Werte von Min und Max als Prozente interpretieren, also 0 entspricht 0% und 1 entspricht 100%.
[Beispiele]
Diese Veränderung macht sich auch im Inspektor bemerkbar, wo jetzt ein Padding auf der jeweiligen Achse eingegeben wird, an Stelle einer Position.
[Beispiel]
Ein Child ist standardmäßig zum Zentrum geankert. Häufige andere Konfigurationen können als Presets gefunden werden, indem man auf das Anchor Preset Symbol links oben im Rect Transform klickt.
. Wenn die Anker beispielsweise jeweils auf der Ober- bzw. Unterkante des Parent-Rechtecks liegen, nimmt es immer die volle Höhe ein. Wenn der Parent schrumpft, schrumpft auch das gelbe Rechteck und das gleiche gilt auch fürs Wachsen.
Diese Konfiguration entspricht dem Preset "Strech - center". An Stelle einer absoluten Position auf der vertikalen Achse kann man nun ein Padding für "Top" und "Bottom" setzen. Man kann ebenfalls sehen, dass Anchor.Min.Y 0% und Anchor.Max.Y 100% sind - woraus das Stretching in der Höhe resultiert.
Die Werte für Ankerpositionen sind frei wählbar. Man kann damit relative Layouts erstellen- wählt man z.B. folgende Werte:
erhält man dieses gelbe Rechteck:
Aufgeschlüsselt entsteht es so:
Ein weiteres Anwendungsbeispiel findet sich im Kapitel "Die Safe Zone".[Beispiel]
...