Sorgen Sie für einen flexiblen Fluss und Rhythmus mit Struktur- und Containment-Methoden für Ihre Inhalte.
1. Grundstruktur
Fügen Sie Ränder und Spalten zu Ihren Layouts hinzu, um eine solide Struktur mit einheitlichen Richtlinien zu schaffen.
Ränder sorgen für Abstand am linken und rechten Rand des Bildschirms und des Inhalts. Ein Standard-Randwert für die kompakte Größe ist 16 dp. Die Ränder sollten jedoch an größere Bildschirme angepasst werden. Der Text und die Aktionen Ihrer App müssen innerhalb dieser Ränder bleiben und mit ihnen übereinstimmen.
In diesem Schritt können Sie auch dafür sorgen, dass die Inset-Safe-Zones oder Insets eingehalten werden. Durch die Einzüge der Systemleiste werden wichtige Aktionen nicht von der Systemleiste verdeckt. Weitere Informationen finden Sie unter Inhalte hinter den Systemleisten darstellen.
Verwenden Sie Spalten, um eine flexible Rasterstruktur für eine einheitliche Ausrichtung zu erstellen und ein Layout vertikal zu definieren, indem Sie Inhalte im Textbereich aufteilen. Inhalte werden in den Bereichen des Bildschirms mit Spalten angezeigt. Diese Spalten geben Ihrem Layout Struktur und bieten eine praktische Möglichkeit, Elemente anzuordnen.
Verwenden Sie ein Spaltenraster, um Inhalte an einem zugrunde liegenden Raster auszurichten, aber flexible Größen beizubehalten. Das Spaltengitter kann verschiedene Formfaktoren aufnehmen, indem die Spaltengrößen und die Anzahl der Spalten je nach Bildschirmgröße an bestimmten Stellen angepasst werden. Gleichzeitig können Inhalte skaliert werden. Vermeiden Sie eine zu feingliedrige Spaltenaufteilung. Dafür ist das Grundlinienraster da: Es sorgt für einheitliche Abstände.
Vermeiden Sie es, ein begleitendes Raster aus Zeilen zu erstellen, da dies die horizontale Skalierung von Inhalten über Ausrichtungen und Formfaktoren hinweg einschränken kann. In der Regel sorgen Padding-Regeln für die erforderliche visuelle Konsistenz.
Sie beginnen, der Layoutstruktur Text hinzuzufügen. Mit Rändern werden Inhalte vor den Bildschirmrändern geschützt. Spalten sorgen für einheitliche Abstände und eine einheitliche Ausrichtung.
2. Eindämmung anwenden
Elemente visuell gruppieren
Begrenzung bezieht sich auf die Verwendung von Leerraum und sichtbaren Elementen, um eine visuelle Gruppierung zu erstellen. Ein Container ist eine Form, die einen eingeschlossenen Bereich darstellt. In einem einzelnen Layout können Sie Elemente mit ähnlichen Inhalten oder Funktionen gruppieren und sie mithilfe von Leerräumen, Typografie und Trennlinien von anderen Elementen abgrenzen.
Sie können ähnliche Elemente durch Freiraum oder sichtbare Trennzeichen gruppieren, um den Nutzer durch die Inhalte zu führen.
Bei der impliziten Begrenzung wird Leerraum verwendet, um Inhalte visuell zu gruppieren und so Containergrenzen zu schaffen. 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 von impliziter Einbettung, um den Header und den primären Text einzubetten. Das Spaltenschema wird verwendet, um Elemente auszurichten und Gruppierungen zu erstellen. Die Highlights sind explizit in Karten enthalten. Verwendung von Symbolen und einer Typografie-Hierarchie für eine bessere visuelle Trennung.
3. Inhalte positionieren
Android bietet mehrere Möglichkeiten, Inhaltselemente in den jeweiligen Containern zu positionieren, z. B. mithilfe von „gravity“, Abständen und Skalierung.
Gravity ist ein Standard zum Platzieren eines Objekts in einem möglicherweise größeren Container für bestimmte Anwendungsfälle. Die folgende Abbildung zeigt Beispiele für die Positionierung von Objekten: Start und Mitte (1), oben und horizontal zentriert (2), unten links (3) sowie Ende und rechts (1).
4. Inhalte skalieren
Die Skalierung ist entscheidend, um dynamische Inhalte, die Ausrichtung des Geräts und die Bildschirmgrößen zu berücksichtigen. Elemente können fixiert bleiben oder skaliert werden.
Es ist wichtig, darauf zu achten, wie Bilder in ihren Containern skaliert und positioniert werden, damit sie unabhängig vom Gerätekontext wie gewünscht aussehen. Andernfalls könnte der primäre Fokus des Bildes abgeschnitten werden, Bilder könnten zu klein oder zu groß für das Layout sein oder es könnten andere unerwünschte Effekte auftreten.
Inhalte, die nicht mit Anmerkungen versehen sind, können anders dargestellt werden, als Sie es erwarten oder möchten.
Angeheftete Inhalte
Viele Elemente haben integrierte Interaktionen, Scrollfunktionen und Positionierung mit Slots oder Scaffolds. Einige Elemente können so angepasst werden, dass sie fixiert bleiben, anstatt auf das Scrollen zu reagieren. Das gilt beispielsweise für 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.
Dos
Don'ts
Komponentenlayout
Material 3-Komponenten haben eigene Konfigurationen und Status für Interaktion und Inhalt.
Compose bietet praktische Layouts zum Kombinieren von Material Components in gängigen Bildschirmmustern. Composable-Funktionen wie Scaffold bieten Slots für verschiedene Komponenten und andere Bildschirmelemente. Weitere Informationen zu Material-Komponenten und Layout