İlerleme göstergesi

CircularProgressIndicator bileşeni, bir işlemin veya belirtilmemiş bir bekleme süresini gösteren döngüsel bir ekrandır.

Tamamlanan bir görevin oranını göstermek için ilerleme göstergelerini kullanın. İlerlemeyi göstermek için bir gösterge, saat yönünde dairesel bir yol boyunca canlandırılır.

Oynat düğmesi gibi bileşenlere ilerleme göstergeleri uygulayabilirsiniz.

Anatomi

A. Parça
B. İlerleme durumunu takip edin

Tasarım önerileri

Boşluklu ilerleme göstergesi

Saat gibi önemli bilgilere yer açmak için boşluk bırakarak ilerleme göstergeleri oluşturun. Boşluk oluşturmak için ilerleme göstergesindeki startAngle ve endAngle değerlerini değiştirin.

Aşağıdaki örnekte gösterildiği gibi boşluklu bir ilerleme göstergesi oluşturun:

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

Küçük ilerleme göstergesi

Belirtilen ilerleme, düğmenin temsil ettiği işlemle doğrudan ilgili olduğunda ve ekran alanı sınırlı olduğunda küçük ilerleme göstergesini doğrudan bir düğmeye uygulayın.

Aşağıdaki örnekte gösterildiği gibi küçük bir ilerleme göstergesi oluşturabilirsiniz:

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

Belirsiz ilerleme göstergesi

Ayarlanmış bir süre olmadığında ilerleme göstergesini kullanırken animasyonlu değere sahip bir ilerleme göstergesi kullanın. Buna döner simge de denir. Alınan bekleme süresini artırabileceğinden döner düğmeleri dikkatli kullanın.

Aşağıdaki örnekte gösterildiği gibi bir belirsiz ilerleme göstergesi oluşturabilirsiniz:

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

Kullanım

Aşağıdaki ilerleme göstergeleri örneklerine bakın.