Display-Aussparungen unterstützen

Schreiben Sie jetzt
Jetpack Compose ist das empfohlene UI-Toolkit für Android. Informationen zum Arbeiten mit Display-Aussparungen in „Schreiben“
<ph type="x-smartling-placeholder"></ph> Aussparungen im Editorfenster anzeigen →

Eine Display-Aussparung ist ein Bereich auf einigen Geräten. bis in die Display-Oberfläche hinein. Sie ermöglicht ein Edge-to-Edge-Erlebnis. und Platz für wichtige Sensoren an der Vorderseite des Geräts.

Android unterstützt Display-Aussparungen auf Geräten mit Android 9 (API-Level 28) und höher liegen. Gerätehersteller können Display-Aussparungen auch auf mit Android 8.1 oder niedriger.

In diesem Dokument wird beschrieben, wie Geräte mit Aussparungen unterstützt werden, einschließlich der Arbeit mit dem Aussparungsbereich, d. h. vom Rand zu Rand, Rechteck auf der Displayoberfläche, das die Aussparung enthält.

<ph type="x-smartling-placeholder">
</ph> Ein Bild, das ein Beispiel für einen Display-Aussparung oben in der Mitte zeigt <ph type="x-smartling-placeholder">
</ph> Abbildung 1: 1 Display aus.

Festlegen, wie die App mit Ausschnitten umgehen soll

Wenn du nicht möchtest, dass sich dein Inhalt mit einem Aussparungsbereich überschneidet, solltest du um sicherzustellen, dass sich Ihre Inhalte nicht mit der Statusleiste und den Navigationsleiste. Beim Rendern im Aussparungsbereich verwenden Sie WindowInsetsCompat.getDisplayCutout() um ein DisplayCutout-Objekt abzurufen die die sicheren Einsätze und den Begrenzungsrahmen für jede Aussparung enthält. Mit diesen APIs überprüfen Sie, ob sich der Inhalt mit der Aussparung überschneidet, bei Bedarf neu positionieren.

Du kannst auch bestimmen, ob der Inhalt hinter dem Aussparungsbereich liegt. Die layoutInDisplayCutoutMode Das Fenster-Layout-Attribut steuert, wie Ihr Inhalt im Aussparungsbereich gezeichnet wird. Sie können für layoutInDisplayCutoutMode einen der folgenden Werte festlegen:

  • LAYOUT_IN_DISPLAY_CUTOUT_MODE_DEFAULT: Inhalt wird im Aussparungsbereich gerendert, wenn sich die Display-Aussparung in einem Systemleiste. Andernfalls überlappt das Fenster nicht die Display-Aussparung. für Beispielsweise kann Content im Querformat mit Letterbox-Balken dargestellt werden. Wenn deine App auf SDK 35 ausgerichtet ist, wird dies als ALWAYS bei nicht-schwebenden Fenster.
  • LAYOUT_IN_DISPLAY_CUTOUT_MODE_ALWAYS: darf sich der Inhalt immer in die ausgeschnittenen Bereiche ausdehnen. Wenn Ihre App auf SDK 35 und wird auf einem Android 15-Gerät ausgeführt. Dies ist der einzige zulässige Modus für nicht unverankerte Fenster, um eine randlose Anzeige zu gewährleisten.
  • LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES: Inhalte werden sowohl im Hoch- als auch im Querformat im Aussparungsbereich gerendert. Das sollten Sie nicht tun: unverankerten Fenster verwenden. Wenn Ihre App auf SDK 35 ausgerichtet ist, wird dies als ALWAYS für nicht unverankerte Fenster.
  • LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER: wird der Inhalt nie in den Aussparungsbereich gerendert. Wenn Ihre App auf SDK 35 ausgerichtet ist, als ALWAYS für nicht unverankerte Fenster interpretiert.

Sie können den Ausschneidemodus entweder programmatisch oder durch Festlegen eines Style in deine Aktivität einfließen lassen. Die folgenden Beispiel definiert einen Stil zum Anwenden der LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES der Aktivität zuordnen.

<style name="ActivityTheme">
  <item name="android:windowLayoutInDisplayCutoutMode">
    shortEdges <!-- default, shortEdges, or never -->
  </item>
</style>

In den folgenden Abschnitten werden die verschiedenen Aussparungsmodi ausführlicher beschrieben.

Standardverhalten

Wenn Ihre App auf SDK 35 ausgerichtet ist und auf einem Gerät mit Android 15 ausgeführt wird, LAYOUT_IN_DISPLAY_CUTOUT_MODE_ALWAYS ist das Standardverhalten und LAYOUT_IN_DISPLAY_CUTOUT_MODE_DEFAULT wird interpretiert als LAYOUT_IN_DISPLAY_CUTOUT_MODE_ALWAYS für nicht unverankerte Fenster.

Andernfalls ist LAYOUT_IN_DISPLAY_CUTOUT_MODE_DEFAULT die Standardeinstellung.

Inhalt in kurzen Aussparungsbereichen rendern

Wenn Ihre App auf SDK 35 ausgerichtet ist und auf einem Gerät mit Android 15 ausgeführt wird, LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES wird interpretiert als LAYOUT_IN_DISPLAY_CUTOUT_MODE_ALWAYS für nicht unverankerte Fenster.

Mit LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES kann das Inhalte in der Aussparung an der kurzen Seite des Displays in beiden Hoch- und Querformat, unabhängig davon, ob die Systemleisten verborgen oder sichtbar sind. Achten Sie bei Verwendung dieses Modus darauf, dass sich keine wichtigen Inhalte mit aus dem Aussparungsbereich.

Das folgende Bild ist ein Beispiel für LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES. für ein Gerät im Hochformat:

<ph type="x-smartling-placeholder">
</ph> Ein Bild, auf dem zu sehen ist, wie Inhalte im Porträtmodus in der Aussparung gerendert werden <ph type="x-smartling-placeholder">
</ph> Abbildung 2: Inhalt wird im Aussparungsbereich gerendert im Hochformat.

Das folgende Bild ist ein Beispiel für LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES. für ein Gerät im Querformat:

<ph type="x-smartling-placeholder">
</ph> Ein Bild, auf dem zu sehen ist, wie der Inhalt im Querformat im Aussparungsbereich gerendert wird <ph type="x-smartling-placeholder">
</ph> Abbildung 3: Inhalt wird im Aussparungsbereich gerendert im Querformat.

In diesem Modus erstreckt sich das Fenster unter Aussparungen an der kurzen Seite des Displays. im Hoch- und Querformat angezeigt, unabhängig davon, ob das Fenster Systemleisten.

Eine Aussparung in der Ecke gilt als an der kurzen Seite:

<ph type="x-smartling-placeholder">
</ph> Ein Bild, das ein Gerät mit einer Eckenaussparung zeigt <ph type="x-smartling-placeholder">
</ph> Abbildung 4: Ein Gerät mit einer Eckaussparung.

Inhalte nie im Display-Aussparungsbereich rendern

Wenn Ihre App auf SDK 35 ausgerichtet ist und auf einem Gerät mit Android 15 ausgeführt wird, LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER wird interpretiert als LAYOUT_IN_DISPLAY_CUTOUT_MODE_ALWAYS für nicht unverankerte Fenster.

Mit LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER darf das Fenster nie Folgendes tun: Aussparung überlappen.

Hier sehen Sie ein Beispiel für LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER in Hochformat:

<ph type="x-smartling-placeholder">
</ph> Ein Bild, das LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER für Hochformat zeigt <ph type="x-smartling-placeholder">
</ph> Abbildung 5: Beispiel für LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER für Hochformat.

Hier sehen Sie ein Beispiel für LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER in Querformat:

<ph type="x-smartling-placeholder">
</ph> Ein Bild, das LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER für das Querformat zeigt <ph type="x-smartling-placeholder">
</ph> Abbildung 6: Beispiel für LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER im Querformat.

Best Practices für die Unterstützung von Display-Aussparungen

Beachten Sie bei der Arbeit mit Display-Aussparungen Folgendes:

  • Achten Sie auf die Platzierung kritischer Elemente auf der Benutzeroberfläche. Lassen Sie die wichtige Textelemente, Steuerelemente oder andere Informationen verdecken.
  • Platzieren oder erweitern Sie keine interaktiven Elemente, die eine feine Berührung erfordern. in den Aussparungsbereich einfügen. Die Berührungsempfindlichkeit ist möglicherweise im ausgeschnitten.
  • Verwenden Sie nach Möglichkeit WindowInsetsCompat bis Rufen Sie die Höhe der Statusleiste ab und bestimmen Sie den entsprechenden Abstand, der angewendet werden soll. zu Ihren Inhalten hinzufügen. Vermeiden Sie eine Hartcodierung der Höhe der Statusleiste, da dies zu oder abgeschnittenen Content.

    <ph type="x-smartling-placeholder">
    </ph> Ein Bild, auf dem zu sehen ist, wie Inhalte oben für eine falsche Einrichtung von Insets geschnitten werden <ph type="x-smartling-placeholder">
    </ph> Abbildung 7: WindowInsetsCompat für Folgendes verwenden: um zu vermeiden, dass sich Inhalte überlappen oder abgeschnitten.
  • View.getLocationInWindow() verwenden um zu ermitteln, wie viel Fensterfläche Ihre App nutzt. Nicht davon ausgehen, dass die App das gesamte Fenster aus und verwenden Sie View.getLocationOnScreen()

  • Verwende die Modi „always“, „shortEdges“ oder „never“ für die Aussparung, wenn deine App in den immersiven Modus wechseln und ihn wieder verlassen. Das Standardverhalten der Aussparung kann dazu führen, App-Inhalte in der Aussparung zu rendern, während die Systemleisten angezeigt, aber nicht im immersiven Modus. Dies führt dazu, dass sich der Inhalt wie im folgenden Beispiel dargestellt.

    <ph type="x-smartling-placeholder">
    </ph> Ein Bild, auf dem zu sehen ist, wie sich Inhalte während Übergängen nach oben und unten bewegen. <ph type="x-smartling-placeholder">
    </ph> Abbildung 8: Beispiel für das Verschieben von Inhalten nach oben und unten bei Übergängen nutzen.
  • Im immersiven Modus sollten Sie Fenster- und Bildschirmkoordinaten mit Bedacht verwenden, Ihre App nutzt im Letterbox-Format nicht den gesamten Bildschirm. Aufgrund der Letterbox-Bild sind die Koordinaten des Bildschirmursprungs nicht mit den Koordinaten identisch. vom Fensterursprung entfernt. Sie können Bildschirmkoordinaten in die nach Bedarf mithilfe von getLocationOnScreen(). In der folgenden Abbildung zeigt, wie sich Koordinaten unterscheiden, wenn Inhalte mit Letterbox-Bild versehen sind:

    <ph type="x-smartling-placeholder">
    </ph> Ein Bild, das Fenster- und Bildschirmkoordinaten zeigt, wenn Inhalte im Letterbox-Format dargestellt werden. <ph type="x-smartling-placeholder">
    </ph> Abbildung 9: Fenster- und Bildschirmkoordinaten, wenn Inhalt mit Letterbox-Bild versehen.
  • Verwenden Sie bei der Verarbeitung von MotionEvent Folgendes: MotionEvent.getX() und Zu vermeidende MotionEvent.getY() Probleme mit Koordinaten. Nicht verwenden MotionEvent.getRawX() oder MotionEvent.getRawY()

Testen, wie deine Inhalte gerendert werden

Testen Sie alle Bildschirme und Nutzererfahrungen Ihrer App. Testen Sie sie auf Geräten mit unterschiedlichen Arten von Aussparungen. Wenn du kein Gerät mit Aussparung hast, kannst du Simuliere gängige Aussparungskonfigurationen auf jedem Android-Gerät oder -Emulator 9 oder höher. Gehen Sie dazu so vor:

  1. Aktivieren Sie Entwickleroptionen.
  2. Scrollen Sie auf dem Bildschirm Entwickleroptionen nach unten zum Abschnitt Zeichnung. und wählen Sie Display mit Aussparung simulieren aus.
  3. Wählen Sie die Art der Aussparung aus.

    <ph type="x-smartling-placeholder">
    </ph> Ein Bild, das zeigt, wie eine Display-Aussparung im Emulator simuliert wird <ph type="x-smartling-placeholder">
    </ph> Abbildung 10: Entwickleroptionen zum Testen der die Inhalte gerendert werden.

Weitere Informationen