Ritagli in Scrivi

Un ritaglio del display è un'area su alcuni dispositivi che si estende nella superficie del display. Garantisce un'esperienza edge-to-edge, spazio per importanti sensori sulla parte anteriore del dispositivo.

Figura 1. Esempio di ritaglio in modalità Ritratto

Figura 2. Esempio di ritaglio in modalità Orizzontale

Android supporta i ritagli del display sui dispositivi con Android 9 (livello API 28) e versioni successive. Tuttavia, i produttori di dispositivi possono supportare anche i ritagli del display su dispositivi con Android 8.1 o versioni precedenti.

In questa pagina viene descritto come implementare il supporto per i dispositivi con ritagli in Scrivi, comprese le istruzioni su come lavorare con l'area di ritaglio, ovvero l'area da bordo a bordo. rettangolo sulla superficie del display che contiene il ritaglio.

Maiuscole predefinite

Per impostazione predefinita, i ritagli del display sono inclusi nelle informazioni sugli inserti della finestra. Per questo motivo, la tua app non verrà disegnata nelle aree ritagliate del display se segui la guida per creare un'app edge-to-edge.

Ad esempio, quando utilizzi Modifier.windowInsetsPadding(WindowInsets.safeContent) o Modifier.windowInsetsPadding(WindowInsets.safeDrawing), la tua app non disegnerà automaticamente nelle aree in cui è posizionato un ritaglio. WindowInsets.safeContent e WindowInsets.safeDrawing contengono entrambi informazioni sul ritaglio del display e non verranno disegnate dove si trova il ritaglio del dispositivo.

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

Per personalizzare ulteriormente questo comportamento, devi gestire le informazioni di ritaglio per te.

Gestire manualmente le informazioni relative al ritaglio

Puoi gestire i ritagli in uno dei seguenti modi:

• Stai usando WindowInsets.displayCutout

• Impostazione nel file manifest del tema con android:windowLayoutInDisplayCutoutMode

• Impostazione programmatica dell'opzione su Window con window.attributes.layoutInDisplayCutoutMode

• Accesso all'oggetto di ritaglio Path con LocalView.current.rootWindowInsets.displayCutout

Per Compose, ti consigliamo di impostare windowLayoutInDisplayCutoutMode su default nel tuo tema generale, per poi sfruttare WindowInsets.displayCutout per gestire gli inserti nei componibili:

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

Questo approccio ti consente di rispettare la spaziatura interna displayCutout dove richiesto, o ignorarlo dove non è richiesto.

In alternativa, puoi applicare le stesse impostazioni utilizzate nel campo Staglio di viste documentazione descrive impostando dal tema attività android:windowLayoutInDisplayCutoutMode a un altro o impostando l'attributo finestra utilizzando window.attributes.layoutInDisplayCutoutMode = LAYOUT_IN_DISPLAY_CUTOUT_MODE_DEFAULT. Tuttavia, la modalità ritaglio viene applicata a un'intera attività e non può essere controllata per singolo composable.

Per rispettare il ritaglio del display in alcuni composabili, ma non in altri, utilizza WindowInset.displayCutout. che consente di accedere al ritaglio le informazioni necessarie.

Best practice

Quando lavori con ritagli del display, considera quanto segue:

• Fai attenzione al posizionamento di elementi critici dell'interfaccia utente. Non lasciare che l'area di ritaglio oscura testo, controlli o altre informazioni importanti.
• Non posizionare o estendere elementi interattivi che richiedono un riconoscimento accurato all'interno dell'area ritagliata. La sensibilità del tocco potrebbe essere inferiore nella l'area di ritaglio.
• Quando segui le indicazioni da bordo a bordo, le informazioni relative al ritaglio sono incluse negli inserti safeDrawing/safeContent.
• Se possibile, utilizza Modifier.windowInsetsPadding(WindowInsets.safeDrawing) per determinare il padding appropriato da applicare ai tuoi contenuti. Evita hardcoded dell'altezza della barra di stato, poiché ciò può causare sovrapposizioni o tagli contenuti.

Testare il rendering dei contenuti con i ritagli

Assicurati di testare tutte le schermate e le esperienze dell'app. Esegui test su dispositivi con diversi tipi di ritagli, se possibile. Se non hai un dispositivo con ritaglio, puoi simulare configurazioni di ritaglio comuni su qualsiasi dispositivo o emulatore con Android 9 o versioni successive:

1. Attiva le Opzioni sviluppatore.
2. Nella schermata Opzioni sviluppatore, scorri verso il basso fino alla sezione Disegno. e seleziona Simula un display con un ritaglio.
3. Seleziona il tipo di ritaglio.

   

   Figura 3. Usa le Opzioni sviluppatore per testare come vengono visualizzati i tuoi contenuti.