Индикаторы прогресса

CircularProgressIndicator

Компонент CircularProgressIndicator представляет круговой индикатор процесса. Он имеет следующее определение:

@Composable
fun CircularProgressIndicator(
    progress: () -> Float,
    modifier: Modifier = Modifier,
    color: Color = ProgressIndicatorDefaults.circularColor,
    strokeWidth: Dp = ProgressIndicatorDefaults.CircularStrokeWidth,
    trackColor: Color = ProgressIndicatorDefaults.circularDeterminateTrackColor,
    strokeCap: StrokeCap = ProgressIndicatorDefaults.CircularDeterminateStrokeCap,
    gapSize: Dp = ProgressIndicatorDefaults.CircularIndicatorTrackGapSize
): Unit

Параметры функции компонента:

• progress: функция, которая устанавливает значение индикатора в виде объекта Float. Это значение находится в диапазаоне от 0.0 (процесс еще не начался) до 1.0 (завершение процесса).

• modifier: представляет объект Modifier, который определяет модификаторы компонента

• color: цвет индикатора

• strokeWidth: ширина индикатора

• trackColor: цвет дорожки индикатора

• strokeCap: тип линий индикатора

• gapSize: зазор между индикатором и дорожкой

Определим индикацию процесса с помощью CircularProgressIndicator:

package com.example.helloapp

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Column
import androidx.compose.material3.CircularProgressIndicator
import androidx.compose.material3.OutlinedButton
import androidx.compose.material3.Text
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.runtime.setValue
import androidx.compose.ui.unit.sp
import kotlinx.coroutines.delay
import kotlinx.coroutines.launch

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            var progress by remember { mutableStateOf(0.0f) }
            val scope = rememberCoroutineScope()

            Column{
                Text("Статус: $progress", fontSize = 28.sp)
                OutlinedButton(
                    onClick = {
                        if(progress >=1f) progress=0f
                        scope.launch {
                            while (progress < 1f) {
                                progress += 0.1f
                                delay(1000L)
                            }
                        }
                    }
                ) { Text("Запустить", fontSize = 22.sp) }
                CircularProgressIndicator(progress = progress)
            }
        }
    }
}

В данном случае значение компонента CircularProgressIndicator привязано к переменной progress. Для имитации некоторого процесса с помощью функции rememberCoroutineScope определяем контекст корутины и по нажатию на кнопку с его с помощью создаем и заускаем корутину. В этой корутине увеличиваем значение прогресса progress на 0.1f пока не дойдем до значения 1.0. Для имитации долговременной работы применяется задержка на одну секунду с помощью вызова delay():

onClick = {
	scope.launch {
		while (progress < 1f) {
			progress += 0.1f
			delay(1000L)
		}
	}
}

Также компонент имеет еще одну версию:

@Composable
fun CircularProgressIndicator(
    modifier: Modifier = Modifier,
    color: Color = ProgressIndicatorDefaults.circularColor,
    strokeWidth: Dp = ProgressIndicatorDefaults.CircularStrokeWidth,
    trackColor: Color = ProgressIndicatorDefaults.circularIndeterminateTrackColor,
    strokeCap: StrokeCap = ProgressIndicatorDefaults.CircularIndeterminateStrokeCap
): Unit

Эта версия предоставляет бесконечно прокручиваемый индикатор процессе.

package com.example.helloapp

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Box
import androidx.compose.material3.CircularProgressIndicator

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Box{ CircularProgressIndicator() }
        }
    }
}

LinearProgressIndicator

Компонент LinearProgressIndicator представляет линейный индикатор процесса. Он имеет следующее определение:

@Composable
fun LinearProgressIndicator(
    progress: () -> Float,
    modifier: Modifier = Modifier,
    color: Color = ProgressIndicatorDefaults.linearColor,
    trackColor: Color = ProgressIndicatorDefaults.linearTrackColor,
    strokeCap: StrokeCap = ProgressIndicatorDefaults.LinearStrokeCap,
    gapSize: Dp = ProgressIndicatorDefaults.LinearIndicatorTrackGapSize,
    drawStopIndicator: (DrawScope.() -> Unit)? = {
        drawStopIndicator(
            stopSize = ProgressIndicatorDefaults.LinearTrackStopIndicatorSize,
            color = color,
            strokeCap = strokeCap
        )
    }
): Unit

Параметры функции компонента:

• progress: значение индикатора в виде объекта Float. Это значение находится в диапазаоне от 0.0 (процесс еще не начался) до 1.0 (завершение процесса).

• modifier: представляет объект Modifier, который определяет модификаторы компонента

• color: цвет закрашенной части дорожки индикатора (пройденная часть)

• trackColor: цвет незакрашенной части дорожки индикатора (еще непройденная часть)

• strokeCap: тип линий индикатора

• gapSize: зазор между дорожкой и индикатором

• drawStopIndicator: функция, которая вызывается для отрисовки индикатора остановки

Определим индикацию процесса с помощью LinearProgressIndicator:

package com.example.helloapp

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.LinearProgressIndicator
import androidx.compose.material3.OutlinedButton
import androidx.compose.material3.Text

import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import kotlinx.coroutines.delay
import kotlinx.coroutines.launch

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            var progress by remember { mutableStateOf(0.0f) }
            val scope = rememberCoroutineScope()

            Column{
                Text("Статус: $progress", fontSize = 28.sp)
                OutlinedButton(
                    modifier = Modifier.padding(20.dp),
                    onClick = {
                        scope.launch {
                            while (progress < 1f) {
                                progress += 0.1f
                                delay(1000L)
                            }
                        }
                    }
                ) { Text("Запустить", fontSize = 22.sp) }
                LinearProgressIndicator(progress = progress)
            }
        }
    }
}

Здесь параметр progress компонента LinearProgressIndicator привязан к значению переменной progress. Для имитации некоторого процесса с помощью функции rememberCoroutineScope определяем контекст корутины и по нажатию на кнопку с его с помощью создаем и заускаем корутину. В этой корутине увеличиваем значение прогресса progress на 0.1f пока не дойдем до значения 1.0. Для имитации долговременной работы применяется задержка на одну секунду с помощью вызова delay().

Параметры color и trackColor позволяют настроить цветовую схему индикатора:

package com.example.helloapp

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.LinearProgressIndicator
import androidx.compose.material3.OutlinedButton
import androidx.compose.material3.Text
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import kotlinx.coroutines.delay
import kotlinx.coroutines.launch

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            var progress by remember { mutableStateOf(0.0f) }
            val scope = rememberCoroutineScope()

            Column{
                Text("Статус: $progress", fontSize = 28.sp)
                OutlinedButton(
                    modifier = Modifier.padding(20.dp),
                    onClick = {
                        scope.launch {
                            while (progress < 1f) {
                                progress += 0.1f
                                delay(1000L)
                            }
                        }
                    }
                ) { Text("Запустить", fontSize = 22.sp) }
                LinearProgressIndicator(
                    progress = progress,
                    color = Color.DarkGray,
                    trackColor = Color.LightGray
                )
            }
        }
    }
}

Также компонент имеет еще одну версию:

@Composable
fun LinearProgressIndicator(
    modifier: Modifier = Modifier,
    color: Color = ProgressIndicatorDefaults.linearColor,
    trackColor: Color = ProgressIndicatorDefaults.linearTrackColor,
    strokeCap: StrokeCap = ProgressIndicatorDefaults.LinearStrokeCap,
    gapSize: Dp = ProgressIndicatorDefaults.LinearIndicatorTrackGapSize
): Unit

Эта версия предоставляет бесконечно прокручиваемый индикатор процессе. Пример ее применения:

package com.example.helloapp

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.LinearProgressIndicator
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Column{
                LinearProgressIndicator(modifier = Modifier.padding(20.dp))
            }
        }
    }
}