Android-Apps müssen ein ständig wachsendes Ökosystem von Geräteformfaktoren unterstützen. Die Benutzeroberfläche einer App sollte responsiv sein und sich an eine Vielzahl von Bildschirmgrößen sowie verschiedene Ausrichtungen und Gerätestatus anpassen.
Die responsive Benutzeroberfläche dreht sich um die Prinzipien Flexibilität und Kontinuität.
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: zum Beispiel die Größe einer einzelnen Ansicht vergrößern, die Ansichten neu positionieren, damit sie besser zugänglich sind, oder zusätzliche Ansichten ein- oder ausblenden oder eine Kombination daraus kombinieren.
Continuity (Kontinuität) bezieht sich auf eine nahtlose User Experience beim Übergang von einer Fenstergröße zu einer anderen. Was auch immer die Nutzenden tun, sollte ohne Unterbrechung fortgesetzt werden. Da mit einer Größenänderung auch die gesamte Ansichtshierarchie gelöscht und wiederhergestellt werden kann, darf der Nutzer seinen Platz oder seine Daten nicht verlieren.
Was du vermeiden solltest
Vermeiden Sie bei Layoutentscheidungen die Verwendung physischer Hardwarewerte. Es mag verlockend sein, Entscheidungen auf der Grundlage eines festen Werts zu treffen. In vielen Situationen sind diese Werte jedoch nicht nützlich, um den Raum zu bestimmen, mit dem Ihre UI arbeiten kann.
Auf Tablets wird eine App möglicherweise im Mehrfenstermodus ausgeführt. Das bedeutet, dass die App den Bildschirm mit einer anderen App teilt. Unter ChromeOS befindet sich eine App möglicherweise in einem Fenster mit anpassbarer Größe. Es kann sogar mehr als einen physischen Bildschirm geben, z. B. bei einem faltbaren Gerät oder einem Gerät mit mehreren Displays. In all diesen Fällen spielt die physische Bildschirmgröße keine Rolle für die Entscheidung, wie Inhalte angezeigt werden.
Aus dem gleichen Grund vermeiden Sie, die App auf eine bestimmte Ausrichtung oder ein bestimmtes Seitenverhältnis zu sperren. Das Gerät selbst kann zwar eine bestimmte Ausrichtung haben, Ihre App kann jedoch allein aufgrund der Größe des Fensters eine andere Ausrichtung haben. Beispielsweise kann eine App auf einem Tablet im Querformat im Mehrfenstermodus im Hochformat angezeigt werden, da sie höher als breit ist.
Versuchen Sie auch nicht, festzustellen, ob das Gerät ein Smartphone oder Tablet ist. Was genau als Tablet gilt, ist etwas subjektiv: Basiert es auf einer bestimmten Größe oder einem bestimmten Seitenverhältnis oder auf einer Kombination aus Größe und Seitenverhältnis? Wenn neue Formfaktoren auftreten, können sich diese Annahmen ändern und die Unterscheidung verliert an Bedeutung.
Verwenden Sie Haltepunkte und Fenstergrößenklassen, anstatt eine der vorherigen Strategien zu verwenden.
Haltepunkte und Fenstergrößenklassen
Der eigentliche Teil des Bildschirms, der Ihrer App zugewiesen ist, ist das App-Fenster. Es kann den ganzen Bildschirm oder einen Teil des Bildschirms einnehmen. Verwende daher die Fenstergröße, wenn du allgemeine Entscheidungen zum Layout deiner App triffst.
Suchen Sie beim Design für mehrere Formfaktoren nach Schwellenwerten, bei denen sich diese übergeordneten Entscheidungen in verschiedene Richtungen verzweigen. Zu diesem Zweck enthält das responsive Layoutraster von Material Design Haltepunkte für Breite und Höhe, sodass Sie Rohgrößen in einzelnen, standardisierten Gruppen zuordnen können, die als Fenstergrößenklassen bezeichnet werden. Aufgrund der Allgegenwärtigkeit des vertikalen Scrollens sind den meisten Apps vor allem die Breitenklassen wichtig. Daher können die meisten Apps mit nur wenigen Haltepunkten für alle Bildschirmgrößen optimiert werden. Weitere Informationen zu Fenstergrößenklassen finden Sie unter Unterstützung verschiedener Bildschirmgrößen.
Persistente UI-Elemente
In den Layoutrichtlinien von Material Design sind Bereiche für App-Leisten, die Navigation und Inhalte definiert. In der Regel sind die ersten beiden UI-Elemente, die sich ganz oder sehr nah am Stamm der Ansichtshierarchie befinden. „Dauerhaft“ bedeutet nicht unbedingt, dass die Ansicht immer sichtbar ist. Vielmehr bedeutet sie, dass sie an Ort und Stelle bleibt, während andere Inhaltsansichten verschoben oder geändert werden können. Ein Navigationselement kann sich beispielsweise in einer gleitenden Schublade befinden, die sich außerhalb des Bildschirms befindet, die Leiste ist jedoch immer vorhanden.
Persistente Elemente können responsiv sein und nehmen in der Regel entweder die volle Breite oder die volle Höhe des Fensters ein. Daher sollten Sie zur Entscheidung, wo sie platziert werden, lieber Größenklassen verwenden. Dadurch wird der Platz festgelegt, der für Inhalte übrig bleibt. Im folgenden Snippet wird bei der Aktivität eine untere Leiste für kompakte Bildschirme und eine obere App-Leiste für größere Bildschirme verwendet. Die qualifizierten Layouts verwenden Haltepunkte für die Breite, wie oben beschrieben.
<!-- 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 persistenten UI-Elemente positioniert haben, nutzen Sie den verbleibenden Platz für Inhalte, z. B. indem Sie ein NavHostFragment mit dem Navigationsdiagramm Ihrer App verwenden. Weitere Informationen finden Sie unter Navigation für responsive UIs.
Sicherstellen, dass alle Daten für verschiedene Größen verfügbar sind
In den meisten App-Frameworks wird heute ein Datenmodell verwendet, das von den Android-Komponenten (Aktivitäten, Fragmente und Ansichten) getrennt ist, die zur Benutzeroberfläche beitragen. Bei Jetpack wird diese Rolle in der Regel von ViewModels erfüllt, die den zusätzlichen Vorteil haben, dass sie auch über Konfigurationsänderungen bestehen bleiben (weitere Informationen finden Sie in der ViewModel-Übersicht).
Wenn Sie ein Layout implementieren, das sich an verschiedene 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 Datenansichten fließen und Ereignisse wie Nutzerinteraktionen nach oben. Wenn Sie eine Abhängigkeit in die andere Richtung erstellen, bei der das Datenmodell von der Konfiguration der UI-Ebene abhängt, wird dies erheblich komplizierter. Wenn sich die Größe der Anwendung ändert, müssen Sie die Konvertierung von einem Datenmodell in ein anderes berücksichtigen.
Lassen Sie Ihr Datenmodell stattdessen die größte Größenklasse aufnehmen. Anschließend können Sie Inhalte in der Benutzeroberfläche selektiv ein-, ausblenden oder neu positionieren, um sie an die aktuelle Größenklasse anzupassen. Im Folgenden finden Sie einige Strategien, die Sie anwenden können, um zu entscheiden, wie sich Ihr Layout beim Wechsel zwischen Größenklassen verhalten soll.
Inhalte maximieren
Kanonische Layouts: Feed
Größerer Platz bietet die Möglichkeit, Inhalte zu vergrößern und Inhalte neu zu formatieren, um sie zugänglicher zu machen.
Sammlungen vergrößern Bei vielen Apps wird eine Sammlung von Elementen in einem scrollbaren Container angezeigt, z. B. RecyclerView oder ScrollView. Wenn ein Container automatisch vergrößert werden kann, können mehr Inhalte angezeigt werden.
Achten Sie jedoch darauf, dass der Inhalt im Container nicht zu stark gestreckt oder verzerrt wird. Für RecyclerView sollten Sie beispielsweise einen anderen Layout-Manager wie GridLayoutManager, StaggeredGridLayoutManager oder FlexboxLayout verwenden, wenn die Breite nicht kompakt ist.
Einzelne Elemente können auch eine andere Größe oder Form verwenden, um mehr Inhalt anzuzeigen und Artikelgrenzen leichter voneinander abzugrenzen.
Hebt ein Hero-Element hervor. Wenn das Layout einen bestimmten Schwerpunkt hat, z. B. ein Bild oder Video, können Sie es bei größerem App-Fenster maximieren, um die Aufmerksamkeit des Nutzers 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, aber ConstraintLayout eignet sich für diesen Zweck besonders, da es viele Möglichkeiten bietet, die Größe einer untergeordneten Ansicht zu beschränken – etwa durch Prozentsatz oder durch Erzwingen eines Seitenverhältnisses – und die untergeordneten Elemente relativ zu sich selbst oder zu anderen untergeordneten Elementen zu positionieren. Weitere Informationen zu diesen Funktionen finden Sie unter Responsive UI mit ConstraintLayout erstellen.
Minimierbare Inhalte standardmäßig anzeigen. Wenn genügend Platz vorhanden ist, sollten Sie Inhalte bereitstellen, die andernfalls nur durch zusätzliche Nutzerinteraktion wie Tippen, Scrollen oder Gesten zugänglich wären. Beispielsweise können Inhalte, die in einer Oberfläche mit Tabs angezeigt werden, wenn sie kompakt sind, stattdessen in Spalten oder eine Liste neu angeordnet werden, wenn mehr Platz verfügbar ist.
Ränder vergrößern: Wenn der Platz so groß ist, dass Sie selbst nach Nutzung aller Inhalte keine ansprechende Anpassung finden, erweitern Sie die Ränder des Layouts, sodass der Inhalt zentriert bleibt und die einzelnen Ansichten eine natürliche Größe und einen Abstand zwischen ihnen haben.
Alternativ kann eine Vollbildkomponente in eine unverankerte Dialog-UI umgewandelt werden. Dies eignet sich besonders, wenn diese Komponente einen exklusiven Fokus erfordert, um eine unmittelbare Aufgabe des Nutzers auszuführen, z. B. das Schreiben einer E-Mail oder eines Kalendertermins.
Inhalte hinzufügen
Kanonische Layouts: Stützbereich, Listendetailansicht
Verwenden Sie einen Bereich, der dies unterstützt. In einem unterstützenden Bereich werden zusätzliche Inhalte oder kontextbezogene Aktionen im Zusammenhang mit dem primären Inhalt angezeigt, z. B. Kommentare in einem Dokument oder Elemente in einer Playlist. Normalerweise wird das untere Drittel des Bildschirms für die maximierte Höhe verwendet, das letzte Drittel für die maximierte Breite.
Es ist wichtig, zu überlegen, wo Sie diesen Inhalt platzieren, wenn nicht genügend Platz vorhanden ist, um den Bereich anzuzeigen. Im Folgenden finden Sie einige Alternativen:
- Seitenleiste am unteren Rand mit
DrawerLayout - Untere Leiste mit
BottomSheetBehavior - Menü oder Pop-up-Fenster, das durch Tippen auf ein Menüsymbol aufgerufen werden kann
Ein Layout mit zwei Bereichen erstellen. Große Bildschirme können eine Kombination von Funktionen darstellen, die auf kleineren Bildschirmen normalerweise separat angezeigt werden. Ein gängiges Interaktionsmuster in vielen Anwendungen besteht darin, eine Liste von Elementen wie Kontakten oder Suchergebnissen anzuzeigen und zum Detail eines Elements zu wechseln, wenn das Element ausgewählt wird. Anstatt die Liste für größere Bildschirme zu vergrößern, verwenden Sie die Listen-Detailansicht, um beide Elemente nebeneinander in einem Layout mit zwei Bereichen anzuzeigen. Im Gegensatz zu einem unterstützenden Bereich ist der Detailbereich einer Listen-Detailansicht ein eigenständiges Element, das unabhängig auf kleineren Bildschirmen angezeigt werden kann.
Mit dem dedizierten SlidingPaneLayout-Widget können Sie eine Listendetailansicht implementieren. Anhand des layout_width-Werts, der für die beiden Bereiche angegeben wurde, wird automatisch berechnet, ob genügend Platz vorhanden ist, um beide Bereiche zusammen anzuzeigen. Der verbleibende Platz kann mithilfe von layout_weight verteilt werden. Wenn nicht genügend Platz vorhanden ist, nutzt jeder Bereich die volle Breite des Layouts und der Detailbereich wird entweder über den Bildschirm oder oberhalb des Listenbereichs gleitet.
Unter Layout mit zwei Bereichen erstellen finden Sie weitere Informationen zur Verwendung von SlidingPaneLayout. Dieses Muster kann sich auch auf die Struktur des Navigationsdiagramms auswirken (siehe Navigation für responsive UIs).
Weitere Informationen
- Material Design – Layout anwenden