Diese Seite wurde von der Cloud Translation API übersetzt.

Responsives/adaptives Design mit Ansichten

Responsive/adaptive Layouts bieten eine optimierte User Experience, Bildschirmgröße. Implementieren Sie responsive/adaptive Layouts, um Ihre ansichtsbasierte App unterstützt alle Displaygrößen, -ausrichtungen und einschließlich anpassbarer Konfigurationen wie Mehrfenstermodus Modus an.

Responsives Design

Der erste Schritt zur Unterstützung einer Vielzahl von Geräteformfaktoren besteht darin, Layout, das auf Änderungen der verfügbaren Anzeigefläche reagiert zu Ihrer App hinzufügen.

Einschränkungslayout

Am besten erstellen Sie ein responsives Layout, ConstraintLayout als Basislayout für Ihre UI. Mit ConstraintLayout können Sie die Position und Größe jeder Ansicht entsprechend den räumlichen Beziehungen zu anderen Ansichten im Layout. Alle Ansichten können dann gemeinsam verschoben und vergrößert bzw. verkleinert werden, je nachdem, Änderungen an der Display-Anzeigefläche.

Am einfachsten erstellen Sie ein Layout mit ConstraintLayout über das Layout Editor in Android Studio. Im Layout-Editor können Sie neue Ansichten Layout, Einschränkungen relativ zu übergeordneten und gleichgeordneten Ansichten anwenden und Ansicht festlegen ohne die XML-Datei manuell bearbeiten zu müssen.

</ph> **Abbildung 3**: Der Layout-Editor in Android Studio mit einer `ConstraintLayout`

Weitere Informationen finden Sie unter Responsive UI erstellen mit ConstraintLayout

Responsive Breite und Höhe

Um sicherzustellen, dass Ihr Layout auf verschiedene Displaygrößen reagiert, verwenden Sie wrap_content, match_parent oder 0dp (match constraint) für die Breite und Höhe von Ansichtskomponenten anstelle von hartcodierten Werten:

wrap_content: Die Größe der Ansicht wird an den Inhalt der Ansicht angepasst.
match_parent: Die Ansicht wird in der übergeordneten Ansicht so weit wie möglich erweitert.
0dp (match constraint): In einer ConstraintLayout, ähnlich wie match_parent Die Ansicht nimmt den gesamten verfügbaren Platz in der Ansicht Einschränkungen.

Beispiel:

<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="@string/lorem_ipsum" />

In Abbildung 4 siehst du, wie sich Breite und Höhe von TextView an das Display anpassen. mit der Geräteausrichtung ändert.

</ph> **Abbildung 4**: Ein responsives `TextView`.

Die Breite von TextView wird so festgelegt, dass der gesamte verfügbare Bereich ausgefüllt wird (match_parent). von der Höhe der enthaltenen Text (wrap_content), mit dem sich die Ansicht an verschiedene Einblendungen anpasst und unterschiedliche Textmengen verwenden.

Wenn Sie ein LinearLayout verwenden, Er kann die untergeordneten Ansichten auch je nach Layout erweitern. Gewichtung, damit die Aufrufe proportional zur den verfügbaren Platz. Die Verwendung von Gewichtungen in einem verschachtelten LinearLayout erfordert jedoch, mehrere Layoutübergänge durchzuführen, um die Größe für jeden Durchlauf zu ermitteln. was die Leistung der Benutzeroberfläche beeinträchtigt.

ConstraintLayout kann fast alle Layouts erstellen, die mit LinearLayout ohne Leistungseinbußen. Konvertieren Sie daher die verschachtelte LinearLayout bis ConstraintLayout Dann haben Sie kann gewichtete Layouts mit Einschränkung definieren

Adaptives Design

Das Layout Ihrer App sollte immer auf verschiedene Displaygrößen reagieren. Aber selbst ein responsives Layout kann nicht die beste User Experience auf jedem Gerät oder auf dem Mehrfenstermodus angezeigt werden. Zum Beispiel kann die UI, die für ein Smartphone entwickelt wurden, Tablet. Adaptives Design bietet alternative Layouts, die für verschiedene Anzeigedimensionen.

SlidingPaneLayout für Benutzeroberflächen mit Listendetails

Eine Benutzeroberfläche mit Listendetails bietet in der Regel eine andere User Experience auf Bildschirmen unterschiedlicher Größe. Auf großen Bildschirmen sind die Listen- und Detailbereiche in der Regel direkt nebeneinander. Wenn ein Eintrag in der Liste ausgewählt wird, werden die Artikelinformationen werden im Detailbereich angezeigt, ohne die Benutzeroberfläche zu ändern. Die beiden Bereiche bleiben direkt nebeneinander. Auf kleinen Bildschirmen werden die beiden Bereiche jedoch separat angezeigt. jeweils den gesamten Anzeigebereich ein. Wenn ein Element im Listenbereich ausgewählt, ersetzt der Detailbereich (mit den Informationen zum ausgewählten Element) im Listenbereich. Bei der Rückwärtsnavigation wird der Detailbereich durch die Liste ersetzt.

SlidingPaneLayout verwaltet die Logik, um zu bestimmen, welche der beiden an die aktuelle Fenstergröße anpassen:

<?xml version="1.0" encoding="utf-8"?>
<androidx.slidingpanelayout.widget.SlidingPaneLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="280dp"
        android:layout_height="match_parent"
        android:layout_gravity="start" />

    <androidx.fragment.app.FragmentContainerView
        android:id="@+id/nav_host_fragment"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="300dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        app:defaultNavHost="true"
        app:navGraph="@navigation/item_navigation" />

</androidx.slidingpanelayout.widget.SlidingPaneLayout>

Die Attribute layout_width und layout_weight der beiden Ansichten in SlidingPaneLayout bestimmen das SlidingPaneLayout-Verhalten. In diesem Beispiel Ist das Fenster groß genug (mindestens 580 dp), um beide Ansichten anzuzeigen, Fenster nebeneinander angezeigt werden. Wenn jedoch die Fensterbreite kleiner ist als 580 dp bewegen sich die Bereiche übereinander, sodass sie die gesamte App belegen .

Wenn die Fensterbreite größer als die angegebene Mindestbreite (580 dp) ist, layout_weight-Werte können verwendet werden, um die Größe der beiden Bereiche proportional zu bestimmen. Im Beispiel: Der Listenbereich ist immer 280 dp breit, da er keine Gewichtung hat. Der Detailbereich füllt jedoch immer jede horizontale Fläche über 580 dp aus, weil der Einstellung layout_weight der Ansicht.

Ressourcen zu alternativen Layouts

Verwenden Sie alternative Layouts, um Ihr UI-Design an stark unterschiedliche Anzeigegrößen anzupassen nach Ressource identifiziert Kennzeichner.

</ph> **Abbildung 5**: Dieselbe App mit unterschiedlichen Layouts für unterschiedliche Displaygrößen

Sie können adaptive, bildschirmspezifische Layouts bereitstellen, indem Sie zusätzliche res/layout/-Verzeichnisse im Quellcode deiner App. Erstellen Sie jeweils ein Verzeichnis Bildschirmkonfiguration, die ein anderes Layout erfordert. Fügen Sie dann einen Bildschirm Konfigurationsqualifizierer für den Verzeichnisnamen layout (z. B. layout-w600dp für Bildschirme mit einer verfügbaren Breite von 600 dp).

Die Konfigurationsqualifizierer stellen den sichtbaren Anzeigeraum dar, der für Ihre App-UI. Das System berücksichtigt alle Dekorationen des Systems, z. B. Navigationsleiste) und Änderungen der Fensterkonfiguration (z. B. Mehrfenstermodus) Modus) beim Auswählen des Layouts für Ihre App.

Informationen zum Erstellen alternativer Layouts in Android Studio finden Sie unter Mit Layoutvarianten für verschiedene Bildschirme UI mit Ansichten entwickeln

Qualifizierer für die kleinste Breite

Mit dem Qualifier für die geringste Breite können Sie alternative Layouts für Displays mit einer in dichteunabhängigen Abmessungen gemessenen Mindestbreite Pixel (dp).

Durch die Beschreibung der Bildschirmgröße anhand des dp-Werts können Sie Layouts, die für bestimmte Displayabmessungen entwickelt wurden, mit unterschiedlichen Pixeldichten.

Sie können beispielsweise ein Layout mit dem Namen main_activity erstellen, das für Telefone und Tablets verwenden, indem Sie verschiedene Versionen der Datei in unterschiedlichen Verzeichnisse enthalten:

res/layout/main_activity.xml           # For phones (smaller than 600dp smallest width)
res/layout-sw600dp/main_activity.xml   # For 7" tablets (600dp wide or wider)

Der Qualifier für die kleinste Breite gibt die kleinste der beiden Seiten des Displays an. unabhängig von der aktuellen Ausrichtung des Geräts. So können Sie verfügbare Gesamtanzeigegröße für Ihr Layout.

So entsprechen andere Werte für die kleinste Breite typischen Bildschirmgrößen:

320 dp: kleines Smartphone-Display (240 x 320 ldpi, 320 x 480 mdpi, 480 x 800 hdpi usw.)
480 dp: Großes Smartphone-Display ~5" (480x800 mdpi)
600 dp: 7" Tablet (600 x 1024 mdpi)
720 dp: 10" Tablet (720 x 1280 mdpi, 800 x 1280 mdpi usw.)

Die folgende Abbildung zeigt eine detailliertere Ansicht der Bildschirmauflösung von die verschiedenen Bildschirmgrößen und -ausrichtungen entsprechen.

</ph> **Abbildung 6**: Empfohlene Haltepunkte für die Breite zur Unterstützung unterschiedlicher Bildschirmgrößen.

Werte für den Qualifier geringste Breite sind "dp", da der Wert Verfügbarer Anzeigebereich, nachdem das System die Pixeldichte berücksichtigt hat (nicht die unverarbeitete Pixelauflösung).

Die Größen, die Sie mithilfe von Ressourcenqualifizierern wie der kleinsten Breite angeben, nicht an die tatsächliche Bildschirmgröße. Vielmehr geben die Größen die Breite oder Höhe in Für das App-Fenster verfügbare dp-Einheiten. Das Android-System verwendet möglicherweise der System-UI angezeigt wird, z. B. in der Systemleiste unten oder die Statusleiste oben angezeigt werden, sodass ein Teil des Bildschirms die für Ihr Layout verfügbar sind. Wenn deine App im Mehrfenstermodus verwendet wird, Die App hat nur Zugriff auf die Größe des Fensters, das die App enthält. Wenn der Parameter Fenstergröße angepasst wird, löst dies eine Konfiguration mit der neuen Fenstergröße, die ermöglicht es dem System, eine geeignete Layoutdatei auszuwählen. Die Ressource von Ihnen deklarierte Größen der Kennzeichner sollten nur den für Ihre App erforderlichen Platz angeben. Das System berücksichtigt den von der System-UI verwendeten Speicherplatz, wenn er Platz für Ihres Layouts.

Verfügbarer Breitenqualifizierer

Anstatt das Layout an die kleinste Breite des Bildschirms anzupassen, können Sie Ihr Layout an die verfügbare Breite oder Höhe anpassen. Sie können z. B. ein Zwei-Fenster-Layout verwenden, mindestens 600 dp Breite, die sich ändern kann, je nachdem, Gerät im Quer- oder Hochformat befindet. In diesem Fall sollten Sie die Methode available width (Breite) so aus:

res/layout/main_activity.xml         # For phones (smaller than 600dp available width)
res/layout-w600dp/main_activity.xml  # For 7" tablets or any screen with 600dp available width
                                     # (possibly landscape phones)

Wenn die verfügbare Höhe für Ihre App ein Problem darstellt, können Sie die available_height [Höhe] angeben. Beispiel: layout-h600dp für Bildschirme mit Bildschirmhöhe von mindestens 600 dp.

Ausrichtungsqualifizierer

Auch wenn Sie möglicherweise alle Größenvarianten mit nur Kombinationen der Kennzeichner für die kleinste Breite und die verfügbare Breite verwenden, können Sie Außerdem möchten sie die Nutzererfahrung ändern, wenn sie zwischen Hochformat wechseln. und Querformat verwenden.

Dazu können Sie Ihrem Layoutverzeichnis die Qualifizierer port oder land hinzufügen. Namen. Dabei sollten Sie jedoch darauf achten, dass die Ausrichtungsqualifizierer hinter den Größenbezeichnern stehen. Beispiel:

res/layout/main_activity.xml                # For phones
res/layout-land/main_activity.xml           # For phones in landscape
res/layout-sw600dp/main_activity.xml        # For 7" tablets
res/layout-sw600dp-land/main_activity.xml   # For 7" tablets in landscape

Weitere Informationen zu allen Kennzeichnern für die Bildschirmkonfiguration finden Sie unter App-Kampagnen Ressourcenübersicht.

Fenstergrößenklassen

Fenstergrößenklassen sind Haltepunkte für den Darstellungsbereich, mit denen Sie adaptive Layouts. Die Haltepunkte geben den für Ihre App verfügbaren Anzeigebereich als compact, medium oder expanded. Breite und Höhe werden separat angegeben. Ihre App hat also immer eine Fenstergrößenklasse für die Breite und eine Fenstergrößenklasse für Höhe.

So wenden Sie adaptive Layouts programmatisch an:

Layoutressourcen basierend auf den Haltepunkten für die Fenstergröße erstellen
Berechnen Sie die Fenstergrößenklassen für Breite und Höhe Ihrer App mithilfe des WindowSizeClass#compute() des Jetpack WindowManager Bibliothek
Layout-Ressource für die aktuellen Fenstergrößenklassen aufblähen

Weitere Informationen finden Sie unter Fenstergröße Klassen.

Modularisierte UI-Komponenten mithilfe von Fragmenten

Verwenden Sie beim Entwerfen Ihrer App für mehrere Anzeigegrößen Fragmente, um UI-Logik in separate Komponenten aufzuteilen, um sicherzustellen, Duplizieren des UI-Verhaltens über verschiedene Aktivitäten hinweg. Dann können Sie Fragmente erstellen Sie Layouts mit mehreren Fenstern auf großen Bildschirmen oder platzieren Sie Fragmente Aktivitäten auf kleinen Bildschirmen.

Zum Beispiel das Muster aus list-detail (siehe SlidingPaneLayout) könnte mit einer Fragment, das die Liste enthält, und ein weiteres Fragment, das das Listenelement enthält Details. Auf großen Bildschirmen könnten die Fragmente nebeneinander angezeigt werden, am kleine Bildschirme, die jeweils einzeln den ganzen Bildschirm ausfüllen.

Weitere Informationen finden Sie in der Übersicht zu Fragmenten.

Eingebettete Aktivitäten

Wenn deine App aus mehreren Aktivitäten besteht, kannst du mithilfe der Einbettung von Aktivitäten Folgendes: eine adaptive Benutzeroberfläche erstellen.

Beim Einbetten von Aktivitäten werden mehrere Aktivitäten oder mehrere Instanzen des gleichzeitig im Aufgabenfenster einer Anwendung. Auf großen Bildschirmen können Aktivitäten nebeneinander angezeigt werden. auf kleinen Bildschirmen, übereinander gestapelt des anderen sind.

Sie legen fest, wie Ihre App ihre Aktivitäten anzeigt, indem Sie eine XML-Datei erstellen Konfigurationsdatei, mit der das System die geeignete der Anzeigegröße anpassen. Alternativ können Sie Jetpack- WindowManager-API Anrufe.

Die Einbettung von Aktivitäten unterstützt Änderungen der Geräteausrichtung und faltbare Geräte, Das Stapeln und Entstapeln von Aktivitäten, wenn sich das Gerät dreht oder auf- bzw. zuklappt.

Weitere Informationen finden Sie unter Aktivität Einbettung.

Bildschirmgrößen und Seitenverhältnisse

Teste deine App auf verschiedenen Bildschirmgrößen und Seitenverhältnissen, um deine Benutzeroberfläche zu überprüfen richtig skaliert wird.

Android 10 (API-Level 29) und höher unterstützen viele verschiedene Seitenverhältnisse. Der Formfaktor des faltbaren Smartphones kann sich von hohen, schmalen Displays unterscheiden, z. B. 21:9, wenn auf ein quadratisches Seitenverhältnis von 1:1.

Um die Kompatibilität mit möglichst vielen Geräten sicherzustellen, solltest du deine Apps der folgenden Seitenverhältnisse wie möglich verwenden:

</ph> **Abbildung 7**: Verschiedene Bildschirmseitenverhältnisse

Wenn Sie keinen Zugriff auf Geräte mit den unterschiedlichen Bildschirmgrößen haben, können Sie den Android-Emulator verwenden. fast jeder Bildschirmgröße.

Wenn Sie es lieber auf einem echten Gerät testen möchten, es aber nicht haben, können Sie das Firebase Test Lab, um auf in einem Google-Rechenzentrum.

Weitere Informationen

Material Design – Layout verstehen