Auto-Layout

Wer eine Bildschirmseite gestaltet, muss entscheiden, wo jedes Element steht: Text, Bilder, Knöpfe. Der einfachste Weg ist, alles an eine feste Stelle zu setzen, etwa 40 Punkte von links und 120 von oben. Das funktioniert genau so lange, wie sich nichts ändert. Auto-Layout geht anders vor: Man beschreibt nicht Koordinaten, sondern Regeln. Zum Beispiel: Diese drei Knöpfe stehen untereinander, mit 12 Punkten Abstand, und der Rahmen ist immer so hoch wie sein Inhalt. Das Programm rechnet die genauen Positionen dann selbst aus, jedes Mal neu.

Warum feste Koordinaten heute nicht mehr reichen

Dieselbe App läuft auf einem kleinen Handy, einem großen Tablet und einem Monitor. Die Breite unterscheidet sich um mehr als das Dreifache. Mit festen Positionen bräuchte man für jede Bildschirmgröße ein eigenes Layout. Mit Regeln genügt eines, das sich anpasst.

Dazu kommen Texte, deren Länge man vorher nicht kennt. Ein Knopf mit der Aufschrift „OK“ ist kurz, derselbe Knopf auf Deutsch heißt oft „Bestätigen“ und braucht mehr Platz. Übersetzungen ins Deutsche werden gegenüber dem Englischen im Schnitt rund ein Drittel länger. Ohne Auto-Layout ragt der Text dann aus dem Knopf heraus oder wird abgeschnitten.

Für Teams zählt noch ein praktischer Punkt. Ein Layout aus Regeln lässt sich ändern, ohne dass jemand dutzende Elemente einzeln verschiebt. Fügt man einen Menüpunkt ein, rutscht alles darunter von allein nach unten. Das spart Arbeitszeit und verhindert Flüchtigkeitsfehler.

Regeln statt Koordinaten: der Rechenweg dahinter

Die meisten Systeme arbeiten mit sogenannten Containern. Ein Container ist ein Rahmen, der andere Elemente enthält und ihnen eine Richtung vorgibt: nebeneinander oder untereinander. Dazu kommen Angaben zum Abstand zwischen den Elementen und zum Rand nach innen. Man kann Container beliebig ineinander stecken, so entsteht die ganze Seite.

Für jedes Element wird außerdem festgelegt, wie es sich bei Platzänderungen verhält. Zwei Grundhaltungen gibt es: mitwachsen oder sich am Inhalt festhalten. In einer Suchleiste soll das Eingabefeld den restlichen Platz füllen, das Lupensymbol dagegen immer 24 Punkte breit bleiben. Aus diesen Angaben löst das Programm ein kleines Gleichungssystem und bekommt für jede Fensterbreite konkrete Zahlen heraus.

Ein häufiger Irrtum ist, Auto-Layout mache das Gestalten beliebig. Das Gegenteil trifft zu: Die Regeln müssen widerspruchsfrei sein. Verlangt man von drei Elementen gleichzeitig, dass jedes den ganzen Platz füllt, muss das System einen Kompromiss erzwingen. In Apples Entwicklungsumgebung erscheinen dann Warnungen über nicht erfüllbare Bedingungen, und das Ergebnis sieht selten so aus wie gedacht.

Von Figma bis zur Bankenwebsite

Am bekanntesten ist der Begriff aus dem Designprogramm Figma, das in vielen Firmen Standard ist. Dort heißt die Funktion wörtlich Auto Layout und ist einer der Gründe, warum Entwürfe direkt für mehrere Bildschirmgrößen taugen. Apple nennt sein Gegenstück in der App-Entwicklung ebenfalls Auto Layout. Im Web tragen die entsprechenden Werkzeuge andere Namen, Flexbox und Grid, folgen aber demselben Gedanken.

Bemerkbar macht sich das Prinzip überall dort, wo Inhalte unvorhersehbar sind. Ein Onlineshop weiß nicht, wie lang ein Produktname ist. Eine Banking-App weiß nicht, ob ein Kontostand vier oder neun Stellen hat. Ein Nachrichtenportal kennt die Überschrift erst, wenn die Redaktion sie tippt. In all diesen Fällen entscheidet das Layout selbst über die Aufteilung.

Interessant wird die Technik gerade auch im Zusammenhang mit KI. Wenn ein Sprachmodell aus einer Beschreibung eine Benutzeroberfläche erzeugt, sind Regeln leichter zu erzeugen als exakte Pixelwerte. Und wer in einer Stellenanzeige liest, Erfahrung mit Auto-Layout sei erwünscht, kann das als Hinweis lesen: Gesucht wird jemand, der strukturiert entwirft statt Elemente nach Augenmaß zu schieben.