Android-Apps müssen ein ständig wachsendes Ökosystem von Geräteformfaktoren unterstützen. Die Benutzeroberfläche einer App sollte responsiv sein, um sich an eine Vielzahl von Bildschirmgrößen sowie an unterschiedliche Ausrichtungen und Gerätestatus anzupassen.
Bei responsiven Benutzeroberflächen stehen die Prinzipien Flexibilität und Kontinuität im Mittelpunkt.
Flexibilität bezieht sich auf Layouts, die den verfügbaren Platz optimal nutzen und sich anpassen, wenn sich der verfügbare Platz ändert. Anpassungen können viele Formen annehmen: Sie können die Größe einer einzelnen Ansicht einfach vergrößern, Ansichten so neu anordnen, dass sie besser zugänglich sind, zusätzliche Ansichten ein- oder ausblenden oder eine Kombination dieser Optionen verwenden.
Kontinuität bezieht sich auf eine nahtlose Nutzererfahrung beim Wechsel von einer Fenstergröße zur nächsten. Die Nutzererfahrung sollte ohne Unterbrechung fortgesetzt werden. Da eine Größenänderung die Zerstörung und Neuerstellung der gesamten Ansichtshierarchie nach sich ziehen kann, ist es wichtig, dass der Nutzer seine Position oder seine Daten nicht verliert.
Was du vermeiden solltest
Verwenden Sie keine physischen Hardwarewerte, um Layoutentscheidungen zu treffen. Es mag verlockend sein, Entscheidungen anhand eines festen Werts zu treffen, aber in vielen Situationen sind diese Werte nicht nützlich, um den Bereich zu bestimmen, in dem Ihre Benutzeroberfläche funktionieren kann.
Bei Apps kann es zu einer Fenstergrößenänderung kommen, wenn sie im Modus mit mehreren Fenstern, im Bild-im-Bild-Modus oder in freiformfähigen Fenstern wie ChromeOS ausgeführt werden. Es kann sogar mehr als ein physisches Display geben, z. B. bei einem faltbaren Gerät oder einem Gerät mit mehreren Displays. In all diesen Fällen ist die physische Bildschirmgröße für die Entscheidung, wie Inhalte angezeigt werden, nicht relevant.
Aus demselben Grund sollten Sie Ihre App nicht auf eine bestimmte Ausrichtung oder ein bestimmtes Seitenverhältnis festlegen. Auch wenn das Gerät selbst in einer bestimmten Ausrichtung ist, kann Ihre App aufgrund der Größe des Fensters eine andere Ausrichtung haben. Wenn Sie beispielsweise auf einem Tablet im Querformat den Mehrfenstermodus verwenden, kann eine App im Hochformat angezeigt werden, weil sie höher als breit ist.
Versuche auch nicht, herauszufinden, ob es sich um ein Smartphone oder Tablet handelt. Was genau als Tablet gilt, ist etwas subjektiv: Besteht die Definition aus einer bestimmten Größe, einem bestimmten Seitenverhältnis oder einer Kombination aus Größe und Seitenverhältnis? Wenn neue Formfaktoren auf den Markt kommen, können sich diese Annahmen ändern und die Unterscheidung verliert an Bedeutung.
Verwenden Sie stattdessen Breakpoints und Fenstergrößenklassen.
Unterbrechungspunkte und Fenstergrößenklassen
Der tatsächliche Teil des Bildschirms, der Ihrer App zugewiesen ist, ist das Fenster der App. Sie kann den gesamten Bildschirm oder einen Teil des Bildschirms einnehmen. Berücksichtigen Sie die Fenstergröße also, wenn Sie grundlegende Entscheidungen über das Layout Ihrer App treffen.
Wenn Sie ein Design für mehrere Formfaktoren entwerfen, ermitteln Sie Grenzwerte, an denen sich diese übergeordneten Entscheidungen in verschiedene Richtungen verzweigen. Zu diesem Zweck bietet das responsive Layout-Raster von Material Design Breakpoints für Breite und Höhe, mit denen Sie Rohgrößen in diskrete, standardisierte Gruppen (Fenstergrößenklassen) abbilden können. Da vertikales Scrollen sehr häufig vorkommt, sind für die meisten Apps vor allem die Klassen für die Breite wichtig. Daher können die meisten Apps mit nur wenigen Punkten für die Bildschirmauflösung für alle Bildschirmgrößen optimiert werden. Weitere Informationen zu Fenstergrößenklassen finden Sie unter Fenstergrößenklassen verwenden.
Persistente UI-Elemente
Die Layoutrichtlinien für Material Design definieren Bereiche für App-Leisten, Navigation und Inhalte. Normalerweise sind die ersten beiden persistente UI-Elemente am Stamm (oder sehr nahe am Stamm) der Ansichtshierarchie. „Dauerhaft“ bedeutet nicht unbedingt, dass die Ansicht immer sichtbar ist, sondern dass sie an Ort und Stelle bleibt, während sich andere Inhaltsansichten möglicherweise verschieben oder ändern. Ein Navigationselement könnte sich beispielsweise in einem Schiebefeld befinden, das nicht auf dem Bildschirm zu sehen ist, aber immer vorhanden ist.
Persistente Elemente können responsiv sein und nehmen in der Regel entweder die gesamte Breite oder die gesamte Höhe des Fensters ein. Verwenden Sie daher vorzugsweise Größenklassen, um zu entscheiden, wo sie platziert werden sollen. So wird der Platz abgegrenzt, der für Inhalte übrig bleibt. Im folgenden Snippet wird für die Aktivität eine untere Leiste für kompakte Bildschirme und eine obere App-Leiste für größere Bildschirme verwendet. Die qualifizierten Layouts verwenden wie bereits beschrieben Breiten-Breakpoints.
<!-- res/layout/main_activity.xml -->
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- content view(s) -->
<com.google.android.material.bottomappbar.BottomAppBar
android:layout_width="wrap_content"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
... />
</androidx.constraintlayout.widget.ConstraintLayout>
<!-- res/layout-w600dp/main_activity.xml -->
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
... />
<!-- content view(s) -->
</androidx.constraintlayout.widget.ConstraintLayout>
Inhalte
Nachdem Sie die dauerhaft sichtbaren UI-Elemente positioniert haben, können Sie den verbleibenden Platz für Inhalte verwenden, z. B. mit einem NavHostFragment für den Navigationsgraphen Ihrer App. Weitere Informationen finden Sie unter Navigation für responsive Benutzeroberflächen.
Alle Daten für verschiedene Größen verfügbar machen
Die meisten App-Frameworks verwenden heute ein Datenmodell, das von den Android-Komponenten getrennt ist, die zur Benutzeroberfläche beitragen (Aktivitäten, Fragmente und Ansichten). Bei Jetpack wird diese Rolle in der Regel von ViewModels übernommen, die den zusätzlichen Vorteil haben, dass sie bei Konfigurationsänderungen erhalten bleiben. Weitere Informationen finden Sie unter ViewModels – Übersicht.
Wenn Sie ein Layout implementieren, das sich an unterschiedliche Größen anpasst, kann es verlockend sein, ein anderes Datenmodell basierend auf der aktuellen Größe zu verwenden. Dies verstößt jedoch gegen das Prinzip des unidirektionalen Datenflusses. Daten sollten nach unten zu den Aufrufen fließen und Ereignisse wie Nutzerinteraktionen nach oben. Eine Abhängigkeit in die andere Richtung zu schaffen, bei der das Datenmodell von der Konfiguration der UI-Ebene abhängt, erschwert dies erheblich. Wenn sich die Größe der App ändert, müssen Sie die Umwandlung von einem Datenmodell in ein anderes berücksichtigen.
Stattdessen sollte Ihr Datenmodell die größte Größenklasse umfassen. Sie können dann Inhalte in der Benutzeroberfläche selektiv anzeigen, ausblenden oder neu positionieren, um sie an die aktuelle Größenklasse anzupassen. Im Folgenden finden Sie einige Strategien, die Sie bei der Entscheidung für das Verhalten Ihres Layouts beim Wechsel zwischen den Größenklassen berücksichtigen können.
Inhalte maximieren
Kanonische Layouts: Feed
Mehr Platz kann eine Gelegenheit sein, die Inhalte einfach zu vergrößern und so zu formatieren, dass sie barrierefreier sind.
Sammlungen vergrößern Viele Apps zeigen eine Sammlung von Elementen in einem scrollbaren Container an, z. B. in einem RecyclerView oder ScrollView. Wenn Sie festlegen, dass ein Container automatisch größer werden soll, können mehr Inhalte angezeigt werden.
Achten Sie jedoch darauf, dass die Inhalte im Container nicht zu stark gedehnt oder verzerrt werden. Wenn die Breite beispielsweise nicht kompakt ist, sollten Sie für RecyclerView einen anderen Layout-Manager wie GridLayoutManager, StaggeredGridLayoutManager oder FlexboxLayout verwenden.
Einzelne Elemente können auch eine andere Größe oder Form haben, um mehr Inhalt anzuzeigen und die Elementgrenzen leichter zu unterscheiden.
Hauptelement hervorheben Wenn das Layout einen bestimmten Schwerpunkt hat, z. B. ein Bild oder Video, maximieren Sie es, wenn das App-Fenster maximiert wird, um die Aufmerksamkeit der Nutzer aufrechtzuerhalten. Andere unterstützende Elemente können um oder unter der Hero-Ansicht neu angeordnet werden.
Es gibt viele Möglichkeiten, ein solches Layout zu erstellen. ConstraintLayout eignet sich jedoch besonders gut für diesen Zweck, da es viele Möglichkeiten bietet, die Größe einer untergeordneten Ansicht einzuschränken, z. B. prozentual oder durch Erzwingen eines Seitenverhältnisses, und die untergeordneten Elemente relativ zu sich selbst oder zu anderen untergeordneten Elementen zu positionieren. Weitere Informationen zu all diesen Funktionen finden Sie unter Responsive UI mit ConstraintLayout erstellen.
Maximieren Sie standardmäßig minimierte Inhalte. Wenn Platz vorhanden ist, sollten Sie Inhalte anzeigen, auf die Nutzer sonst nur durch zusätzliche Interaktionen wie Tippen, Scrollen oder Gesten zugreifen könnten. Inhalte, die in einer kompakten Ansicht in einem Tab angezeigt werden, können beispielsweise in Spalten oder einer Liste neu angeordnet werden, wenn mehr Platz verfügbar ist.
Ränder vergrößern Wenn der Bereich so groß ist, dass Sie selbst nach der Verwendung aller Inhalte keinen ansprechenden Look finden, vergrößern Sie die Ränder des Layouts so, dass die Inhalte zentriert bleiben und die einzelnen Ansichten eine natürliche Größe und einen natürlichen Abstand haben.
Alternativ kann eine Vollbildkomponente in eine schwebende Dialogfeld-UI umgewandelt werden. Das eignet sich besonders gut, wenn diese Komponente den alleinigen Fokus erfordert, um eine unmittelbare Nutzeraufgabe zu erfüllen, z. B. das Verfassen einer E-Mail oder das Erstellen eines Kalenderereignisses.
Inhalte hinzufügen
Kanonische Layouts: Unterstützender Bereich, Listendetailansicht
Verwenden Sie einen unterstützenden Bereich. In einem unterstützenden Bereich werden zusätzliche Inhalte oder kontextbezogene Aktionen zu den Hauptinhalten angezeigt, z. B. Kommentare in einem Dokument oder Elemente in einer Playlist. In der Regel wird dabei das untere Drittel des Bildschirms für die erweiterte Höhe oder das hintere Drittel für die erweiterte Breite verwendet.
Eine wichtige Überlegung ist, wo diese Inhalte platziert werden sollen, wenn nicht genügend Platz für die Ansicht vorhanden ist. Hier sind einige Alternativen:
- Seitenleiste am hinteren Rand mit
DrawerLayout - Untere Schublade mit
BottomSheetBehavior - Menü oder Pop-up-Fenster, das durch Tippen auf ein Menüsymbol geöffnet wird
Erstellen Sie ein Layout mit zwei Ansichten. Auf großen Bildschirmen werden möglicherweise mehrere Funktionen angezeigt, die auf kleineren Bildschirmen normalerweise separat angezeigt werden. Ein gängiges Interaktionsmuster in vielen Apps ist die Anzeige einer Liste von Elementen wie Kontakten oder Suchergebnissen und der Wechsel zu den Details eines Elements, wenn es ausgewählt wird. Anstatt die Liste für größere Bildschirme zu vergrößern, können Sie die Listendetailansicht verwenden, um beide Funktionen in einem zweispaltigen Layout nebeneinander anzuzeigen. Im Gegensatz zu einem unterstützenden Bereich ist der Detailbereich einer Listendetailansicht ein eigenständiges Element, das auf kleineren Bildschirmen unabhängig angezeigt werden kann.
Verwenden Sie das spezielle Widget SlidingPaneLayout, um eine Listendetailansicht zu implementieren. Dieses Widget berechnet automatisch, ob auf Grundlage des für die beiden Bereiche angegebenen layout_width-Werts genügend Platz vorhanden ist, um beide Bereiche gleichzeitig anzuzeigen. Über layout_weight kann der verbleibende Platz verteilt werden. Wenn nicht genügend Platz vorhanden ist, nimmt jeder Bereich die volle Breite des Layouts ein und der Detailbereich wird entweder vom Bildschirm verschoben oder über dem Listenbereich angezeigt.
Weitere Informationen zur Verwendung von SlidingPaneLayout finden Sie unter Layout mit zwei Ansichten erstellen. Beachten Sie auch, dass dieses Muster sich auf die Strukturierung Ihres Navigationsdiagramms auswirken kann (siehe Navigation für responsive Benutzeroberflächen).
Weitere Informationen
- Material Design – Layout anwenden
Empfehlungen für dich
- Hinweis: Der Linktext wird angezeigt, wenn JavaScript deaktiviert ist.
- Layout mit zwei Ansichten erstellen
- Responsives/adaptives Design mit Ansichten
- Kanonische Layouts