Die kanonischen Layouts für große Bildschirme sind bewährte, vielseitige App-Layouts, die eine optimale User Experience auf Geräten mit großen Bildschirmen bieten.
Die kanonischen Layouts sind responsiv und adaptiv. Sie unterstützen Smartphones mit kleinem Display sowie Tablets, faltbare Geräte und ChromeOS-Geräte. Abgeleitet aus den Material Design-Empfehlungen sind die Layouts sowohl ästhetisch als auch funktional.
Das Android-Framework enthält spezielle Komponenten, die die Implementierung der Layouts mithilfe von Ansichten oder Jetpack Compose einfach und zuverlässig machen.
Die kanonischen Layouts erstellen ansprechende, produktivitätssteigernde Benutzeroberflächen, die die Grundlage für großartige Apps bilden.
Wenn Sie bereits mit den kanonischen Layouts für große Bildschirme vertraut sind, aber nicht sicher sind, welche Android-APIs Sie für Ihre App verwenden sollen, lesen Sie unten den Abschnitt Anwendbarkeit. Dort erfahren Sie, welches Layout für die Anwendungsfälle Ihrer App am besten geeignet ist.
UX-Designs für große Bildschirme
Hier erfährst du, wie du deine App auf großen Bildschirmen optimal präsentieren kannst.
In der Galerie für große Bildschirme finden Sie eine Auswahl ausgewählter Layouts für große Bildschirme.
Jetzt ansehen
Listen-Detailansicht
Ein Layout mit Listendetails ermöglicht es Nutzenden, Listen von Elementen zu erkunden, die beschreibende, erklärende oder andere ergänzende Informationen enthalten – das Elementdetail.
Das Layout teilt das App-Fenster in zwei nebeneinanderliegende Bereiche: einen für die Liste und einen für die Details. Nutzer wählen Elemente aus der Liste aus, um die Details aufzurufen. Über Deeplinks im Detail lassen sich zusätzliche Inhalte im Detailbereich aufrufen.
Bei Anzeige mit größerer Breite (siehe Fenstergrößenklassen) werden sowohl die Liste als auch die Details gleichzeitig berücksichtigt. Durch die Auswahl eines Listenelements wird der Detailbereich aktualisiert und der zugehörige Inhalt für das ausgewählte Element angezeigt.
Bei mittel- und kompakten Displays werden je nach Nutzerinteraktion mit der App entweder die Liste oder die Details angezeigt. Wenn nur die Liste sichtbar ist, werden bei der Auswahl eines Listenelements die Details anstelle der Liste angezeigt. Wenn nur die Details sichtbar sind, wird die Liste durch Drücken der Schaltfläche „Zurück“ wieder angezeigt.
Konfigurationsänderungen, z. B. Änderungen der Geräteausrichtung oder der Größe des App-Fensters, können die Fenstergrößenklasse des Displays ändern. Ein Listen-Detail-Layout reagiert entsprechend und behält den App-Status bei:
- Wenn eine Anzeige in größerer Breite, in der sowohl der Listen- als auch der Detailbereich zu sehen ist, auf mittel oder kompakt eingegrenzt wird, bleibt der Detailbereich sichtbar und der Listenbereich wird ausgeblendet.
- Wenn bei einer Anzeige mittlerer oder kompakter Breite nur das Detailfenster sichtbar ist und die Fenstergrößenklasse erweitert wird, werden die Liste und das Detail zusammen angezeigt, und die Liste zeigt an, dass das Element ausgewählt ist, das dem Inhalt im Detailfenster entspricht
- Wenn bei einer Anzeige mittlerer oder kompakter Breite nur der Listenbereich sichtbar ist und erweitert wird, werden die Liste und ein Platzhalter-Detailbereich zusammen angezeigt
Die Funktion ist ideal für Messaging-Apps, Kontaktmanager, Dateibrowser oder andere Apps, in denen die Inhalte als Liste mit Elementen organisiert werden können, die zusätzliche Informationen enthalten.
Implementierung
Ein Layout mit einer Liste und Detailansicht kann mithilfe verschiedener Technologien erstellt werden, z. B. Schreiben, Ansichten und Einbetten von Aktivitäten (bei älteren Apps). Im Abschnitt Anwendbarkeit unten erhalten Sie Informationen dazu, welche Technologie für Ihre App am besten geeignet ist.
Textvorschläge
Das deklarative Paradigma von Compose unterstützt die Logik für die Fenstergrößenklasse, die bestimmt, ob die Listen- und Detailfenster gleichzeitig (bei erweiterter Fenstergrößenklasse) oder nur die Liste oder der Detailbereich (bei einer mittleren oder kompakten Fenstergröße) angezeigt werden sollen.
Um einen unidirektionalen Datenfluss sicherzustellen, heben Sie den gesamten Zustand, einschließlich der aktuellen Fenstergrößenklasse und der Details des aktuell ausgewählten Elements (falls vorhanden), damit alle zusammensetzbaren Funktionen Zugriff auf die Daten haben und korrekt gerendert werden können.
Wenn nur der Detailbereich für kleine Fenstergrößen angezeigt wird, fügen Sie ein BackHandler hinzu, um den Detailbereich zu entfernen und nur den Listenbereich anzuzeigen. Die BackHandler ist nicht Teil der gesamten App-Navigation, da der Handler von der Fenstergrößenklasse und dem ausgewählten Detailstatus abhängig ist.
Eine Beispielimplementierung finden Sie im Beispiel List-detail with Compose.
Ansichten und Fragmente
Die Bibliothek SlidingPaneLayout ermöglicht die einfache Implementierung von Layouts mit Listendetails, die auf Ansichten oder Fragmenten basieren.
Deklariere zuerst ein SlidingPaneLayout als Stammelement deines XML-Layouts. Fügen Sie als Nächstes die beiden untergeordneten Elemente – entweder Ansichten oder Fragmente – hinzu, die die Liste und den Detailinhalt darstellen.
Implementieren Sie eine Kommunikationsmethode, um Daten zwischen den Listen-Detailansichten oder Fragmenten zu übertragen. ViewModel wird empfohlen, da es damit Geschäftslogik speichern und Konfigurationsänderungen überleben kann.
SlidingPaneLayout bestimmt automatisch, ob die Liste und die Details zusammen oder einzeln angezeigt werden. In einem Fenster, das über genügend horizontalen Platz für beides verfügt, werden die Liste und das Detail nebeneinander angezeigt. In einem Fenster mit zu wenig Platz wird je nach Interaktion des Nutzers mit der App entweder die Liste oder die Details angezeigt.
Eine Beispielimplementierung finden Sie im Beispiel List-detail with views (Listendetails mit Ansichten).
Eingebettete Aktivitäten
Mithilfe der Aktivitätseinbettung können Sie in älteren Apps mit mehreren Aktivitäten zwei Aktivitäten nebeneinander auf demselben Bildschirm oder übereinander anzeigen lassen. Wenn Ihre App die Liste und die Details eines Listen-Detail-Layouts in separaten Aktivitäten implementiert, können Sie mithilfe der Aktivitätseinbettung ganz einfach ein Listen-Detail-Layout mit minimaler oder gar keiner Code-Refaktorierung erstellen.
Implementieren Sie eine Aktivitätseinbettung, indem Sie mithilfe einer XML-Konfigurationsdatei eine Aufteilung des Aufgabenfensters angeben. Die Aufteilung definiert die primäre Aktivität, die die Aufteilung einleitet, und eine sekundäre Aktivität. Geben Sie mithilfe der Haltepunkte der Fenstergröße eine minimale Anzeigebreite für die Teilung an. Wenn die Anzeigebreite unter den minimalen Haltepunkt fällt, werden die Aktivitäten übereinander angezeigt. Wenn die Mindestanzeigebreite beispielsweise 600 dp beträgt, werden die Aktivitäten auf kompakten Displays übereinander angezeigt, auf mittleren und maximierten Displays hingegen nebeneinander.
Das Einbetten von Aktivitäten wird ab Android 12L (API-Level 32) unterstützt, kann aber auch auf niedrigeren API-Levels verfügbar sein, wenn sie vom Gerätehersteller implementiert werden. Wenn die Aktivitätseinbettung auf einem Gerät nicht verfügbar ist, führt das Fallback-Verhalten dazu, dass die Listen- oder Detailaktivität das gesamte App-Fenster auf der Grundlage der Nutzerinteraktion mit der App einnimmt.
Weitere Informationen finden Sie unter Einbetten von Aktivitäten.
Eine Beispielimplementierung finden Sie im Beispiel List-detail mit Aktivitätseinbettung.
Feed
Bei einem Feed-Layout werden äquivalente Inhaltselemente in einem konfigurierbaren Raster angeordnet, um eine große Menge an Inhalten schnell und einfach anzuzeigen.
Durch Größe und Position werden Beziehungen zwischen den Inhaltselementen hergestellt.
Contentgruppen werden erstellt, indem den Elementen dieselbe Größe zugewiesen wird und sie zusammen positioniert werden. Die Aufmerksamkeit wird auf Elemente gelenkt, indem sie größer als Elemente in der Nähe sind.
Karten und Listen sind gängige Komponenten von Feedlayouts.
Ein Feed-Layout unterstützt Anzeigen nahezu jeder Größe, da sich das Raster von einer einzelnen, scrollbaren Spalte zu einem mehrspaltigen Scroll-Feed von Inhalten anpassen kann.
Feeds eignen sich besonders für Nachrichten- und Social-Media-Apps.
Implementierung
Textvorschläge
Ein Feed besteht aus einer großen Anzahl von Inhaltselementen in einem vertikalen scrollbaren Container, die in einem Raster angeordnet sind. Mit Lazylisten können Sie eine große Anzahl von Elementen in Spalten oder Zeilen effizient rendern. Lazy Grids rendern Elemente in Rastern und unterstützen die Konfiguration der Elementgrößen und -spannen.
Konfigurieren Sie die Spalten des Rasterlayouts basierend auf dem verfügbaren Anzeigebereich, um die minimal zulässige Breite für Rasterelemente festzulegen. Passen Sie beim Definieren von Rasterelementen die Spaltenspannen an, um einige Elemente gegenüber anderen hervorzuheben.
Verwenden Sie für Abschnittsüberschriften, Trennlinien oder andere Elemente, die die gesamte Breite des Feeds einnehmen sollen, maxLineSpan, um die volle Breite des Layouts zu nutzen.
Auf Displays mit kleiner Breite, auf denen nicht genügend Platz für mehr als eine Spalte vorhanden ist, verhält sich LazyVerticalGrid wie ein LazyColumn.
Eine Beispielimplementierung finden Sie im Beispiel Feed mit Texteingabe.
Ansichten und Fragmente
Ein RecyclerView rendert effizient eine große Anzahl von Elementen in einer einzelnen Spalte. Mit GridLayoutManager werden Elemente in einem Raster angeordnet, sodass deren Größe und Spanne konfiguriert werden können.
Konfigurieren Sie die Rasterspalten anhand der Größe des verfügbaren Anzeigebereichs, um die minimal zulässige Breite für Elemente festzulegen.
Die Standardstrategie für GridLayoutManager – also ein Span pro Element – kann durch Erstellen eines benutzerdefinierten SpanSizeLookup überschrieben werden. Passen Sie die Spanne an, um einige Elemente hervorzuheben.
Verwenden Sie auf Displays mit kleiner Breite, die genügend Platz für nur eine Spalte haben, LinearLayoutManager anstelle von GridLayoutManager.
Ein Implementierungsbeispiel finden Sie im Beispiel Feed mit Aufrufen.
Stützbereich
Durch ein unterstütztes Bereichslayout werden App-Inhalte in primäre und sekundäre Darstellungsbereiche unterteilt.
Der primäre Anzeigebereich nimmt den größten Teil des App-Fensters ein (normalerweise etwa zwei Drittel) und enthält den Hauptinhalt. Der sekundäre Anzeigebereich ist ein Bereich, der den Rest des App-Fensters einnimmt und Inhalte zeigt, die den Hauptinhalt unterstützen.
Unterstützende Fensterlayouts funktionieren im Querformat gut auf Displays mit größerer Breite (siehe Fenstergrößenklassen). Anzeigen mit mittlerer oder kompakter Breite unterstützen sowohl den primären als auch den sekundären Darstellungsbereich, wenn die Inhalte an schmalere Anzeigebereiche angepasst werden können oder wenn die zusätzlichen Inhalte anfänglich in einem unteren oder seitlichen Blatt ausgeblendet werden können, das über ein Steuerelement wie ein Menü oder eine Schaltfläche aufgerufen werden kann.
Ein unterstützendes Bereichslayout unterscheidet sich in der Beziehung des primären und sekundären Inhalts von einem Listen-Detail-Layout. Inhalte von sekundären Ausschnitten sind nur in Bezug auf den primären Inhalt von Bedeutung. Zum Beispiel ist ein Tool-Fenster für ein unterstützendes Fenster an sich irrelevant. Die ergänzenden Inhalte in der Detailansicht eines Listen-Detail-Layouts sind jedoch auch ohne den Hauptinhalt aussagekräftig, zum Beispiel die Beschreibung eines Produkts aus einem Produkteintrag.
Anwendungsfälle für den Supportbereich:
- Produktivitäts-Apps:Ein Dokument oder eine Tabelle mit Prüferkommentaren in einem unterstützenden Bereich
- Medien-Apps:Streaming-Videos, die durch eine Liste ähnlicher Videos in einem unterstützenden Bereich ergänzt werden, oder die Darstellung eines Musikalbums, das durch eine Playlist ergänzt wird
- Such- und Referenzanwendungen:ein Eingabeformular für Anfragen mit Ergebnissen in einem unterstützenden Bereich
Implementierung
Textvorschläge
Compose unterstützt die Fenstergrößenklassenlogik, mit der Sie festlegen können, ob sowohl der Hauptinhalt als auch die unterstützenden Inhalte gleichzeitig angezeigt werden sollen oder ob die unterstützenden Inhalte an einem anderen Ort platziert werden sollen.
Gesamten Status hochziehen, einschließlich der aktuellen Fenstergrößenklasse und Informationen zu den Daten im Hauptinhalt und unterstützenden Inhalten.
Bei kompakter Breite platzieren Sie die unterstützenden Inhalte unter dem Hauptinhalt oder in einem Tabellenblatt am unteren Rand. Bei mittlerer und maximierter Breite platzieren Sie die unterstützenden Inhalte neben dem Hauptinhalt. Die Größe sollte sich an den verfügbaren Inhalt und die verfügbare Fläche orientieren. Bei mittlerer Breite teilen Sie den Anzeigebereich gleichmäßig zwischen dem Haupt- und dem unterstützenden Inhalt auf. Bei maximierter Breite sollten Sie 70% des Platzes dem Hauptinhalt und 30% dem unterstützenden Inhalt zuteilen.
Ein Beispiel für eine Implementierung finden Sie im Beispiel Unterstützender Bereich mit Eingabe.
Ansichten und Fragmente
Ein unterstützendes Bereichslayout wird mit einem Hilfslayout wie LinearLayout oder ConstraintLayout implementiert. Legen Sie die Fenstergrößenklassen fest, die den verfügbaren horizontalen Anzeigebereich für Ihre App in drei Kategorien unterteilen: kompakt (< 600 dp), mittel (>= 600 dp) und erweitert (>= 840 dp).
Definieren Sie die Layouts für jede Fenstergrößenklasse wie folgt:
- Schmal:Im Ordner
layoutder App-Ressourcen können Sie Inhalte, die den unterstützenden Bereich rendern, unter dem Hauptinhalt oder in einem Tabellenblatt am unteren Rand ablegen. - Mittel: Stellen Sie im Ordner
layout-w600dpunterstützenden Bereich bereit, der dazu führt, dass der Hauptinhalt und der unterstützende Bereich nebeneinander gerendert werden, wobei die horizontale Anzeigefläche gleichmäßig geteilt wird. - Maximiert: Fügen Sie im Ordner
layout-w840dpunterstützenden Bereich hinzu, der den Hauptinhalt und das unterstützende Fenster-Rendering nebeneinander darstellt. Der unterstützende Bereich nimmt jedoch nur 30% des horizontalen Bereichs ein, während die restlichen 70% für den Hauptinhalt verbleiben.
Verwende ViewModel für die Kommunikation zwischen dem Hauptinhalt und dem unterstützenden Fenster, unabhängig davon, ob du Ansichten, Fragmente oder eine Kombination davon verwendest.
Implementierungsbeispiele finden Sie in den folgenden Beispielen:
Anwendbarkeit
Mit den kanonischen Layouts lassen sich vielseitige Inhaltspräsentationen erstellen, sodass Sie leicht darauf zugreifen und sie genauer untersuchen können. Anhand des folgenden Flussdiagramms können Sie ermitteln, welche Layout- und Implementierungsstrategie für die Anwendungsfälle Ihrer App am besten geeignet ist.
Beispiele für die kanonischen Layouts, die in verschiedenen Arten von Apps implementiert sind, finden Sie in der Galerie für große Bildschirme.
Zusätzliche Ressourcen
- Listendetails
- Nebenbereich
- Feed
- Material Design – Kanonische Layouts
- UI zu responsiven Layouts migrieren
- Navigation für responsive UIs
Empfehlungen für dich
- Hinweis: Der Linktext wird angezeigt, wenn JavaScript deaktiviert ist.
- Responsives/adaptives Design mit Ansichten
- Listen und Raster
- Praktische Lösung von Leistungsproblemen in Jetpack Compose