[Compose] SnackBar Duration Custom

https://m3.material.io/components/snackbar/guidelines#74ae61e1-a27a-4543-b3ba-b2391cfe0308

 

 

SnackBar란?

SnackBar는 간단한 메시지를 사용자에게 전달하는 UI 구성 요소로, 주로 아래와 같은 용도로 사용됩니다.

• 정보 전달: 작업의 결과나 상태에 대한 피드백을 제공합니다.
• 사용자 액션 유도: 사용자가 특정 작업을 수행하도록 유도할 수 있습니다(예: "취소" 또는 "다시 시도" 버튼 포함).

 

SnackBar 구현하기

Android Compose에서 SnackBar를 사용하기 위해서는 `Scaffold`와 `SnackbarHost`를 이용해야 합니다.

아래는 기본적인 SnackBar 구현 예제입니다.

val scope = rememberCoroutineScope()
val snackbarHostState = remember { SnackbarHostState() }

Scaffold(
    snackbarHost = {
        SnackbarHost(hostState = snackbarHostState)
    },
    floatingActionButton = {
        ExtendedFloatingActionButton(
            text = { Text("Show snackbar") },
            icon = { Icon(Icons.Filled.Image, contentDescription = "") },
            onClick = {
                scope.launch {
                    snackbarHostState.showSnackbar("Snackbar")
                }
            }
        )
    }
) { contentPadding ->
    // content
}

 

 

위 코드에서는 SnackbarHostState를 생성하고 Scaffold 컴포넌트를 사용하여 SnackBar를 표시하는 구조입니다.

버튼 클릭 시 CoroutineScope를 이용하여 SnackBar를 나타내게 됩니다.

 

Snackbar Duration Custom

Snackbar 자체의 커스텀은 넘어가도록 하고,

Snackbar를 사용하면서 가장 불편했던 점인 노출 시간을 조절해보려고 합니다.

 

기본적으로 SnackBar의 지속 시간은 다음과 같은 세 가지 옵션이 있습니다.

enum class SnackbarDuration {
    /** Show the Snackbar for a short period of time */
    Short, // 4000L

    /** Show the Snackbar for a long period of time */
    Long, // 10000L

    /** Show the Snackbar indefinitely until explicitly dismissed or action is clicked */
    Indefinite // Long.MAX_VALUE
}

가장 짧은Short 옵션도 여전히 4초나 지속되어 다소 긴 것으로 느껴질 수 있습니다.

사용자에게 무의미한 대기 시간을 최소화하기 위해 맞춤형 지속 시간이 필요할 수 있습니다.

 

 

우선, showSnackbar 함수가 suspend 함수이기 때문에 Snackbar는 CoroutineScope안에서 동작합니다.

CoroutineScope안이라서 Job를 통해 새로운 코루틴을 생성하고 cancel()을 통해 중단할 수 있습니다.

 

예를 들어, 다음과 같이 코드를 작성할 수 있습니다.

LaunchedEffect(viewModel.uiEffect) {
    viewModel.uiEffect.collect { effect ->
        when (effect) {
            ...
            is AuthEffect.ShowMessage -> coroutineScope.launch {
                val job = launch {
                    snackState.showSnackbar(effect.message)
                }
                delay(1000L) // 원하는 시간 설정
                job.cancel()
            }
            ...
        }
    }
}

 

위 코드에서 delay(1000L)을 사용하여 1초 후에 SnackBar가 자동으로 사라지도록 설정합니다.

필요한 대기 시간이 달라질 수 있으므로 적절한 시간을 설정하여 사용자 경험을 개선할 수 있습니다.

 

아래는 추가 예시 코드입니다.

val scope = rememberCoroutineScope()
val snackBarMsg = stringResource(id = R.string.error_msg)

scope.launch {
    val job = scope.launch {
        snackbarHostState.showSnackbar(
            message = snackBarMsg,
            duration = SnackbarDuration.Indefinite,
        )
    }
    delay(1000)
    job.cancel()
}

 

 

 

---

Reference

jetpack compose Scaffold Possible to override the standard durations of SnackBar?

 

 

스낵바(snackbar)  |  Jetpack Compose  |  Android Developers