...

TODO: Idk beispiele oder genauer sagen, warum das gut ist?

Die Safe Zone

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.

Image AddedImage Added

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]Image AddedImage Added

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.

Image AddedImage Added

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:

Image Added

erhält man dieses gelbe Rechteck:

Image Added

Aufgeschlüsselt entsteht es so:

• Anchor.Min.X = 0.3 - Das Rechteck beginnt bei 30% des Parents. Es hat also immer 30% Freiraum zur linken Kante.
• Anchor.Max.X = 0.7 - Das Rechteck endet bei 70% des Parents. Die Gegenrichtung zum vorher gennanten. Es wird immer 30% Freiraum nach rechts gelassen.
• Anchor.Min.Y = 0.5 - Das Rechteck beginnt ab der Hälft. Also gibt es 50% Abstand zur Unterkante.
• Anchor.Max.Y = 1.0 - Das Rechteck endet auf der Oberkannte.

Ein weiteres Anwendungsbeispiel findet sich im Kapitel "Die Safe Zone".[Beispiel]

Auto Layout

Layout Elemente

...