Assicurati che l'interfaccia utente funzioni con gli inserti della finestra

Mantieni tutto organizzato con le raccolte Salva e classifica i contenuti in base alle tue preferenze.

Una volta che l'attività ha assunto il controllo della gestione di tutti gli insert, puoi utilizzare le API Compose per assicurarti che i contenuti non siano oscurati e che gli elementi interattivi non si sovrappongano all'interfaccia utente di sistema. Queste API sincronizzano anche il layout dell'app con le modifiche dell'inserimento.

Ad esempio, questo è il metodo più semplice per applicare gli insert ai contenuti dell'intera app:

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

    enableEdgeToEdge()

    setContent {
        Box(Modifier.safeDrawingPadding()) {
            // the rest of the app
        }
    }
}
InsetsSnippets.kt

Questo snippet applica gli inserti della finestra safeDrawing come spaziatura attorno all'intero contenuto dell'app. Sebbene ciò garantisca che gli elementi interattivi non si sovrappongano all'interfaccia utente di sistema, significa anche che nessuna parte dell'app verrà disegnata dietro l'interfaccia utente di sistema per ottenere un effetto da bordo a bordo. Per utilizzare appieno l'intera finestra, devi ottimizzare la posizione in cui vengono applicati gli inserti su ogni schermo o componente.

Tutti questi tipi di intestazioni vengono animati automaticamente con le animazioni IME implementate nell'API 21. Di conseguenza, tutti i layout che utilizzano questi inserimenti vengono anche animati automaticamente quando cambiano i valori degli inserimenti.

Esistono due modi principali per utilizzare questi tipi di rientranze per modificare i layout di Composable: modificatori di spaziatura interna e modificatori delle dimensioni dell'incavo.

Modificatori di spaziatura interna

Modifier.windowInsetsPadding(windowInsets: WindowInsets) applica gli rientramenti della finestra specificati come spaziatura interna, proprio come farebbe Modifier.padding. Ad esempio, Modifier.windowInsetsPadding(WindowInsets.safeDrawing) applica gli inserti di disegno sicuri come spaziatura su tutti e quattro i lati.

Esistono anche diversi metodi di utilità integrati per i tipi di intestazione più comuni. Modifier.safeDrawingPadding() è uno di questi metodi, equivalente a Modifier.windowInsetsPadding(WindowInsets.safeDrawing). Esistono modi di modificare analoghi per gli altri tipi di intestazione.

Modificatori delle dimensioni dell'inserimento

I seguenti modificatori applicano una quantità di rientranze della finestra impostando le dimensioni del componente sulle dimensioni delle rientranze:

Questi modificatori sono particolarmente utili per determinare le dimensioni di un Spacer che occupa lo spazio degli inserti:

LazyColumn(
    Modifier.imePadding()
) {
    // Other content
    item {
        Spacer(
            Modifier.windowInsetsBottomHeight(
                WindowInsets.systemBars
            )
        )
    }
}
InsetsSnippets.kt

Consumo in insesto

I modificatori di spaziatura interna (windowInsetsPadding e helper come safeDrawingPadding) utilizzano automaticamente la parte degli inserti che viene applicata come spaziatura interna. Quando entri più in profondità nell'albero della composizione, i modificatori di spaziatura interna nidificati e i modificatori delle dimensioni dell'inserimento interno sanno che alcune parti degli inserimenti sono già state utilizzate dai modificatori di spaziatura interna esterna ed evitano di utilizzare la stessa parte degli inserimenti più di una volta, il che comporterebbe troppo spazio aggiuntivo.

I modificatori delle dimensioni degli inserti evitano inoltre di utilizzare la stessa porzione di inserti più di una volta se gli inserti sono già stati utilizzati. Tuttavia, poiché modificano direttamente le proprie dimensioni, non consumano gli insetti stessi.

Di conseguenza, l'annidamento dei modificatori di spaziatura modifica automaticamente la quantità di spaziatura applicata a ogni composable.

Se guardiamo lo stesso esempio di LazyColumn di prima, LazyColumn viene ridimensionato dal modificatore imePadding. All'interno di LazyColumn, l'ultimo elemento è impostato sull'altezza della parte inferiore delle barre di sistema:

LazyColumn(
    Modifier.imePadding()
) {
    // Other content
    item {
        Spacer(
            Modifier.windowInsetsBottomHeight(
                WindowInsets.systemBars
            )
        )
    }
}
InsetsSnippets.kt

Quando l'IME è chiuso, il modificatore imePadding() non applica spaziatura interna, poiché l'IME non ha altezza. Poiché il modificatore imePadding() non applica spaziatura interna, non vengono utilizzati inset e l'altezza di Spacer sarà uguale alla dimensione del lato inferiore delle barre di sistema.

Quando si apre l'IME, gli inserti dell'IME vengono animati in modo da adattarsi alle dimensioni dell'IME e il modificatore imePadding() inizia ad applicare il padding inferiore per ridimensionare LazyColumn man mano che l'IME si apre. Quando il modificatore imePadding() inizia ad applicare il padding inferiore, inizia anche a consumare questa quantità di rientranze. Pertanto, l'altezza del Spacer inizia a diminuire, poiché parte della spaziatura per le barre del sistema è già stata applicata dal modificatore imePadding(). Una volta che il modificatore imePadding() applica un valore di spaziatura inferiore maggiore rispetto alle barre di sistema, l'altezza di Spacer è pari a zero.

Quando l'IME si chiude, le modifiche avvengono in modo inverso: Spacer inizia a espandersi da un'altezza pari a zero quando imePadding() viene applicato meno del lato inferiore delle barre di sistema, fino a quando Spacer non corrisponde all'altezza del lato inferiore delle barre di sistema una volta che l'IME è completamente animato.

Questo comportamento viene ottenuto tramite la comunicazione tra tutti i modificatori windowInsetsPadding e può essere influenzato in altri modi.

Anche Modifier.consumeWindowInsets(insets: WindowInsets) utilizza gli inserti allo stesso modo di Modifier.windowInsetsPadding, ma non li applica come spaziatura interna. Questo è utile in combinazione con i modificatori di dimensione degli inset per indicare ai fratelli che è stata già consumata una certa quantità di inset:

Column(Modifier.verticalScroll(rememberScrollState())) {
    Spacer(Modifier.windowInsetsTopHeight(WindowInsets.systemBars))

    Column(
        Modifier.consumeWindowInsets(
            WindowInsets.systemBars.only(WindowInsetsSides.Vertical)
        )
    ) {
        // content
        Spacer(Modifier.windowInsetsBottomHeight(WindowInsets.ime))
    }

    Spacer(Modifier.windowInsetsBottomHeight(WindowInsets.systemBars))
}
InsetsSnippets.kt

Modifier.consumeWindowInsets(paddingValues: PaddingValues) si comporta in modo molto simile alla versione con un argomento WindowInsets, ma richiede un PaddingValues arbitrario da consumare. Questo è utile per informare i bambini quando lo spazio interno o lo spazio viene fornito da un altro meccanismo rispetto ai modifi catori di spaziatura interna, ad esempio un normale Modifier.padding o spaziature di altezza fissa:

Column(Modifier.padding(16.dp).consumeWindowInsets(PaddingValues(16.dp))) {
    // content
    Spacer(Modifier.windowInsetsBottomHeight(WindowInsets.ime))
}
InsetsSnippets.kt

Se sono necessari gli inserti della finestra non elaborati senza consumo, utilizza direttamente i valori WindowInsets o WindowInsets.asPaddingValues() per restituire un PaddingValues degli inserti non interessati dal consumo. Tuttavia, a causa dei limiti riportati di seguito, preferite utilizzare i modificatori di spaziatura interna della finestra e i modificatori delle dimensioni degli inserti della finestra, ove possibile.

Inset e fasi di Jetpack Compose

Compose utilizza le API di base di AndroidX per aggiornare e animare gli inserti, che utilizzano le API di piattaforma sottostanti che gestiscono gli inserti. A causa di questo comportamento della piattaforma, gli inset hanno un rapporto speciale con le fasi di Jetpack Compose.

Il valore degli insert viene aggiornato dopo la fase di composizione, ma prima della fase di layout. Ciò significa che la lettura del valore degli inserti nella composizione in genere utilizza un valore degli inserti in ritardo di un fotogramma. I modificatori integrati descritti in questa pagina sono progettati per ritardare l'utilizzo dei valori degli inserti fino alla fase di layout, il che garantisce che i valori degli inserti vengano utilizzati nello stesso frame man mano che vengono aggiornati.