Zusammensetzung und Struktur von Inhalten

Erstelle einen flexiblen Ablauf und Rhythmus mit einer Struktur und Begrenzungsmethoden für deine Inhalte. Entwirf zuerst Layout-Container und füge dann Inhalte hinzu.

1. Grundstruktur: Layout-Raster zur Führung von Inhalten

Um eine solide Struktur mit einheitlichen Leitlinien zu erstellen, füge deinen Layouts Ränder und Spalten hinzu.

Ränder sorgen für Abstände an den linken und rechten Rändern des Bildschirms und der Inhalte. Ein Standardwert für den Rand bei kompakter Größe ist 16 dp. Die Ränder sollten jedoch an größere Bildschirme angepasst werden. Der Hauptteil der Inhalte und die Aktionen deiner App müssen innerhalb dieser Ränder bleiben und an ihnen ausgerichtet sein.

In diesem Schritt kannst du auch sichere Bereiche oder Einzüge festlegen. Einzüge für die Systemleiste verhindern, dass wichtige Aktionen unter Systemleisten fallen. Du solltest deine Inhalte hinter den Systemleisten platzieren.

Verwende Spalten, um eine flexible Rasterstruktur für eine einheitliche Ausrichtung zu erstellen und ein Layout vertikal zu definieren, indem du Inhalte im Hauptteilbereich aufteilst. Inhalte werden in den Bereichen des Bildschirms platziert, die Spalten enthalten. Diese Spalten verleihen deinem Layout Struktur und bieten eine praktische Möglichkeit, Elemente anzuordnen.

Die Wichtigkeit oder Hierarchie von Inhalten kann die Art des Layout-Rasters bestimmen, um mehr Struktur zu schaffen. Wenn deine Inhalte eine klare Hierarchie haben, ist ein hierarchisches Layout-Raster geeignet, z. B. ein redaktionelles Layout oder ein Detailbildschirm mit einer großen Überschrift und einem Key-Visual.

Ein modulares Raster eignet sich gut für gleich wichtige, aber sehr strukturierte Inhalte und Layouts, z. B. eine Fotogalerie.

Wähle ein Spaltenraster für einheitlich responsive, unidirektionale Layouts oder wenn du mehr Flexibilität benötigst.

Unabhängig vom Typ sollte sich das Layout-Raster auch an verschiedene Größen und Formfaktoren anpassen.

In diesem Beispiel wird ein Spalten-raster verwendet, um Inhalte an einem zugrunde liegenden Raster auszurichten und gleichzeitig eine flexible Größe beizubehalten. Um verschiedenen Formfaktoren gerecht zu werden, ändert das Spaltenraster die Spaltengröße und die Anzahl der Spalten basierend auf der Bildschirmgröße. So können auch die Inhalte skaliert werden. Das Layout-Raster sollte nicht zu detailliert sein. Verwende stattdessen das Grundlinienraster, um einheitliche Abstände zu schaffen.

Alternativ kannst du ein hierarchisches Layout-Raster verwenden, um den Detailbildschirm übersichtlich zu gestalten.

Beginne mit einem einheitlichen Layout-Raster. Wenn es für deine Inhalte erforderlich ist, kannst du das Raster aufbrechen. Auch dann kann es sein, dass ein anderes Raster besser zu den Anforderungen deiner Inhalte passt.

Weitere Informationen zu Layout-Containern wie Pager und Flow-Layout

Manuskript und Mauerwerk sind weitere Arten von Layout-Rastern.

Unabhängig vom gewählten Layout-Raster kann auch das Konzept der Begrenzung von Bereichen verwendet werden, um Inhalte für adaptive Layouts zu gruppieren. Im Beispiel wird ein Detailbildschirm verwendet, ein Bereich, der in einem Listen-Detailansicht-Layout angezeigt werden könnte.

2. Begrenzung anwenden

Verwende Begrenzung, um Elemente visuell zu gruppieren.

Begrenzung bedeutet, Leerraum und sichtbare Elemente zusammen zu verwenden, um eine visuelle Gruppierung zu erstellen. Ein Container ist eine Form, die einen geschlossenen Bereich darstellt. In einem einzelnen Layout kannst du Elemente mit ähnlichen Inhalten oder Funktionen gruppieren und sie mithilfe von Leerraum, Typografie und Trennlinien von anderen Elementen trennen.

Android verwendet Zeilen, Spalten und Kästchen als Bausteine. Du kannst die Begrenzung also auf ähnliche Weise gestalten. Gruppiere ähnliche Elemente mit Leerraum oder sichtbaren Trennlinien, um dich besser in den Inhalten zurechtzufinden.

Bei der impliziten Begrenzung wird Leerraum verwendet, um Inhalte visuell zu gruppieren und Containergrenzen zu erstellen. Bei der expliziten Begrenzung werden Objekte wie Trennlinien und Karten verwendet, um Inhalte zu gruppieren.

Die folgende Abbildung zeigt ein Beispiel für die Verwendung der impliziten Begrenzung, um die Überschrift und den Haupttext zu begrenzen. Das Spaltenraster wird verwendet, um Gruppierungen auszurichten und zu erstellen. Highlights sind explizit in Karten enthalten. Verwendung von Symbolen und Typografiehierarchie für eine bessere visuelle Trennung.

3. Inhalte positionieren

Nachdem ein Layout-Raster ausgewählt und Inhalte in Containern platziert wurden, bietet Android verschiedene Möglichkeiten, Inhaltselemente zu verarbeiten und zu positionieren. Dazu gehören grundlegende Bausteine und Modifikatoren oder Layout-Container wie Raster und Flexbox.

Überlege, ob deine Inhalte ein- oder zweidimensional sind. Inhalte können beispielsweise horizontal, vertikal oder in beiden Richtungen fließen.

Wie in der folgenden Abbildung gezeigt, kann für ein Authentifizierungs-Layout ein zweidimensionales Rasterlayout verwendet werden.

UI-Elemente können auch in einer Dimension flexibel sein und fließen, z. B. Filter oder Inhaltstags. Weitere Informationen zu Flexbox.

Layouts können auch eine Kombination von Layouttypen verwenden. Du kannst beispielsweise ein Karussell oder einen horizontalen Scroll mit vertikalen Karten kombinieren. Oder du kannst ein benutzerdefiniertes Diagramm mit vertikalen Listendaten präsentieren.

Du kannst Inhalte in scrollenden Zeilen oder Spalten mit Lazy Rows und Lazy Columns präsentieren.

Ausrichtung

Ähnlich wie beim automatischen Layoutfluss und der automatischen Layoutausrichtung kannst du die Anordnung und Ausrichtung von UI-Elementen festlegen und ausrichten.

Verwende AlignmentLine, um benutzerdefinierte Ausrichtungslinien zu erstellen, mit denen übergeordnete Layouts ihre untergeordneten Elemente ausrichten und positionieren können.

4. Inhalte skalieren und zuschneiden

Die Skalierung ist entscheidend, um dynamische Inhalte, die Geräteausrichtung und Bildschirmgrößen zu berücksichtigen. Elemente können fest bleiben oder skaliert werden.

Lege fest, wie Bilder in ihren Containern skaliert und positioniert werden, damit sie auf jedem Gerät korrekt angezeigt werden. Andernfalls wird der Hauptfokus eines Bildes möglicherweise abgeschnitten oder das Bild ist zu klein oder zu groß für das Layout.

Berücksichtige verschiedene Seitenverhältnisse und Ausrichtungen von Geräten mit geeigneter Skalierung und Zuschneidung. Da die Seitenverhältnisse erheblich variieren können, lege fest, wie deine Inhalte in diesen Szenarien behandelt werden sollen.

Ein Hero-Bild in voller Breite nimmt beispielsweise auf einem Smartphone im Querformat den gesamten Bildschirm ein.

Wenn das Seitenverhältnis von Inhalten beibehalten werden muss, z. B. bei Videos im Hochformat, schränke das Seitenverhältnis ein und gleiche den Leerraum aus.

Angepinnte Inhalte

Viele Komponenten haben integrierte Interaktionen, Scrollfunktionen und Positionierung mit Slots oder Scaffolds, z. B. App-Leisten. Einige Elemente können so geändert werden, dass sie fixiert bleiben, anstatt auf das Scrollen zu reagieren. Das gilt beispielsweise für unverankerte Aktionsbuttons (UABs), die wichtige Aktionen enthalten. Pinne Elemente, um den Fokus in bestimmten Anwendungsfällen zu verbessern. Du kannst beispielsweise eine Texteingabe an eine Tastatur anpinnen, um versteckte Eingaben zu vermeiden.

Bei der Texteingabe, z. B. bei Nachrichten und der Authentifizierung, wird die Eingabe an die Tastatur angehängt und der Fokus liegt ausschließlich darauf.

Komponenten im Layout

Material 3-Komponenten bieten eigene Konfigurationen und Status für Interaktion und Inhalte.

Compose bietet praktische Layouts zum Kombinieren von Material-Komponenten zu gängigen Bildschirmmustern. Composables wie Scaffold bieten Slots für verschiedene Komponenten und andere Bildschirmelemente. Weitere Informationen zu Material-Komponenten und Layout.