Indicatore avanzamento

Il componente CircularProgressIndicator è una visualizzazione circolare della durata di un processo o di un tempo di attesa altrimenti non specificato.

Utilizza gli indicatori di avanzamento per mostrare la proporzione di un'attività completata. Per mostrare l'avanzamento, viene animato un indicatore lungo una traccia circolare in senso orario.

Puoi applicare indicatori di avanzamento a componenti come un pulsante di riproduzione.

Anatomia

R. Traccia
B. Monitora i progressi

Suggerimenti di progettazione

Indicatore di avanzamento con intervallo

Crea indicatori di avanzamento con un divario per lasciare spazio a informazioni importanti, come l'ora. Per creare un divario, modifica startAngle e endAngle dell'indicatore di avanzamento.

Crea un indicatore di avanzamento con un divario, come mostrato nell'esempio seguente:

CircularProgressIndicator(
    progress = 0.4f,
    modifier = Modifier.fillMaxSize(),
    startAngle = 290f,
    endAngle = 250f,
    strokeWidth = 4.dp
)

Indicatore di avanzamento piccolo

Applica il piccolo indicatore di avanzamento direttamente a un pulsante quando l'avanzamento indicato è direttamente correlato all'azione che il pulsante rappresenta e quando lo spazio sullo schermo è limitato.

Puoi creare un piccolo indicatore di avanzamento, come mostrato nell'esempio seguente:

CircularProgressIndicator(
    progress = 0.75,
    modifier = Modifier.fillMaxSize(),
    startAngle = 0,
    indicatorColor = MaterialTheme.colors.secondary,
    trackColor = MaterialTheme.colors.onBackground.copy(alpha = 0.1f),
    strokeWidth = 4.dp
)

Indicatore di avanzamento indeterminato

Quando utilizzi l'indicatore di avanzamento in situazioni in cui non è previsto alcun tempo impostato, utilizza un indicatore di avanzamento con valore animato. Questa operazione può anche essere chiamata rotellina. Utilizza le rotelline con parsimonia, in quanto possono aumentare i tempi di attesa.

Puoi creare un indicatore di avanzamento indeterminato, come mostrato nell'esempio seguente:

CircularProgressIndicator(
    indicatorColor = MaterialTheme.colors.secondary,
    trackColor = MaterialTheme.colors.onBackground.copy(alpha = 0.1f),
    strokeWidth = 4.dp
)

Utilizzo

Guarda i seguenti esempi di indicatori di avanzamento.