Ein Layout definiert die visuelle Struktur, über die Nutzer mit Ihrer App interagieren können, z. B. in einer Aktivität. Android bietet eine Reihe von Bibliotheken, kanonische Ausgangspunkte und Techniken zum Darstellen und Positionieren von Inhalten.
Fazit
Beachten Sie die sicheren Bereiche des Geräts. Dazu gehören Teile der Benutzeroberfläche wie Displayausschnitte, randlose Einzüge, Edge-Displays, Softwaretastaturen und Systemleisten.
Empfohlen:Bieten Sie Nutzern ein flexibles Layout, damit sie mit der Tastatur interagieren können.
Video 1: Ein flexibles Layout für die Interaktion von Nutzern bereitstellen
Wichtige Interaktionen wie die primäre Navigation sollten sich in einem gut erreichbaren Bereich des Displays befinden.
Abbildung 1: Unverankerte Aktionsschaltflächen (Floating Action Buttons, FABs) bieten einen gut sichtbaren und leicht erreichbaren Interaktionspunkt. Verwenden Sie Begrenzungen, um ähnliche Inhalte zu gruppieren und Nutzer durch Inhalte und Aktionen zu leiten.
Abbildung 2: Karten mit expliziter Begrenzung, um Inhalte mit ähnlichen Aktionen zu gruppieren Sorgen Sie für eine einheitliche Ausrichtung ähnlicher Inhalte und UI-Elemente.
Nicht tun:Die Lesbarkeit durch uneinheitliche Abstände zwischen ähnlichen Elementen beeinträchtigen, was das Design unordentlich erscheinen lässt.
Empfohlen:Legen Sie einen einheitlichen Abstand zwischen ähnlichen Elementen fest.
Abbildung 3: Lesbarkeit nicht beeinträchtigen Verwenden Sie nicht nur ein Hochformat oder ein idealisiertes Layout: Berücksichtigen Sie verschiedene Seitenverhältnisse, Größenklassen und Auflösungen, die Nutzer möglicherweise sehen.
Überfordern Sie die Nutzer nicht mit zu vielen Aktionen pro Ansicht.
Wenn Sie benutzerdefinierte Layouts erstellen, notieren Sie sich, wie die Inhalte im Layout platziert werden sollen, und verwenden Sie dazu Begriffe wie Ausrichtung, Einschränkungen oder Schwerkraft. Geben Sie an, wie Bilder auf ihren Container reagieren sollen, damit sie richtig angezeigt werden.
Bestandteile eines typischen Android-App-Bildschirms
Die meisten Android-Apps bestehen aus Bereichen, die als Systemleisten, Navigationsbereich und Textbereich bezeichnet werden.
Systemleisten
In der Statusleiste und in der Navigationsleiste (zusammen als Systemleisten bezeichnet) werden wichtige Informationen wie der Akkustand, die Uhrzeit und Benachrichtigungen angezeigt. Außerdem können Sie von überall aus direkt mit dem Gerät interagieren. Weitere Informationen zu Systemleisten
Navigationsregion
Die Navigation umfasst die verschiedenen Funktionen, mit denen Nutzer sich in Ihrer App bewegen, auf wichtige Aktionen zugreifen oder die Android-Plattform nutzen können.
Körperregion
Der Body-Bereich enthält den Bildschirminhalt. Der Textkörper besteht aus zusätzlichen Gruppierungen und Layoutparametern. Sie muss unter Navigations- und Systemleisten fortgesetzt werden.
Deklarieren Sie WindowCompat.setDecorFitsSystemWindows(window, false) für einen Rand-zu-Rand-Einzug.
Um die geeigneten Kompositionen und Navigationsmuster für Ihr Layout zu bestimmen, sollten Sie herausfinden, wie Nutzer mit Ihren Inhalten interagieren und wie sie sich durch die Informationsarchitektur Ihrer App bewegen. Dieses Verständnis kann dazu beitragen, dass Ihr Design nutzerorientierter wird, indem Sie eine Benutzeroberfläche erstellen, auf die Nutzer reagieren können.
Zusammensetzung und Struktur von Inhalten
Schaffen Sie einen flexiblen Fluss und Rhythmus mit einer Struktur und Begrenzungsmethoden für Ihre Inhalte.
Grundstruktur: Ränder und Spalten als visuelle Leitlinien verwenden
Fügen Sie Ihren Layouts Ränder und Spalten hinzu, um eine solide Struktur mit konsistenten Leitlinien zu erstellen.
Ränder sorgen für Abstand zwischen dem Display und den Inhalten auf der linken und rechten Seite. Ein Standardwert für Ränder bei kompakter Größe ist 16 dp. Ränder sollten sich jedoch an größere Bildschirme anpassen. Der Inhalt und die Aktionen Ihrer App müssen innerhalb dieser Ränder bleiben und an diesen ausgerichtet sein.
In diesem Schritt können Sie auch Safezones oder Einzüge festlegen. Durch Einzüge in Systemleisten wird verhindert, dass wichtige Aktionen von Systemleisten verdeckt werden. Weitere Informationen finden Sie unter Inhalte hinter den Systemleisten zeichnen.
Mit Spalten können Sie ein flexibles Raster erstellen, um Inhalte im Inhaltsbereich zu strukturieren und eine einheitliche Ausrichtung zu erreichen. Inhalte werden in die Bereiche des Bildschirms eingefügt, die Spalten enthalten. Diese Spalten verleihen Ihrem Layout Struktur und bieten eine praktische Struktur für die Anordnung von Elementen.
Mit einem Spaltenraster können Sie Inhalte an einem darunter liegenden Raster ausrichten und gleichzeitig eine flexible Größe beibehalten. Das Spaltenraster kann an verschiedene Formfaktoren angepasst werden, indem die Spaltengrößen und die Anzahl der Spalten an bestimmten Stellen entsprechend der Bildschirmgröße geändert werden, während Inhalte auch skaliert werden können. Achten Sie darauf, das Spaltenraster nicht zu detailliert zu gestalten. Dafür ist das Referenz-Raster da: Es sorgt für einheitliche Abstände.
Achten Sie darauf, kein begleitendes Zeilenraster zu erstellen, da dies die horizontale Skalierung von Inhalten über Ausrichtungen und Formfaktoren hinweg einschränken kann. Normalerweise sorgen Abstände für die erforderliche visuelle Einheitlichkeit.
Begrenzungen verwenden, um Elemente visuell zu gruppieren
Begrenzung bezieht sich auf die Verwendung von Weißraum und sichtbaren Elementen, um eine visuelle Gruppierung zu schaffen. Ein Container ist eine Form, die einen geschlossenen Bereich darstellt. In einem einzigen Layout können Sie Elemente mit ähnlichem Inhalt oder ähnlichen Funktionen gruppieren und mithilfe von Weißraum, Typografie und Trennlinien von anderen Elementen abtrennen.
Sie können ähnliche Elemente mit Weißraum oder sichtbaren Trennlinien gruppieren, um die Nutzer durch die Inhalte zu leiten.
Bei der impliziten Begrenzung werden Inhalte mithilfe von Weißraum visuell gruppiert, um Containergrenzen zu erstellen. Bei der expliziten Begrenzung werden Inhalte mithilfe von Objekten wie Trennlinien und Karten gruppiert.
Die folgende Abbildung zeigt ein Beispiel für die Verwendung der impliziten Begrenzung, um den Header und den Haupttext einzubinden. Mit dem Spaltenraster können Sie Elemente ausrichten und gruppieren. Highlights sind explizit in Karten enthalten. Durch die Verwendung von Ikonografie und Schriftgradhierarchie wird eine bessere visuelle Trennung erreicht.
Platzierung von Inhalten
Android bietet mehrere Möglichkeiten, Inhaltselemente in ihren jeweiligen Containern zu verarbeiten, um sie richtig zu positionieren, z. B. mithilfe von „Gravity“, „Spacing“ und „Scaling“.
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 in der Mitte (1), oben und horizontal in der Mitte (2), links unten (3) und am Ende und rechts (1).
Skalierung
Das Skalieren ist wichtig, um dynamische Inhalte, die Geräteausrichtung und Bildschirmgrößen zu berücksichtigen. Elemente können fixiert bleiben oder skaliert werden.
Achten Sie darauf, wie Bilder in ihren Containern mit Skalierung und Position angezeigt werden, damit sie unabhängig vom Gerätekontext so aussehen, wie Sie es möchten. Andernfalls kann der Hauptfokus des Bildes abgeschnitten werden, Bilder können zu klein oder zu groß für das Layout sein oder es kann zu anderen unerwünschten Effekten kommen.
Nicht gekennzeichnete Inhalte können anders aussehen als erwartet oder gewünscht.
Angepinnte Inhalte
Viele Elemente haben integrierte Interaktionen, Scrollen und Positionierung mit Slots oder Scaffolds. Einige Elemente können so geändert werden, dass sie fixiert bleiben, anstatt auf das Scrollen zu reagieren. Dazu gehören z. B. Floating Action Buttons (FABs), die wichtige Aktionen enthalten.
Koordinierung
Mit AlignmentLine können Sie benutzerdefinierte Ausrichtungslinien erstellen, mit denen übergeordnete Layouts ihre untergeordneten Elemente ausrichten und positionieren können.
Nicht tun:Die Lesbarkeit durch uneinheitliche Abstände zwischen ähnlichen Elementen beeinträchtigen, was Designs unordentlich erscheinen lassen kann.
Empfohlen:Legen Sie einen einheitlichen Abstand zwischen ähnlichen Elementen fest.
Komponentenlayout
Material 3-Komponenten bieten eigene Konfigurationen und Status für Interaktionen und Inhalte.
Compose bietet praktische Layouts, mit denen sich Material Components zu gängigen Bildschirmmustern kombinieren lassen. Composeables wie Scaffold bieten Slots für verschiedene Komponenten und andere Bildschirmelemente. Weitere Informationen zu Material Components und Layout
Layouts und Navigationsmuster
Wenn Ihre App mehrere Ziele enthält, die Nutzer aufrufen können, empfehlen wir, Layout- und Navigationspaare zu verwenden, die in anderen Apps häufig verwendet werden. Da viele Nutzer bereits die mentalen Modelle für diese Paarungen haben, ist Ihre App für sie intuitiver.
Kombinationen aus 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 auf derselben Hierarchieebene enthalten. Diese Komponente entspricht der Navigationsleiste auf großen Bildschirmen.
Der Navigations-Drawer kann zwar mehr als fünf Navigationsziele enthalten, ist aber 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, mit denen Sie die primäre Navigation ergänzen oder in untergeordneten Ansichten verwenden können.
Layoutaktionen
Bieten Sie Steuerelemente, mit denen Nutzer Aktionen ausführen können. Gängige Muster sind Aktionen in der oberen Leiste, die unverankerte Aktionsschaltfläche (Floating Action Button, FAB) und Menüs.
Für die wichtigsten Aktionen bietet eine UAS eine große und gut sichtbare Schaltfläche für den Nutzer. Geben Sie auf dieser Ebene jeweils nur eine Aktion an. Ein Floating Action Button kann in verschiedenen Größen und in einem maximierten Format mit einem Label angezeigt werden. Verwenden Sie Scaffold, um ein FAB anzupinnen, damit es auch beim Scrollen immer sichtbar ist.
Sie können sekundäre Aktionen in der oberen Leiste oder, wenn sie in der Nähe ähnlicher Inhalte gruppiert sind, auf der Seite platzieren.
Fügen Sie alle zusätzlichen Aktionen, die nicht sofort oder häufig benötigt werden, einem Ausklappmenü hinzu.
Kanonische Layouts
Verwenden Sie kanonische Layouts als Ausgangspunkt. Diese sind vorgefertigte Kompositionen, mit denen sich Layouts an gängige Anwendungsfälle und Bildschirmgrößen anpassen lassen. Diese Layouts sind ästhetisch und funktional und basieren auf den Material 3-Richtlinien.
Das Android-Framework enthält spezielle Komponenten, die die Implementierung der Layouts mithilfe von Jetpack Compose oder Views APIs einfach und zuverlässig machen.
Listen-Detaillayout
Mit einem Listendetaillayout können Nutzer Listen mit Artikeln mit beschreibenden, erläuternden oder anderen ergänzenden Informationen aufrufen – den Artikeldetails. Bei kompakten Bildschirmgrößen sind nur die Listen- oder Detailansicht sichtbar. Listen sind die gängigste Art von Layouts für Apps. Sie stellen eine Reihe von Inhalten in einem zeilenbasierten Layout dar. Der Listen-Detailbereich eignet sich ideal für Messaging-Apps, Kontaktmanager, Dateibrowser oder jede andere App, in der die Inhalte als Liste von Elementen organisiert werden können, die zusätzliche Informationen enthalten.
Die Inhalte können statisch oder dynamisch sein.
- Dynamische Inhalte sind Inhalte, die in Ihrer App „on-the-fly“ bereitgestellt werden. Sie eignen sich ideal, um von Nutzern erstellte Inhalte zu präsentieren oder die Einstellungen oder Aktionen der Nutzer widerzuspiegeln. Stellen Sie sich beispielsweise eine Foto-App mit einer scrollbaren Liste von von Nutzern erstellten Fotos vor, die für jeden Nutzer einzigartig 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 App geändert werden können. Beispiele für statische Inhalte sind Bilder und Text, die jeder Nutzer sehen kann.
Die Figma-Datei Jetzt bei Android enthält mehrere Layoutbeispiele. Das folgende Beispiel zeigt eine eindimensionale Sammlung von Inhalten.
Weitere Designrichtlinien zu Listenkomponenten und ‑spezifikationen finden Sie unter Material 3-Listen.
Feed-Layout
Bei einem Feedlayout werden gleichartige Inhaltselemente in einem konfigurierbaren Raster angeordnet, damit eine große Menge an Inhalten schnell und bequem angezeigt werden kann. Weitere Informationen finden Sie in den Material 3-Richtlinien für die Verwendung von Karten in einer Sammlung. Feeds können auf kompakten Displays listen- oder rasterbasiert konfiguriert werden, in der Regel in Karten oder Kacheln. Inhalte können dynamisch sein, d. h. sie werden aus einer dynamischen externen Quelle wie einer API „eingegeben“.
Ein Rasterlayout besteht sowohl aus Zeilen als auch aus Spalten, die durch implizite oder explizite Begrenzungsprinzipien gebildet werden. Weitere Informationen finden Sie auf dieser Seite unter Eindämmung. Ein Rasterlayout kann strenger angewendet oder versetzt werden, um die Zeilen und Spalten zu variieren. Bei beiden sollte der Abstand und die Logik einheitlich angewendet werden, um Nutzer nicht zu verwirren. Material 3-Richtlinien zum Entwerfen von Feeds
Sie können ein Feedlayout in Compose mit Lazy-Listen oder Lazy-Rastern oder in Ansichten mit RecyclerView oder CardView implementieren.
Unterstütztes Steuerfeld-Layout
Für eine mobile Ansicht sind möglicherweise unterstützende Inhalte oder Steuerelemente erforderlich. Sie werden in der Regel in Form von Tabellen oder Dialogfeldern dargestellt und können dazu beitragen, dass die Hauptansicht übersichtlich bleibt. Weitere Informationen finden Sie in der M3-Anleitung zum Verwenden des kanonischen Layouts für den Infobereich.
Weitere Informationen zu M3-Leitfäden für untere Tabellenblätter
Relative Layouts
Eingaben, Inhalte oder andere Aktionen können relativ zueinander oder auf einem übergeordneten Container angezeigt werden. Layouts können auch benutzerdefinierter sein, achten Sie aber darauf, dass Gruppierung, Spalten und Abstände einheitlich sind.
Für Layouts kann auch eine Kombination aus Layouttypen verwendet werden. Sie können beispielsweise ein Karussell oder horizontales Scrollen mit vertikalen Karten kombinieren. Alternativ können Sie ein benutzerdefiniertes Diagramm mit vertikalen Listendaten präsentieren.
Mit Lazy-Zeilen und Lazy-Spalten können Sie Inhalte in scrollbaren Zeilen oder Spalten präsentieren.
Weitere Informationen zu den Grundlagen des Compose-Layouts und den Bestandteilen eines Compose-Elements
Die Authentifizierung ist ein gängiges relatives Layout, wie in der folgenden Abbildung dargestellt.
Ein weiteres gängiges Layout ist das Vollbildlayout, das im immersiven Modus verwendet wird.
Wenn Sie mit Ansichten statt mit Compose arbeiten, können Sie mit ConstraintLayout Ansichten gemäß den Beziehungen zwischen untergeordneten Ansichten und dem übergeordneten Layout anordnen. So sind große und komplexe Layouts möglich.
Mit ConstraintLayout können Sie das Design vollständig per Drag-and-drop erstellen, anstatt die XML-Datei im Layout-Editor zu bearbeiten. Weitere Informationen zum Erstellen einer Benutzeroberfläche mit dem Layout-Editor
Layouts anpassen
Bei adaptivem Design werden Layouts entworfen, die sich an bestimmte Bildschirmauflösungen und Geräte anpassen. Normalerweise berücksichtigen wir die Breite des Geräts, um zu bestimmen, wo sich das Layout ändern oder anpassen soll. Sowohl im Web als auch unter Android werden Konzepte des responsiven Designs wie flexible Raster und Bilder verwendet, um Layouts zu erstellen, die besser auf den Kontext reagieren.
Designrichtlinien zum Anpassen von Layouts an größere Bildschirmgrößen finden Sie im Entwicklerhandbuch Unterstützung verschiedener Bildschirmgrößen in Compose und auf der M3-Seite Layout anwenden. In der Android-Galerie für kanonische Layouts auf großen Bildschirmen finden Sie weitere Informationen und Beispiele für die Implementierung von Layouts für große Bildschirme.
Auch wenn nicht jede App für jede Bildschirmgröße verfügbar sein muss, haben Ihre Nutzer so mehr Freiheit in Bezug auf Ergonomie, Nutzerfreundlichkeit und App-Qualität.
- Sie können wichtige Bildschirme (die die wichtigsten Konzepte Ihrer App vermitteln) mit Klassengrößen als Breakpoints als Richtlinien entwerfen.
- Sie können auch responsive Inhalte entwerfen, indem Sie angeben, wie Inhalte eingegrenzt, maximiert oder neu angeordnet werden sollen.
Weitere Informationen zu Layouts finden Sie auf der Seite Material Design 3 (M3): Layout verstehen.
Webviews
Eine WebView ist eine Ansicht, in der In-App-Webseiten angezeigt werden. In den meisten Fällen empfehlen wir, einen Standard-Webbrowser wie Chrome zu verwenden, um Inhalte an den Nutzer zu senden. Weitere Informationen zu Webbrowsern finden Sie im Leitfaden zum Aufrufen eines Browsers mit einem Intent.