Benutzeroberfläche zu responsiven Layouts migrieren

Android-Apps müssen eine ständig wachsende Zahl von Geräten unterstützen, Faktoren. Die Benutzeroberfläche einer App sollte responsiv sein und sich an eine Vielzahl von Bildschirmgrößen anpassen. sowie unterschiedliche Ausrichtungen und Gerätestatus.

Responsive UI basiert auf den Prinzipien Flexibilität und Kontinuität.

Flexibilität bezieht sich auf Layouts, die den verfügbaren Platz optimal nutzen und wenn sich der verfügbare Platz ändert. Anpassungen können viele Formen annehmen: einfach die Größe einer einzelnen Ansicht zu vergrößern, Ansichten so neu zu positionieren, dass sie an leichter zugänglichen Orten platzieren, indem zusätzliche Ansichten ein- oder ausgeblendet werden. Kombination dieser Elemente.

Kontinuität bezieht sich auf eine nahtlose Nutzererfahrung während der Umstellung. Fenstergröße in eine andere ändern. Ganz gleich, womit sich die Nutzenden beschäftigen sollte ohne Unterbrechung fortgesetzt werden. Da eine Größenänderung begleitet von der Zerstörung und Neuerstellung der gesamten Ansichtshierarchie. dass Nutzende ihren Platz oder ihre Daten nicht verlieren.

Was du vermeiden solltest

Vermeiden Sie bei Layoutentscheidungen die Verwendung physischer Hardwarewerte. Es ist es verlockend, Entscheidungen auf der Grundlage eines festen Werts zu treffen. Situationen, in denen diese Werte nicht hilfreich sind, um den Platz zu bestimmen, den Ihre Benutzeroberfläche mit denen Sie zusammenarbeiten können.

Wenn Apps im Mehrfenstermodus ausgeführt werden, kann die Größe des Fensters angepasst werden. Bild-im-Bild- oder Freiform-Fenster wie ChromeOS. Es kann sogar noch mehr als ein physischer Bildschirm, z. B. bei einem faltbaren Gerät oder einem Gerät mit mehrere Bildschirme. In all diesen Fällen ist die physische Bildschirmgröße die für die Entscheidung, wie Inhalte angezeigt werden, relevant sind.

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

</ph> Abbildung 1: Die Fenstergröße kann sich vom physischen Gerät oder Anzeigegröße.

Aus dem gleichen Grund sollten Sie Ihre App nicht für eine bestimmte Ausrichtung oder Seitenverhältnis. Auch wenn das Gerät selbst in einer bestimmten Ausrichtung ist, kann die Ausrichtung Ihrer App aufgrund der Größe . Auf einem Tablet im Querformat können Sie beispielsweise den Mehrfenstermodus kann eine App auch im Hochformat angezeigt werden, weil sie höher als breit ist.

Vermeiden Sie außerdem zu ermitteln, ob es sich bei dem Gerät um ein Smartphone oder Tablet handelt. Was genau als Tablet gilt, ist eher subjektiv: Geht es eine bestimmte Größe, ein bestimmtes Seitenverhältnis oder eine Kombination aus Größe und Seitenverhältnis Seitenverhältnis? Da neue Formfaktoren entstehen, können sich diese Annahmen ändern. an Bedeutung verliert.

Anstatt eine der vorhergehenden Strategien auszuprobieren, verwenden Sie Haltepunkte und Fenster Größenklassen.

Haltepunkte und Fenstergrößenklassen

Der eigentliche Teil des Bildschirms, der Ihrer App zugewiesen ist, ist der . Es kann den gesamten Bildschirm oder einen Teil des Bildschirms einnehmen. Verwenden Sie daher die Funktion Fenstergröße, wenn Sie übergeordnete Entscheidungen über das Layout Ihrer App treffen.

Suchen Sie bei der Entwicklung von Designs für mehrere Formfaktoren nach Schwellenwerten, bei denen diese die in unterschiedliche Richtungen verzweigt werden. Zu diesem Zweck hat das Material Raster für responsives Layout entwerfen stellt Haltepunkte für Breite und Höhe bereit, sodass Sie Rohgrößen zuordnen können. in diskrete, standardisierte Gruppen, sogenannte Fenstergrößenklassen, unterteilt werden. Aufgrund von aufgrund der Allgegenwärtigkeit des vertikalen Scrollens ist bei den meisten Apps vor allem die Breite wichtig. sodass die meisten Apps für alle Bildschirmgrößen optimiert werden können, indem nur ein paar Haltepunkte. (Weitere Informationen zu Fenstergrößenklassen finden Sie unter Fenstergrößenklassen)

Persistente UI-Elemente

Das Material Design Richtlinien für das Layout Regionen für App-Leisten, die Navigation und den Inhalt definieren. Normalerweise wird die erste Zwei sind persistente UI-Elemente, die sich am Stamm der Ansicht (oder sehr nahe) befinden. Hierarchie. Beachten Sie, dass „persistent“ bedeutet nicht unbedingt, dass der Aufruf sichtbar ist, bleibt aber erhalten, während andere Contentaufrufe bewegen oder verändern. Ein Navigationselement könnte sich beispielsweise in einem die außerhalb des Bildschirms liegt, aber die Leiste ist immer sichtbar.

Persistente Elemente können responsiv sein und benötigen in der Regel entweder die die volle Breite oder Höhe des Fensters aus. Verwenden Sie daher Größenklassen, um wo sie platziert werden sollen. Dadurch wird der Bereich begrenzt, der für die Inhalte übrig bleibt. Im folgenden Snippet verwendet die Aktivität eine untere Leiste für kompakte Bildschirme und eine obere App-Leiste für größere Bildschirme. Die qualifizierten Layouts verwenden Haltepunkte für die Breite wie zuvor 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>

Content

Nutzen Sie nach der Positionierung der persistenten UI-Elemente den verbleibenden Platz. für Inhalte, z. B. die Verwendung eines NavHostFragment mit der Navigation Ihrer App Diagramm. Weitere Informationen finden Sie unter Navigation für responsive UIs .

Sicherstellen, dass alle Daten für verschiedene Größen verfügbar sind

Die meisten App-Frameworks nutzen heute ein Datenmodell, das vom Android-Komponenten, die zur Benutzeroberfläche beitragen (Aktivitäten, Fragmente und Ansichten). Bei Jetpack wird diese Rolle in der Regel von ViewModels übernommen, den zusätzlichen Vorteil, dass Sie auch bei Konfigurationsänderungen erhalten bleiben (siehe ViewModel Overview (in englischer Sprache) Informationen).

Bei der Implementierung eines Layouts, das sich an verschiedene Größen anpasst, weil es sehr verlockend ist, aufgrund der aktuellen Größe ein anderes Datenmodell zu verwenden. Sie können jedoch Dies verstößt gegen das Prinzip des unidirektionalen Datenflusses. Daten sollten fließen und Ereignisse wie Nutzerinteraktionen nach oben verlaufen. Erstellen einer Abhängigkeit in die andere Richtung, bei der das Datenmodell davon abhängt, die Konfiguration der UI-Ebene erschwert. Wenn der Parameter App-Größe ändert, müssen Sie dann die Konvertierung von einem Datenmodell zu eine andere.

Lassen Sie stattdessen Ihr Datenmodell die größte Klassenklasse unterbringen. Inhalte auf der Benutzeroberfläche selektiv ein-, ausblenden oder neu positionieren, um sie an die aktuelle Klassenklasse. Die folgenden Strategien können Ihnen bei der Entscheidung helfen, sollte sich das Layout beim Wechsel zwischen Größenklassen verhalten.

Inhalte maximieren

Kanonische Layouts: Feed

Ein größerer Raum bietet die Möglichkeit, Inhalte zu vergrößern und neu zu formatieren. damit sie für mehr Barrierefreiheit zugänglich sind.

Sammlungen vergrößern Viele Apps zeigen eine Sammlung von Elementen in scrollbarer Container, z. B. RecyclerView oder ScrollView. Aktivieren eines Wenn ein Container automatisch größer wird, kann mehr Inhalt angezeigt werden. Achten Sie jedoch darauf, dass der Inhalt innerhalb des Containers nicht zu verzerrt oder verzerrt dargestellt werden. Nehmen wir z. B. für RecyclerView die folgende Betrachtung: mit einem anderen Layout-Manager wie GridLayoutManager, StaggeredGridLayoutManager, oder FlexboxLayout, wenn ist die Breite nicht kompakt.

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

</ph> Abbildung 2: Unterschiedliche Layoutmanager für unterschiedliche Fenstergrößen Klassen.

Einzelne Artikel können auch eine andere Größe oder Form haben, um mehr Inhalte anzuzeigen und Elemente leichter voneinander unterscheiden können.

Hebe ein Hero-Element hervor. Wenn das Layout einen bestimmten Fokus hat, z. B. ein Bild oder Video einfügen, es bei Vergrößerung des App-Fensters maximieren, damit der Nutzer Aufmerksamkeit. Andere unterstützende Elemente können um oder unter dem Hero-Ansicht.

Es gibt viele Möglichkeiten, ein solches Layout zu erstellen, aber ConstraintLayout ist die für diesen Zweck besonders geeignet sind, da sie viele Möglichkeiten bietet, die Größe einer untergeordneten Ansicht einschränken, z. B. durch Prozentsatz oder Erzwingen eines Aspekts und ihre untergeordneten Elemente relativ zu sich selbst oder zu anderen Kinder. Weitere Informationen zu all diesen Funktionen finden Sie unter Erstellen Sie eine responsive UI mit ConstraintLayout.

Minimierbare Inhalte standardmäßig anzeigen. Wenn Platz frei ist, die sonst nur für zusätzliche Nutzer zugänglich wären wie Tippen, Scrollen oder Gesten. Zum Beispiel Inhalte, die erscheint in einer Registerkarten-Oberfläche, wenn kompakter stattdessen Spalten oder eine Liste anzeigen, wenn mehr Platz verfügbar ist.

Gewinnmargen erhöhen. Wenn der Raum so groß ist, dass Sie keinen ansprechenden selbst nachdem Sie alle Inhalte genutzt haben, und erweitern Sie dann die Ränder des sodass der Inhalt zentriert bleibt und die einzelnen Aufrufe natürlichen Größen und Abstand dazwischen.

Alternativ kann eine Vollbildkomponente in ein unverankertes Dialogfeld umgewandelt werden. UI. Dies ist besonders gut geeignet, wenn für diese Komponente exklusive sich darauf konzentrieren, eine unmittelbare Aufgabe der Nutzenden zu erfüllen, wie das Schreiben einer E-Mail oder Erstellen eines Kalendertermins.

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

</ph> Abbildung 3: Vollbilddialogfeld, das in ein Standarddialogfeld umgewandelt wurde mit mittlerer und maximierter Breite.

Inhalte hinzufügen

Kanonische Layouts: unterstützender Bereich, Listenansicht mit Details

Verwenden Sie ein unterstützendes Fenster. In einem unterstützenden Bereich werden zusätzliche Inhalte oder Kontextaktionen in Bezug auf den primären Inhalt, wie Kommentare in einer Dokument oder Elemente in einer Playlist. Normalerweise wird das untere Drittel des Bildschirm für die maximierte Höhe und das nachgestellte Drittel für die maximierte Breite.

Eine wichtige Überlegung ist, wo diese Inhalte platziert werden sollen, wenn um den Bereich anzuzeigen. Hier sind einige Alternativen:

• Seitliche Leiste am hinteren Rand mit DrawerLayout
• Untere Leiste mit BottomSheetBehavior
• Menü- oder Pop-up-Fenster, auf das durch Tippen auf ein Menüsymbol zugegriffen werden kann

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder"> <ph type="x-smartling-placeholder">

</ph> Abbildung 4: Alternative Möglichkeiten zur Präsentation zusätzlicher Inhalte in einem Supportbereich.

Erstellen Sie ein Layout mit zwei Bereichen. Auf großen Bildschirmen kann eine Kombination Funktionen, die auf kleineren Bildschirmen normalerweise separat angezeigt werden. Eine gemeinsame ist es in vielen Apps, eine Liste mit Elementen wie Kontakten oder und zum Detail eines Elements wechseln, wenn es ausgewählt ist. Anstatt die Liste für größere Bildschirme zu vergrößern, verwenden Sie die Listenansicht um beide Features nebeneinander in einem Zweifensterlayout anzuzeigen. Gefällt mir nicht unterstützenden Bereich ist der Detailbereich einer Listen-Detailansicht ein eigenständiges -Element, das auf kleineren Bildschirmen einzeln angezeigt werden kann.

Verwenden Sie die Methode SlidingPaneLayout Widget zur Implementierung einer Listen-Detailansicht. Dieses berechnet, ob genügend Platz vorhanden ist, um beide basierend auf dem layout_width-Wert, der für die beiden Bereiche angegeben wurde, und übriger Speicherplatz kann mit layout_weight verteilt werden. Wenn es nicht genügend Platz hat, nutzt jedes Fenster die volle Breite des Layouts und Detailbereich gleitet entweder aus dem Bildschirm heraus oder über den Listenbereich.

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

Abbildung 5: SlidingPaneLayout mit zwei maximierten Bereichen und ein Fenster in kompakter Breite.

Der Abschnitt Layout mit zwei Bereichen erstellen enthält mehr Details zur Verwendung von SlidingPaneLayout Beachten Sie außerdem, dass dieses Muster wie Sie Ihr Navigationsdiagramm strukturieren (siehe Navigation für responsive UIs).

Weitere Informationen

• Material Design – Layout anwenden