Ein Layout definiert die visuelle Struktur für die Benutzeroberfläche Ihrer App, z. B. in einer Aktivität. Android bietet eine Reihe von Bibliotheken, kanonischen Startpunkten und Techniken zur Anzeige und Positionierung von Inhalten.
Takeaways
Achten Sie auf gerätesichere Bereiche, darunter Teile der Benutzeroberfläche wie Display-Aussparungen, randlose Einfügungen, Edge-Displays, Softwaretastaturen und Systemleisten.
Richtig: Bieten Sie Nutzern ein flexibles Layout für die Interaktion mit der Tastatur.
Video 1: Ein flexibles Layout für die Interaktion der Nutzer bieten
Platzieren Sie wichtige Interaktionen wie die primäre Navigation in einem erreichbaren Bildschirmbereich.
Abbildung 1: Unverankerte Aktionsschaltflächen (UAS) bieten einen auffälligen und erreichbaren Interaktionspunkt Verwenden Sie Begrenzungen, um verwandte Inhalte zu gruppieren, um die Nutzer durch Inhalte und Aktionen zu führen.
Abbildung 2: Karten mit expliziter Begrenzung, um Inhalte mit zugehörigen Aktionen zu gruppieren Sorgen Sie für eine einheitliche Übereinstimmung zwischen ähnlichen Inhalten und UI-Elementen.
Falsch: Die Lesbarkeit durch uneinheitliche Abstände wie Elemente beeinträchtigen, wodurch Designs unübersichtlich wirken können.
Richtig:Sorgen Sie für konsistente Abstände zwischen ähnlichen Elementen.
Abbildung 3:Lesbarkeit nicht stören Halten Sie sich nicht an das Hochformat oder ein idealisiertes Layout: Berücksichtigen Sie unterschiedliche Seitenverhältnisse, Größenklassen und Auflösungen, auf die Nutzer stoßen könnten.
Überfordern Sie Nutzer nicht mit zu vielen Aktionen pro Aufruf.
Legen Sie beim Erstellen benutzerdefinierter Layouts fest, wie Inhalte in das Layout eingebettet werden sollen, indem Sie Ausrichtung, Einschränkungen oder Schwerkraft verwenden. Geben Sie an, wie Bilder auf ihren Container reagieren sollen, damit sie korrekt angezeigt werden.
Teile eines typischen Android-App-Bildschirms
Die meisten Android-Apps bestehen aus Regionen, die als Systemleisten, Navigationsbereich und Haupttext bezeichnet werden.
Systemleisten
Die Statusleiste und die Navigationsleiste, die zusammen als Systemleisten bezeichnet werden, zeigen wichtige Informationen wie den Akkustand, die Uhrzeit und Benachrichtigungen an und ermöglichen eine direkte Geräteinteraktion von überall aus. Weitere Informationen zu Systemleisten
Systemleisten sind ein wesentlicher Bestandteil der Geräteoberfläche. Fügen Sie sie als oberste Schicht Ihrer Designs hinzu, um sie im Bildschirmlayout zu berücksichtigen. Andernfalls könnten Nutzer fälschlicherweise annehmen, dass die Absicht darin besteht, sie zu verstecken, und Sie verpassen die Gestaltung. Außerdem kann es passieren, dass Abstände unpassend sind.
Fügen Sie die Balken als oberste Ebene hinzu. Verwenden Sie android:navigationBarColor und android:statusBarColor, um Farben auf die Systemleisten im Design Ihrer App anzuwenden.
Navigationsbereich
Navigation steht für die verschiedenen Angebote, mit denen Nutzer in Ihrer App navigieren, auf wichtige Aktionen oder auf der gesamten Android-Plattform zugreifen können.
Körperregion
Der Körperbereich enthält den Bildschirminhalt. Der Inhalt besteht aus zusätzlichen Gruppierungen und Layoutparametern. Er muss in den Bereichen für Navigations- und Systemleisten weiterlaufen.
Deklarieren Sie WindowCompat.setDecorFitsSystemWindows(window, false) für Edge-to-Edge-Einsätze.
Um die geeignete Kompositions- und Navigationsmuster für dein Layout zu bestimmen, musst du verstehen, wie Nutzer mit deinen Inhalten interagieren und wie sie in der Informationsarchitektur deiner App navigieren. Dieses Wissen kann Ihr Design dazu bringen, nutzerorientiert zu sein, indem eine UI erstellt wird, auf der die Nutzer reagieren können.
Zusammensetzung und Struktur von Inhalten
Gestalten Sie mit einer Struktur und Begrenzungsmethoden für Ihre Inhalte einen flexiblen Fluss und Rhythmus.
Basisstruktur: Ränder und Spalten als optische Schutzmaßnahmen verwenden
Um eine solide Struktur mit einheitlichen Leitlinien zu erstellen, fügen Sie Ihren Layouts Ränder und Spalten hinzu.
Ränder geben den Abstand am linken und rechten Rand des Bildschirms und des Inhalts an. Ein Standardmargenwert für die kompakte Größe beträgt 16 dp, die Ränder sollten sich jedoch für größere Bildschirme anpassen. Die Hauptinhalte und Aktionen Ihrer App müssen innerhalb dieser Ränder bleiben und mit diesen übereinstimmen.
Sie können in diesem Schritt auch festlegen, dass sichere Zonen oder Einsätze eingefügt werden. Einfügungen für Systemleisten verhindern, dass wichtige Aktionen unter die Systemleisten fallen. Weitere Informationen finden Sie unter Inhalte hinter die Systemleisten ziehen.
Verwenden Sie Spalten, um eine flexible Rasterstruktur für eine einheitliche Ausrichtung zu erstellen und einem Layout eine vertikale Definition zu geben, indem Sie den Inhalt innerhalb des Textbereichs aufteilen. Die Inhalte werden in die Bereiche des Bildschirms eingefügt, die Spalten enthalten. Diese Spalten verleihen Ihrem Layout eine Struktur und bieten eine praktische Struktur für die Anordnung der Elemente.
Verwenden Sie ein Spaltenraster, um Inhalte an einem darunterliegenden Raster auszurichten, aber behalten Sie eine flexible Größe bei. Das Spaltenraster kann verschiedene Formfaktoren aufnehmen, indem es die Spaltengrößen und die Anzahl der Spalten an bestimmten Punkten je nach Bildschirmgröße ändert und gleichzeitig Inhalte skalieren kann. Vermeiden Sie es, das Spaltenraster zu detailliert darzustellen. Das Grundraster ist dafür gedacht: Sie stellen einheitliche Abstandseinheiten bereit.
Achten Sie bei der Erstellung eines zugehörigen Rasters mit Zeilen darauf, dass die horizontale Skalierung von Inhalten je nach Ausrichtung und Formfaktor eingeschränkt werden kann. In der Regel sorgen Auffüllungsregeln für die erforderliche visuelle Einheitlichkeit.
Begrenzungen verwenden, um Elemente visuell zu gruppieren
Begrenzung bezieht sich auf die gemeinsame Verwendung von Freiräumen und sichtbaren Elementen, um eine visuelle Gruppierung zu erstellen. Ein Container ist eine Form, die einen eingeschlossenen Bereich darstellt. In einem einzigen Layout können Sie Elemente mit ähnlichen Inhalten oder Funktionalitäten gruppieren und mithilfe von Freiräumen, Typografie und Trennlinien von anderen Elementen trennen.
Sie können ähnliche Elemente mit Leerraum oder sichtbarer Unterteilung gruppieren, um den Nutzer durch die Inhalte zu führen.
Bei der impliziten Begrenzung werden Inhalte mithilfe von Freiräumen visuell gruppiert, um Containergrenzen zu erstellen. Bei der expliziten Begrenzung werden Inhalte wie Trennlinien und Kacheln verwendet, um Inhalte zu gruppieren.
Die folgende Abbildung zeigt ein Beispiel für die Verwendung der impliziten Begrenzung, um den Header und die primäre Kopie einzubeziehen. Das Spaltenraster wird zum Ausrichten und Erstellen von Gruppierungen verwendet. Highlights sind explizit in den Karten enthalten. Verwendung von Symbolen und Typhierarchien für eine bessere visuelle Trennung.
Positionierung von Inhalten
Android bietet mehrere Möglichkeiten, Inhaltselemente in ihren jeweiligen Containern zu verarbeiten, um sie richtig zu positionieren, einschließlich Schwerkraft, Abstände und Skalierung.
Gravity ist ein Standard zum Platzieren eines Objekts in einem potenziell größeren Container für bestimmte Anwendungsfälle. Die folgende Abbildung zeigt Beispiele für die Positionierung von Objekten am Anfang und Mittelpunkt (1), oben und in der Mitte horizontal (2), unten links (3) sowie am Ende und rechts (1).
Skalierung
Die Skalierung ist entscheidend, um dynamische Inhalte, Geräteausrichtung und Bildschirmgrößen zu berücksichtigen. Elemente können fixiert bleiben oder skaliert werden.
Es ist wichtig, zu berücksichtigen, wie Bilder in ihren Containern mit Skalierung und Position angezeigt werden, damit das Bild trotz des Gerätekontexts so aussieht, wie Sie es sehen möchten. Andernfalls könnte der Hauptfokus des Bildes abgeschnitten erscheinen, Bilder sind für das Layout zu klein oder zu groß oder andere unerwünschte Effekte.
Ungelesene Inhalte können anders aussehen als erwartet oder erwünscht.
Angepinnte Inhalte
Viele Elemente verfügen über Interaktionen, Scrollen und Positionierung mit Slots oder Scaffolds. Einige Elemente können so geändert werden, dass sie fixiert bleiben, anstatt auf Scrollen zu reagieren. Dazu gehören beispielsweise unverankerte Aktionsschaltflächen (UAS), die wichtige Aktionen enthalten.
Koordinierung
Mit AlignmentLine kannst du benutzerdefinierte Ausrichtungslinien erstellen, mit denen übergeordnete Layouts die untergeordneten Elemente ausrichten und positionieren können.
Falsch: Die Lesbarkeit durch uneinheitliche Abstände wie Elemente beeinträchtigen, wodurch Designs unübersichtlich wirken können.
Richtig:Sorgen Sie für konsistente Abstände zwischen ähnlichen Elementen.
Komponentenlayout
Material 3-Komponenten bieten ihre eigenen Konfigurationen und Status für die Interaktion und den Inhalt.
Compose bietet praktische Layouts zum Kombinieren von Materialkomponenten zu gängigen Bildschirmmustern. Zusammensetzbare Funktionen wie Scaffold bieten Slots für verschiedene Komponenten und andere Bildschirmelemente. Weitere Informationen zu Materialkomponenten und Layout
Layouts und Navigationsmuster
Wenn Ihre App mehrere Ziele enthält, die Nutzer durchlaufen können, empfehlen wir die Kombination von Layout und Navigation, die häufig von anderen Apps verwendet werden. Da viele Nutzer bereits über die mentalen Modelle für diese Kopplungen verfügen, wird Ihre App für sie intuitiver sein.
Kombination von Layout und Navigation
Die Navigationsleiste und die modale Navigationsleiste werden als primäre Navigationsmuster für übergeordnete Layoutansichten und primäre Navigationsziele verwendet.
Die Navigationsleiste kann drei bis fünf Navigationsziele innerhalb derselben Hierarchieebene enthalten. Diese Komponente wird bei großen Bildschirmen im Navigationsbereich angezeigt.
Obwohl die Navigationsleiste mehr als fünf Navigationsziele enthalten kann, ist das Muster nicht so ideal wie die Navigationsleiste, da bei kompakten Größen die obere Leiste erreicht werden muss.
Die Tabs von Material 3 und die untere App-Leiste sind sekundäre Navigationsmuster, die Sie als Ergänzung der primären Navigation oder in Ansichten für Kinder verwenden können.
Layoutaktionen
Steuerelemente bereitstellen, mit denen Nutzer Aktionen ausführen können Zu den gängigen Mustern gehören Aktionen auf der oberen Leiste, unverankerte Aktionsschaltflächen (UAS) und Menüs.
Für Aktionen von höchster Wichtigkeit bietet ein FAB für den Nutzer eine große und gut sichtbare Schaltfläche. Geben Sie jeweils nur eine Aktion auf dieser Ebene an. Ein FAB kann in mehreren Größen und in einer erweiterten Form erscheinen, die ein Label enthält. Mit Scaffold kannst du eine FAB anpinnen, damit sie auch beim Scrollen immer sichtbar ist.
Sie können sekundäre Aktionen in der oberen Leiste oder, wenn sie in der Nähe von verwandten Inhalten gruppiert sind, auf der Seite platzieren.
Zusätzliche Aktionen, die nicht sofort oder häufig erforderlich sind, können Sie in einem Dreipunkt-Menü hinzufügen.
Kanonische Layouts
Verwende kanonische Layouts als Ausgangspunkt und einsatzbereite Kompositionen, die dazu beitragen, dass sich Layouts an gängige Anwendungsfälle und Bildschirmgrößen anpassen. Diese Layouts sind ästhetisch und funktional und wurden von der Material 3-Anleitung abgeleitet.
Das Android-Framework enthält spezialisierte Komponenten, die die Implementierung der Layouts mithilfe von Jetpack Compose oder Views APIs einfach und zuverlässig machen.
Listen-Detail-Layout
Ein Listen-Detail-Layout ermöglicht es Nutzern, Listen von Elementen zu erkunden, die beschreibende, erklärende oder andere ergänzende Informationen enthalten – das Objektdetail. Bei kompakten Bildschirmgrößen ist nur die Listen- oder Detailansicht sichtbar. Wenn eine Sammlung von Inhalten in einem zeilenbasierten Layout angezeigt wird, sind Listen die gängigste Layoutform für Apps. Die Listen-Detailansicht ist ideal für Messaging-Apps, Kontaktmanager, Dateibrowser oder alle Anwendungen, bei denen der Inhalt als Liste von Elementen organisiert werden kann, die zusätzliche Informationen enthalten.
Inhalte können statisch oder dynamisch sein.
- Dynamische Inhalte sind Inhalte, die Ihre App dynamisch bereitstellt. Sie eignen sich ideal, um von Nutzern erstellte Inhalte anzuzeigen oder die Präferenzen oder Aktionen von Nutzern widerzuspiegeln. Stellen Sie sich beispielsweise eine Foto-App mit einer scrollbaren Liste von nutzergenerierten Fotos vor, die für jeden Nutzer individuell ist und sich ändert, wenn der Nutzer weitere Bilder hochlädt. Diese Bilder sind dynamische Inhalte.
- Statische Inhalte sind hartcodierte Inhalte, die nur durch direkte Änderungen am Code Ihrer Anwendung geändert werden können. Beispiele für statische Inhalte sind Bilder und Text, die jeder Nutzer sieht.
Die Figma-Datei Now in Android enthält mehrere Layoutbeispiele. Das folgende Beispiel zeigt eine eindimensionale Sammlung von Inhalten.
Weitere Informationen zum Design von Listenkomponenten und -spezifikationen finden Sie in Material 3-Listen.
Feed-Layout
In einem Feedlayout werden äquivalente Inhaltselemente in einem konfigurierbaren Raster angeordnet, sodass eine große Menge an Inhalten schnell und bequem angezeigt werden kann. (Siehe Richtlinien für Material 3 für die Verwendung von Karten in einer Sammlung.) Feeds können anhand von Listen oder Rastern auf kompakten Displays konfiguriert werden, in der Regel in Kacheln oder Kacheln. Inhalte können dynamisch sein, das heißt, sie werden von einer dynamischen externen Quelle wie einer API „eingespeist“.
Ein Rasterlayout besteht sowohl aus Zeilen als auch Spalten, die nach impliziten oder expliziten Begrenzungsprinzipien aufgebaut sind. Weitere Informationen finden Sie auf dieser Seite unter Begrenzungen. Ein Rasterlayout kann starrer angewendet oder gestaffelt werden, um Zeilen und Spalten zu variieren. Abstände und Logik sollten bei beiden einheitlich angewendet werden, um Nutzer nicht zu verwirren. Richtlinien für Material 3 zum Entwerfen von Feeds ansehen
Ein Feedlayout lässt sich in der Funktion „Schreiben mit Lazy-Listen oder Lazy Grids“ oder in Ansichten mit RecyclerView oder CardView implementieren.
Unterstützendes Layout
Für eine mobile Ansicht sind unter Umständen unterstützende Inhalte oder Steuerelemente erforderlich. In der Regel in Form von Tabellenblättern oder Dialogfeldern sorgen sie dafür, dass die primäre Ansicht fokussiert und übersichtlich bleibt. Weitere Informationen finden Sie in der M3-Anleitung zur Verwendung des kanonischen Layouts mit unterstützendem Bereich.
Relative Layouts
Eingaben, Inhalte oder andere Aktionen können relativ zueinander oder auf einen übergeordneten Container beschränkt angezeigt werden. Layouts können individueller sein, aber achten Sie darauf, dass Gruppierungen, Spalten und Abstände einheitlich sind.
Für Layouts kann auch eine Kombination aus Layouttypen verwendet werden. Karussell oder horizontales Scrollen können Sie zum Beispiel mit vertikalen Karten kombinieren. Oder Sie präsentieren ein benutzerdefiniertes Diagramm mit vertikalen Listendaten.
Sie können Inhalte in scrollbaren Zeilen oder Spalten mit Lazy Rows und Lazy Spalten präsentieren.
Hier finden Sie weitere Informationen zu den Grundlagen des Layouts „Compose“ und zu den Bestandteilen einer zusammensetzbaren Funktion.
Die Authentifizierung ist ein gängiges relatives Layout, wie in der folgenden Abbildung dargestellt.
Auch das Vollbildlayout ist ein weiteres gängiges Layout, das im immersiven Modus verwendet wird.
Wenn Sie statt „Schreiben“ mit Ansichten arbeiten, können Sie ConstraintLayout verwenden, um Ansichten entsprechend den Beziehungen zwischen gleichgeordneten Ansichten und dem übergeordneten Layout anzuordnen. Dadurch sind große und komplexe Layouts möglich.
Mit ConstraintLayout können Sie Builds vollständig per Drag-and-drop erstellen, anstatt die XML-Datei mit dem Layout-Editor zu bearbeiten. Weitere Informationen zum Erstellen einer UI mit dem Layout-Editor
Layouts anpassen
Beim adaptiven Design werden Layouts entworfen, die sich an bestimmte Haltepunkte und Geräte anpassen. Meist berücksichtigen wir die Breite des Geräts, um zu bestimmen, wo das Layout geändert oder angepasst werden soll. Sowohl Web als auch Android nutzen responsive Designkonzepte wie flexible Raster und Bilder, um Layouts zu erstellen, die besser auf den jeweiligen Kontext reagieren.
Designrichtlinien zum Anpassen von Layouts an erweiterte Bildschirmgrößen finden Sie im Entwicklerleitfaden Unterstützung unterschiedlicher Bildschirmgrößen in Compose und auf der Seite Layout anwenden in M3. Sie können sich auch die kanonische Android-Galerie für große Bildschirme ansehen, um sich inspirieren zu lassen und die Implementierung von Layouts für große Bildschirme zu implementieren.
Auch wenn nicht jede App für jede Bildschirmgröße verfügbar sein muss, bietet sie Nutzern mehr Freiheiten in puncto Ergonomie, Nutzerfreundlichkeit und App-Qualität.
- Sie können wichtige Bildschirme (kommunizieren die wesentlichen Konzepte oder Ihre App) mit Klassengrößen als Haltepunkte entwerfen, die als Richtlinien dienen.
- Sie können Inhalte auch so gestalten, dass sie responsiv reagieren, indem Sie vorgeben, wie Inhalte eingeschränkt, erweitert oder umformatiert werden sollen.
Weitere Informationen zu Layouts finden Sie auf der Seite Grundlegendes zum Layout für Material Design 3 (M3).
Webviews
Eine WebView ist eine Ansicht, die In-App-Webseiten anzeigt. In den meisten Fällen empfehlen wir die Verwendung eines Standardbrowsers wie Chrome, um Inhalte an den Nutzer zu senden. Weitere Informationen zu Webbrowsern finden Sie in der Anleitung Browser mit einem Intent aufrufen.