
SnackBar란?
SnackBar는 간단한 메시지를 사용자에게 전달하는 UI 구성 요소로, 주로 아래와 같은 용도로 사용됩니다.
- 정보 전달: 작업의 결과나 상태에 대한 피드백을 제공합니다.
- 사용자 액션 유도: 사용자가 특정 작업을 수행하도록 유도할 수 있습니다(예: "취소" 또는 "다시 시도" 버튼 포함).
SnackBar 구현하기
Android Compose에서 SnackBar를 사용하기 위해서는 Scaffold와 SnackˉHost를 이용해야 합니다.
아래는 기본적인 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?
How can override the standard durations of the Scaffold SnackBar to apply my own durations in MS. I can't see a way to do it is EventsToAddAlbumScreen.ShowSnackbarEventToAddAlbumScreen ->
stackoverflow.com
스낵바(snackbar) | Jetpack Compose | Android Developers
이 페이지는 Cloud Translation API를 통해 번역되었습니다. 스낵바(snackbar) 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요. 스낵바 구성요소는 화면 하단에 위치합
developer.android.com
'Android > Compose' 카테고리의 다른 글
[Compose] 한국 이름 입력을 위한 TextField 구현 (+천지인) (0) | 2024.11.20 |
---|---|
[Compose] SMS Retriever API - SMS 인증번호 자동입력 (0) | 2024.10.01 |
[Compose] Modifier Extension - DrawScrollbar (0) | 2024.09.25 |
[Compose] Modifier Extension - AddFocusCleaner (0) | 2024.09.25 |
[Compose] LazyColumn Drag And Drop Reordering (0) | 2024.09.09 |