Ritagli in Scrivi

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

Figura 1. Esempio di sagoma in modalità Ritratto

Figura 2. Esempio di sagoma 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 anche supportare i ritagli del display sui dispositivi con Android 8.1 o versioni precedenti.

Questa pagina descrive come implementare il supporto per i dispositivi con ritagli in Scrivi, incluso come lavorare con l'area di taglio, ovvero il rettangolo bordo a bordo sulla superficie del display che contiene il ritaglio.

Maiuscole predefinite

Per impostazione predefinita, i ritagli di visualizzazione sono inclusi nelle informazioni dei riquadri delle finestre. Per questo motivo, l'app non sarà visibile nelle aree ritagliate del display quando segui la guida su come ottimizzarla.

Ad esempio, quando usi Modifier.windowInsetsPadding(WindowInsets.safeContent) o Modifier.windowInsetsPadding(WindowInsets.safeDrawing), la tua app automaticamente non disegna nelle aree in cui è stato inserito un ritaglio. WindowInsets.safeContent e WindowInsets.safeDrawing contengono entrambi informazioni di ritaglio del display e non disegnano dove si trova un 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 personalmente le informazioni del ritaglio.

Gestire manualmente le informazioni sui ritagli

Puoi gestire i ritagli in uno dei seguenti modi:

• Utilizzo di WindowInsets.displayCutout

• Impostazione nel manifest del tema con android:windowLayoutInDisplayCutoutMode

• Impostare l'opzione in modo programmatico su Window con window.attributes.layoutInDisplayCutoutMode

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

Per Compose, ti consigliamo di impostare windowLayoutInDisplayCutoutMode su default nel tema generale, quindi di utilizzare WindowInsets.displayCutout per gestire gli insiemi dei 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 di displayCutout dove necessario, o di ignorarla dove non è richiesta.

In alternativa, puoi applicare le stesse impostazioni descritte nella documentazione relativa al ritaglio delle viste impostando un'altra opzione per il tema dell'attività android:windowLayoutInDisplayCutoutMode o impostando l'attributo della finestra con window.attributes.layoutInDisplayCutoutMode = LAYOUT_IN_DISPLAY_CUTOUT_MODE_DEFAULT. Tuttavia, la modalità di ritaglio viene applicata a un'intera attività e non può essere controllata per ogni singolo elemento componibile.

Per rispettare il ritaglio del display in alcuni componenti componibili ma non in altri, usa WindowInset.displayCutout. Questa API consente di accedere alle informazioni di ritaglio, se necessario.

Best practice

Quando lavori con ritagli del display, considera quanto segue:

• Presta attenzione al posizionamento degli elementi critici dell'interfaccia utente. Non lasciare che l'area del ritaglio copra testo, controlli o altre informazioni importanti.
• Non posizionare o estendere nell'area di ritaglio eventuali elementi interattivi che richiedono il riconoscimento tramite tocco. La sensibilità del tocco potrebbe essere più bassa nell'area del taglio.
• Quando si seguono le linee guida edge-to-edge, le informazioni di ritaglio vengono incluse negli insiemi safeDrawing / safeContent.
• Se possibile, utilizza Modifier.windowInsetsPadding(WindowInsets.safeDrawing) per determinare la spaziatura interna appropriata da applicare ai contenuti. Evita l'hardcoded dell'altezza della barra di stato, poiché ciò potrebbe causare la sovrapposizione o l'interruzione dei contenuti.

Testa il rendering dei tuoi contenuti con i ritagli

Assicurati di testare tutte le schermate e le esperienze della tua app. Se possibile, esegui i test su dispositivi con diversi tipi di ritagli. Se non hai un dispositivo con un ritaglio, puoi simulare le configurazioni di ritaglio più comuni su qualsiasi dispositivo o emulatore con Android 9 o versioni successive procedendo nel seguente modo:

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

   

   Figura 3. Usa le Opzioni sviluppatore per testare il modo in cui vengono visualizzati i tuoi contenuti.