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 sowohl Smartphones mit kleinen Bildschirmen als auch Tablets, faltbare Smartphones und ChromeOS-Geräte. Die Layouts basieren auf den Material Design-Richtlinien und sind sowohl ästhetisch als auch funktional gestaltet.
Das Android-Framework enthält spezialisierte Komponenten, die die Implementierung der Layouts mithilfe von Ansichten oder Jetpack Compose einfach und zuverlässig machen.
Die kanonischen Layouts schaffen ansprechende, produktivitätssteigernde Benutzeroberflächen, die die Grundlage für gute Apps bilden.
Wenn Sie mit den kanonischen Layouts für große Bildschirme bereits 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
Finde heraus, wie gut deine App auf großen Bildschirmen aussehen kann.
In der Galerie für große Bildschirme finden Sie eine Auswahl an optimierten Layouts für große Bildschirme.
Jetzt ansehen
Listen-Detailansicht
Mit dem Listen-Detail-Layout können Nutzende Listen von Objekten durchsehen, die beschreibende, erklärende oder andere ergänzende Informationen enthalten, nämlich das Objektdetail.
Das Layout unterteilt das App-Fenster in zwei nebeneinanderliegende Bereiche: einen für die Liste und einen für die Details. Nutzer wählen einen Artikel aus der Liste aus, um sich dessen Details anzeigen zu lassen. Über Deeplinks im Detail kannst du zusätzliche Inhalte im Detailbereich aufrufen.
Bei Displays mit erweiterter Breite (siehe Fenstergrößenklassen) können sowohl die Liste als auch die Details gleichzeitig dargestellt werden. Wenn Sie ein Listenelement auswählen, wird der Detailbereich aktualisiert und der zugehörige Inhalt wird für das ausgewählte Element angezeigt.
Auf Displays mit mittlerer und kompakter Breite werden je nach Nutzerinteraktion mit der App entweder die Liste oder das Detail angezeigt. Wenn nur die Liste sichtbar ist, wird bei Auswahl eines Listenelements das Detail anstelle der Liste angezeigt. Wenn nur die Details sichtbar sind, wird die Liste durch Drücken der Zurück-Taste wieder angezeigt.
Konfigurationsänderungen, z. B. Änderungen der Geräteausrichtung oder der App-Fenstergröße, können die Fenstergrößenklasse des Displays beeinflussen. Ein Layout mit Listendetails reagiert entsprechend und behält den Status der App bei:
- Wird ein Bildschirm mit erweiterter Breite, in dem sowohl der Listen- als auch der Detailbereich angezeigt werden, auf mittel oder kompakt eingegrenzt, bleibt der Detailbereich sichtbar und der Listenbereich wird ausgeblendet.
- Wenn auf einem Bildschirm mit mittlerer oder kompakter Breite nur der Detailbereich 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 Detailbereich entspricht.
- Wenn auf einem Bildschirm mit mittlerer oder kompakter Breite nur der Listenbereich sichtbar ist und dieser erweitert wird, werden die Liste und der Platzhalter-Detailbereich zusammen angezeigt
Die Listen-Detailansicht ist ideal für Messaging-Apps, Kontaktmanager, Dateibrowser oder alle Apps, bei denen der Inhalt als Liste mit Elementen organisiert werden kann, die zusätzliche Informationen preisgeben.
Implementierung
Ein Layout mit Listendetails kann mit verschiedenen Technologien erstellt werden, darunter „Schreiben“, „Ansichten“ und das Einbetten von Aktivitäten (bei älteren Apps). Im Abschnitt Anwendungsbereich unten erfahren Sie, welche Technologie für Ihre App am besten geeignet ist.
Schreiben
Das deklarative Modell von Compose unterstützt eine Logik für Fenstergrößenklassen, die festlegt, ob die Liste und die Detailbereiche gleichzeitig angezeigt werden (wenn die Klasse für die Breite der Fenstergröße erweitert wird) oder nur der Listen- oder Detailbereich (wenn die Klasse für die Breite der Fenstergröße mittel oder kompakt ist).
Um einen unidirektionalen Datenfluss sicherzustellen, ziehen Sie alle Zustände, 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 bei kleinen Fenstergrößen angezeigt wird, fügen Sie ein BackHandler hinzu, um den Detailbereich zu entfernen und nur den Listenbereich anzuzeigen. 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 eine einfache Implementierung von Layouts mit Listendetails basierend auf Ansichten oder Fragmenten.
Deklarieren Sie zuerst ein SlidingPaneLayout als Stammelement Ihres 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 übergeben. ViewModel wird empfohlen, da die Geschäftslogik gespeichert und Konfigurationsänderungen beibehalten werden kann.
SlidingPaneLayout bestimmt automatisch, ob die Liste und das Detail gemeinsam oder einzeln angezeigt werden. In einem Fenster mit genügend Platz in horizontaler Ausrichtung werden die Liste und das Detail nebeneinander angezeigt. In einem Fenster mit unzureichendem Platz wird entweder die Liste oder das Detail angezeigt, je nachdem, wie der Nutzer mit der App interagiert.
Eine Beispielimplementierung finden Sie im Beispiel Listendetails mit Ansichten.
Einbetten von Aktivitäten
Mit der Funktion zum Einbetten von Aktivitäten können Sie ältere Apps mit mehreren Aktivitäten aktivieren, um zwei Aktivitäten nebeneinander auf demselben Bildschirm oder übereinander anzuzeigen. Wenn Ihre App die Liste und die Details eines Listendetail-Layouts in separaten Aktivitäten implementiert, können Sie mithilfe der Aktivitätseinbettung ganz einfach ein Listendetail-Layout mit minimaler oder gar keiner Code-Refaktorierung erstellen.
Implementieren Sie die Einbettung von Aktivitäten, indem Sie mithilfe einer XML-Konfigurationsdatei eine Aufteilung des Aufgabenfensters angeben. Die Aufteilung definiert die primäre Aktivität, die die Aufteilung initiiert, und eine sekundäre Aktivität. Legen Sie mithilfe der Haltepunkte in der Fenstergröße eine minimale Anzeigebreite für die Aufteilung fest. Wenn die Anzeigebreite unter den minimalen Haltepunkt fällt, werden die Aktivitäten übereinander angezeigt. Wenn die Mindestbreite beispielsweise 600 dp beträgt, werden die Aktivitäten auf kompakten Displays übereinander angezeigt, auf mittleren und erweiterten Displays werden sie jedoch nebeneinander angezeigt.
Das Einbetten von Aktivitäten wird unter Android 12L (API-Level 32) und höher unterstützt. Es kann aber auch auf niedrigeren API-Levels verfügbar sein, wenn es von Geräteherstellern implementiert wird. Wenn das Einbetten von Aktivitäten auf einem Gerät nicht verfügbar ist, führt das Fallback dazu, dass die Listen- oder Detailaktivität das gesamte App-Fenster einnimmt, basierend auf der Nutzerinteraktion mit der App.
Weitere Informationen finden Sie unter Aktivitäten einbetten.
Eine Beispielimplementierung finden Sie im Beispiel Listendetails mit Aktivitätseinbettung.
Feed
In einem Feedlayout werden äquivalente Inhaltselemente in einem konfigurierbaren Raster angeordnet, sodass eine große Menge an Inhalten schnell und bequem angezeigt werden kann.
Größe und Position legen Beziehungen zwischen den Inhaltselementen fest.
Contentgruppen werden erstellt, indem Elemente dieselbe Größe haben und sie zusammen positionieren. Die Aufmerksamkeit wird auf Elemente gelenkt, da sie größer sind als benachbarte Elemente.
Karten und Listen sind gängige Komponenten von Feedlayouts.
Ein Feed-Layout unterstützt Displays fast jeder Größe, da sich das Raster von einer einzelnen Scrollspalte in einen mehrspaltigen Scroll-Feed mit Inhalten anpassen kann.
Feeds eignen sich besonders gut für Nachrichten- und Social-Media-Apps.
Implementierung
Schreiben
Ein Feed besteht aus einer großen Anzahl von Inhaltselementen in einem vertikalen Scroll-Container, der in einem Raster angeordnet ist. Mit verzögerten Listen können Sie eine große Anzahl von Elementen in Spalten oder Zeilen effizient rendern. Mit Lazy Grids werden Elemente in Rastern gerendert, was die Konfiguration von Elementgrößen und Spans unterstützt.
Konfigurieren Sie die Spalten des Rasterlayouts basierend auf dem verfügbaren Anzeigebereich, um die zulässige Mindestbreite für Rasterelemente festzulegen. Passen Sie beim Definieren von Rasterelementen die Spaltenspannen an, um einige Elemente gegenüber anderen hervorzuheben.
Für Abschnittsüberschriften, Trennlinien oder andere Elemente, die die gesamte Breite des Feeds einnehmen sollen, verwenden Sie maxLineSpan, um die gesamte Breite des Layouts einzunehmen.
Auf Displays mit kleiner Breite, auf denen nicht genügend Platz vorhanden ist, um mehr als eine Spalte anzuzeigen, verhält sich LazyVerticalGrid wie ein LazyColumn.
Ein Implementierungsbeispiel finden Sie im Beispiel Feed mit Texteingabe.
Ansichten und Fragmente
Mit einem RecyclerView wird eine große Anzahl von Elementen in einer einzelnen Spalte effizient gerendert. Mit einem GridLayoutManager werden Elemente in einem Raster angeordnet. Dadurch können die Elementgrößen und -spannen konfiguriert werden.
Konfigurieren Sie die Rasterspalten basierend auf der Größe des verfügbaren Anzeigebereichs, um die zulässige Mindestbreite für Elemente festzulegen.
Die standardmäßige Spanning-Strategie GridLayoutManager, also ein Span pro Element, kann durch Erstellen einer benutzerdefinierten SpanSizeLookup überschrieben werden. Passen Sie den Bereich an, um einige Elemente gegenüber anderen hervorzuheben.
Verwenden Sie auf Displays mit geringer Breite, auf denen nur eine Spalte Platz hat, LinearLayoutManager anstelle von GridLayoutManager.
Ein Implementierungsbeispiel finden Sie im Beispiel Feed mit Aufrufen.
Stützbereich
Durch das Layout des Bereichs werden App-Inhalte in primäre und sekundäre Anzeigebereiche organisiert.
Der primäre Anzeigebereich nimmt den Großteil des App-Fensters ein (in der Regel etwa zwei Drittel) und enthält den Hauptinhalt. Der zweite Anzeigebereich nimmt den Rest des App-Fensters ein und enthält Inhalte, die den Hauptinhalt unterstützen.
Die Unterstützung von Bereichslayouts funktioniert gut auf Displays mit erweiterter Breite (siehe Fenstergrößenklassen) im Querformat. Bildschirme mit mittlerer oder kleiner Breite unterstützen die Anzeige sowohl des primären als auch des sekundären Anzeigebereichs, wenn der Inhalt an schmalere Anzeigebereiche angepasst werden kann oder wenn der zusätzliche Inhalt anfangs in einem unteren oder seitlichen Tabellenblatt verborgen werden kann, auf die über ein Steuerelement wie ein Menü oder eine Schaltfläche zugegriffen werden kann.
Ein unterstützendes Layout unterscheidet sich von einem Listen-Detail-Layout durch die Beziehung zwischen primärem und sekundärem Inhalt. Der Inhalt des sekundären Fensters ist nur in Bezug auf den primären Inhalt von Bedeutung. So ist beispielsweise ein Toolfenster für das unterstützende Fenster an sich irrelevant. Der ergänzende Inhalt im Detailbereich eines Listen-Detail-Layouts ist jedoch auch ohne den Hauptinhalt, wie die Beschreibung eines Produkts aus einem Produkteintrag, aussagekräftig.
Anwendungsfälle für den Supportbereich:
- Produktivitäts-Apps:Ein Dokument oder eine Tabelle mit Kommentaren eines Rezensenten in einem unterstützenden Bereich.
- Medien-Apps:Ein gestreamtes Video mit einer Liste ähnlicher Videos in einem ergänzenden Fenster oder die Darstellung eines Musikalbums mit einer Playlist
- Such- und Referenz-Apps:Ein Formular zur Abfrageeingabe mit Ergebnissen in einem unterstützenden Bereich
Implementierung
Schreiben
Compose unterstützt Fenstergrößenklassenlogik, mit der Sie festlegen können, ob sowohl der Hauptinhalt als auch der unterstützende Inhalt gleichzeitig angezeigt werden sollen oder ob der unterstützende Inhalt an einem anderen Ort platziert werden soll.
Alle Bundesstaaten aufziehen, einschließlich aktueller Fenstergrößenklasse und Informationen zu den Daten im Hauptinhalt und unterstützenden Inhalten.
Platzieren Sie bei Displays mit geringer Breite die unterstützenden Inhalte unter dem Hauptinhalt oder in einem unteren Tabellenblatt. Platzieren Sie bei mittleren und erweiterten Breiten die unterstützenden Inhalte neben dem Hauptinhalt. Passen Sie die Größe dem verfügbaren Inhalt und dem verfügbaren Platz an. Bei mittlerer Breite solltest du die Fläche gleichmäßig zwischen dem Hauptinhalt und den unterstützenden Inhalten aufteilen. Geben Sie bei der maximierten Breite 70% des Platzes für den Hauptinhalt und 30% für den unterstützenden Inhalt ein.
Eine Beispielimplementierung finden Sie im Supportbereich mit Compose.
Ansichten und Fragmente
Ein Layout mit einem Hilfsbereich wird mithilfe eines Hilfslayouts wie LinearLayout oder ConstraintLayout implementiert. Legen Sie die Fenstergrößenklassen fest, die den für Ihre App verfügbaren horizontalen Anzeigebereich in drei Kategorien unterteilen: kompakt (< 600 dp), mittel (>= 600 dp) und maximiert (>= 840 dp).
Definieren Sie für jede Fenstergrößenklasse Layouts so:
- Schmal:Platzieren Sie im Ordner der App-Ressourcen
layoutden Inhalt, der den unterstützenden Bereich rendert, unter dem Hauptinhalt oder in einem Ansicht am unteren Rand. - Medium:Geben Sie im Ordner
layout-w600dpweitere Bereiche an, die dazu führen, dass der Hauptinhalt und der unterstützende Bereich nebeneinander gerendert werden, wobei der horizontale Anzeigebereich gleichmäßig aufgeteilt wird. - Maximiert: Fügen Sie im Ordner
layout-w840dpunterstützende Fensterinhalte hinzu, die den Hauptinhalt und das unterstützende Fenster nebeneinander rendern. Der unterstützende Bereich nimmt jedoch nur 30% des horizontalen Bereichs ein, sodass die restlichen 70% für den Hauptinhalt übrig bleiben.
Verwenden Sie ein ViewModel für die Kommunikation zwischen dem Hauptinhalt und dem Bereich „Unterstützung“, unabhängig davon, ob Sie Ansichten, Fragmente oder eine Kombination daraus machen.
Beispiele für die Implementierung:
Gültigkeit
Mit den kanonischen Layouts werden facettenreiche Präsentationen von Inhalten erstellt, die leicht zugänglich sind und detailliert untersucht werden können. Mithilfe des folgenden Flussdiagramms können Sie ermitteln, welches Layout und welche Implementierungsstrategie für die Anwendungsfälle Ihrer App am besten geeignet ist.
Beispiele für die in verschiedenen App-Typen implementierten kanonischen Layouts finden Sie in der Galerie für große Bildschirme.
Weitere Informationen
- Listen-Detailansicht
- Unterstützender Bereich
- Feed
- Material Design – Kanonische Layouts
- UI zu responsiven Layouts migrieren
- Navigation für responsive UIs