La piattaforma Android è responsabile del disegno dell'interfaccia utente di sistema, come la barra di stato e la barra di navigazione. Questa interfaccia utente di sistema viene visualizzata indipendentemente dall'app utilizzata dall'utente.
WindowInsets fornisce informazioni sull'interfaccia utente di sistema per garantire che l'app venga disegnata nell'area corretta e che la sua interfaccia utente non sia oscurata dall'interfaccia utente di sistema.
Su Android 14 (livello API 34) e versioni precedenti, l'interfaccia utente dell'app non viene disegnata sotto le barre di sistema e i ritagli del display per impostazione predefinita.
Su Android 15 (livello API 35) e versioni successive, l'app viene disegnata sotto le barre di sistema e i ritagli del display una volta che ha come target l'SDK 35. Ciò si traduce in un'esperienza utente più fluida e consente all'app di sfruttare appieno lo spazio della finestra a sua disposizione.
La visualizzazione dei contenuti dietro l'interfaccia utente di sistema è detta edge-to-edge. In questa pagina scoprirai i diversi tipi di inset, come passare da edge-to-edge e come utilizzare le API inset per animare l'interfaccia utente e assicurarti che i contenuti dell'app non siano oscurati dagli elementi dell'interfaccia utente di sistema.
Nozioni di base sugli inset
Quando un'app passa da edge-to-edge, devi assicurarti che i contenuti e le interazioni importanti non siano oscurati dall'interfaccia utente di sistema. Ad esempio, se un pulsante viene posizionato dietro la barra di navigazione, l'utente potrebbe non essere in grado di farci clic.
Le dimensioni dell'interfaccia utente di sistema e le informazioni sulla sua posizione vengono specificate utilizzando gli inset.
Ogni parte dell'interfaccia utente di sistema ha un tipo di inset corrispondente che ne descrive le dimensioni e la posizione. Ad esempio, gli inset della barra di stato forniscono le dimensioni e la posizione della barra di stato, mentre gli inset della barra di navigazione forniscono le dimensioni e la posizione della barra di navigazione. Ogni tipo di inset è costituito da quattro dimensioni in pixel: superiore, sinistra, destra e inferiore. Queste dimensioni specificano la distanza tra l'interfaccia utente di sistema e i lati corrispondenti della finestra dell'app. Per evitare la sovrapposizione con questo tipo di interfaccia utente di sistema, l'interfaccia utente dell'app deve essere inserita di questo importo.
Questi tipi di inset Android integrati sono disponibili tramite WindowInsets:
Gli inset che descrivono le barre di stato. Si tratta delle barre dell'interfaccia utente di sistema in alto che contengono icone di notifica e altri indicatori. |
|
Gli inset della barra di stato quando sono visibili. Se le barre di stato sono nascoste (a causa dell'inserimento della modalità a schermo intero immersiva), gli inset della barra di stato principale saranno vuoti, ma questi inset non saranno vuoti. |
|
Gli inset che descrivono le barre di navigazione. Si tratta delle barre dell'interfaccia utente di sistema sul lato sinistro, destro o inferiore del dispositivo, che descrivono la barra delle app o le icone di navigazione. Questi possono cambiare in fase di runtime in base al metodo di navigazione preferito dall'utente e all'interazione con la barra delle app. |
|
Gli inset della barra di navigazione quando sono visibili. Se le barre di navigazione sono nascoste (a causa dell'inserimento della modalità a schermo intero immersiva), gli inset della barra di navigazione principale saranno vuoti, ma questi inset non saranno vuoti. |
|
L'inset che descrive la decorazione della finestra dell'interfaccia utente di sistema se in una finestra a forma libera, come la barra del titolo in alto. |
|
Gli inset della barra del titolo quando sono visibili. Se le barre del titolo sono nascoste, gli inset della barra del titolo principale saranno vuoti, ma questi inset non saranno vuoti. |
|
L'unione degli inset della barra di sistema, che include le barre di stato, le barre di navigazione e la barra del titolo. |
|
Gli inset della barra di sistema quando sono visibili. Se le barre di sistema sono nascoste (a causa dell'inserimento della modalità a schermo intero immersiva), gli inset della barra di sistema principale saranno vuoti, ma questi inset non saranno vuoti. |
|
Gli inset che descrivono la quantità di spazio nella parte inferiore occupata dalla tastiera su schermo. |
|
Gli inset che descrivono la quantità di spazio occupata dalla tastiera su schermo prima dell'animazione della tastiera corrente. |
|
Gli inset che descrivono la quantità di spazio che la tastiera su schermo occuperà dopo l'animazione della tastiera corrente. |
|
Un tipo di inset che descrive informazioni più dettagliate sull'interfaccia utente di navigazione, fornendo la quantità di spazio in cui i "tocchi" verranno gestiti dal sistema e non dall'app. Per le barre di navigazione trasparenti con navigazione tramite gesti, alcuni elementi dell'app possono essere toccabili tramite l'interfaccia utente di navigazione del sistema. |
|
Gli inset dell'elemento toccabile quando sono visibili. Se gli elementi toccabili sono nascosti (a causa dell'inserimento della modalità a schermo intero immersiva), gli inset dell'elemento toccabile principale saranno vuoti, ma questi inset non saranno vuoti. |
|
Gli inset che rappresentano la quantità di inset in cui il sistema intercetterà i gesti per la navigazione. Le app possono specificare manualmente la gestione di una quantità limitata di questi gesti utilizzando |
|
Un sottoinsieme dei gesti di sistema che verranno sempre gestiti dal sistema e per i quali non è possibile disattivare l'utilizzo di |
|
Gli inset che rappresentano la quantità di spaziatura necessaria per evitare la sovrapposizione con un ritaglio display (notch o foro centrale). |
|
Gli inset che rappresentano le aree curve di un display a cascata. Un display a cascata ha aree curve lungo i bordi dello schermo in cui lo schermo inizia a avvolgere i lati del dispositivo. |
Questi tipi sono riassunti da tre tipi di inset "sicuri" che garantiscono che i contenuti non siano oscurati:
Questi tipi di inset "sicuri" proteggono i contenuti in modi diversi, in base agli inset della piattaforma sottostante:
- Utilizza
WindowInsets.safeDrawingper proteggere i contenuti che non devono essere disegnati sotto l'interfaccia utente di sistema. Questo è l'utilizzo più comune degli inset: impedire il disegno di contenuti oscurati dall'interfaccia utente di sistema (parzialmente o completamente). - Utilizza
WindowInsets.safeGesturesper proteggere i contenuti con i gesti. In questo modo si evita che i gesti di sistema si scontrino con i gesti dell'app (ad esempio quelli per i fogli inferiori, i caroselli o nei giochi). - Utilizza
WindowInsets.safeContentcome combinazione diWindowInsets.safeDrawingeWindowInsets.safeGesturesper assicurarti che i contenuti non abbiano sovrapposizioni visive e di gesti.
Consigliati per te
- Nota: il testo del link viene visualizzato quando JavaScript è disattivato
- Componenti e layout di Material
- Migrare
CoordinatorLayouta Compose - Altre considerazioni