Ausschnitte in Compose

Bei einigen Geräten ist eine Display-Aussparung ein Bereich, der in die Displayoberfläche hineinreicht. Sie ermöglicht eine randlose Nutzung und bietet gleichzeitig 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. Gerätehersteller können jedoch auch Display-Aussparungen auf Geräten mit Android 8.1 oder niedriger unterstützen.

Auf dieser Seite wird beschrieben, wie Sie in Composer Geräte mit Aussparungen unterstützen und den Aussparungsbereich verwenden, also das randlose Rechteck auf der Anzeigeoberfläche, das die Aussparung enthält.

Standardfall

Standardmäßig sind Display-Aussparungen in den Informationen für Fenstereinblendungen enthalten. Aus diesem Grund zeichnet deine App nicht in den Display-Aussparungen, wenn du der Anleitung zum randlosen Design folgst.

Wenn Sie beispielsweise Modifier.windowInsetsPadding(WindowInsets.safeContent) oder Modifier.windowInsetsPadding(WindowInsets.safeDrawing) verwenden, zeichnet Ihre App automatisch nicht in den Bereichen, in denen sich eine Aussparung befindet. WindowInsets.safeContent und WindowInsets.safeDrawing enthalten Informationen zur Display-Aussparung und werden nicht an der Stelle gezeichnet, an der sich eine Geräteaussparung befindet.

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)

    WindowCompat.setDecorFitsSystemWindows(window, false)

    setContent {
        Box(Modifier.windowInsetsPadding(WindowInsets.safeContent)) {
            // Any composable inside here will avoid drawing behind cutouts
        }
    }
}
CutoutSnippets.kt

Wenn Sie dieses Verhalten weiter anpassen möchten, müssen Sie die Ausschneideinformationen selbst verarbeiten.

Informationen zu Ausschnitten manuell verarbeiten

Sie haben folgende Möglichkeiten, Bildausschnitte zu bearbeiten:

• WindowInsets.displayCutout wird verwendet

• Einstellung im Designmanifest mit android:windowLayoutInDisplayCutoutMode

• Programmatisch die Option für ein Window mit window.attributes.layoutInDisplayCutoutMode festlegen

• Mit LocalView.current.rootWindowInsets.displayCutout auf das Path-Objekt „Aussparung“ zugreifen

Für „Compose“ wird empfohlen, windowLayoutInDisplayCutoutMode im Gesamtdesign auf default zu setzen und dann WindowInsets.displayCutout zu verwenden, um die Einfügungen in den zusammensetzbaren Funktionen zu verarbeiten:

Canvas(modifier = Modifier.fillMaxSize().windowInsetsPadding(WindowInsets.displayCutout)) {
    drawRect(Color.Red, style = Stroke(2.dp.toPx()))
}
CutoutSnippets.kt

Bei diesem Ansatz können Sie das Padding für displayCutout beibehalten bzw. ignorieren, wenn es nicht erforderlich ist.

Alternativ kannst du dieselben Einstellungen anwenden, die in der Dokumentation zu Views Cutout beschrieben werden. Dazu legst du entweder das Aktivitätsthema android:windowLayoutInDisplayCutoutMode auf eine andere Option fest oder legst das Fensterattribut mithilfe von window.attributes.layoutInDisplayCutoutMode = LAYOUT_IN_DISPLAY_CUTOUT_MODE_DEFAULT fest. Der Ausschneidemodus wird dann jedoch auf eine ganze Aktivität angewendet und kann nicht für jede einzelne zusammensetzbare Funktion gesteuert werden.

Wenn die Display-Aussparung in bestimmten zusammensetzbaren Funktionen beibehalten werden soll, verwenden Sie WindowInset.displayCutout. Mit dieser API können Sie bei Bedarf auf die Aussparungen zugreifen.

Best Practices

Beachten Sie bei der Arbeit mit Display-Aussparungen Folgendes:

• Achten Sie auf die Platzierung kritischer Elemente auf der Benutzeroberfläche. Achten Sie darauf, dass der Aussparungsbereich keinen wichtigen Text, keine Steuerelemente oder andere Informationen verdeckt.
• Platzieren oder erweitern Sie keine interaktiven Elemente, die eine Fein-Touch-Erkennung erfordern, im Aussparungsbereich. Die Berührungsempfindlichkeit ist im Aussparungsbereich möglicherweise niedriger.
• Wenn Sie sich an die randlosen Richtlinien halten, werden Informationen zu Aussparungen in die Einfügungen safeDrawing / safeContent aufgenommen.
• Verwende nach Möglichkeit Modifier.windowInsetsPadding(WindowInsets.safeDrawing), um den geeigneten Abstand für deine Inhalte festzulegen. Vermeiden Sie eine Hartcodierung der Höhe der Statusleiste, da dies zu Überlappungen oder abgeschnittenen Inhalten führen kann.

Darstellung von Inhalten mit Aussparungen testen

Testen Sie alle Bildschirme und Nutzerfreundlichkeit Ihrer App. Testen Sie dies nach Möglichkeit auf Geräten mit verschiedenen Aussparungen. Wenn Sie kein Gerät mit einer Aussparung haben, können Sie gängige Aussparungskonfigurationen auf jedem Gerät oder Emulator mit Android 9 oder höher simulieren. 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 Bildschirm mit Aussparung simulieren aus.
3. Wählen Sie die Art der Aussparung aus.

   

Empfehlungen für dich

• Hinweis: Der Linktext wird angezeigt, wenn JavaScript deaktiviert ist.
• Fenstereinblendungen in „Compose“
• Grafikmodifikatoren
• Absatz gestalten