Compose custom snackbar - 커스텀 토스트 메시지

7월 27, 2024

SnackBar

스낵바는 화면 하단에 나타나 간단한 알림 역할을 한다.

잠깐 나타난 후 사라지므로, 사용자를 방해하지 않으면서도 사용자에게 변경 사항을 알려주거나 특정 작업의 실행 여부를 제시할 수도 있다.

그림1. Snackbar

이 스낵바가 경우에 따라서 커스텀 된 레이아웃으로 나타내고 싶을 때가 있는데

그럴 경우를 위해서 스낵바를 커스텀 하는 방법을 알아보도록 하겠다.

SnackBar 구현

스낵바를 구현하기 위해서 SnackbarHostState을 갖는 SnackbarHost를(변수명=snackBarHostState) 선언해준다.

이를 Scaffold 파라미터 중 하나인 snackbarHost서 호출한 SnackbarHost 의 hostState 값으로 초기화 해준다.

이후 SnackbarHost에서 직접 커스텀한 스낵바를 호출해주면 끝이다.

이 부분에서 추가적으로 알고 있으면 좋은 부분을 살펴보면

만약 Scaffold가 없다면 SnackbarHost를 다른 곳에 위치하여도 무관하다. 대신 이 경우에는 스낵바가 나타날 위치를 조정해 줄 필요가 있다.

또한 modifier을 보면 offset을 사용하였는데, offset을 사용하여 스낵바가 나타날 위치를 조절할 수 있어서

해당 예시에서는 y = -100 이기 때문에 본래 스낵바가 나타나는 것보다 더 위쪽에서 스낵바가 나타나는 것을 확인할 수 있다.

@Composable
fun Main() {
    val snackBarHostState = remember { SnackbarHostState() }
    val coroutineScope = rememberCoroutineScope()

    Scaffold(modifier = Modifier.fillMaxSize(),
        snackbarHost = {
            SnackbarHost(hostState = snackBarHostState,
                modifier = Modifier.offset(y = (-100).dp)
            ) {
                CustomSnackBar(icon = Icons.Filled.Info, message = it.visuals.message)
            }
        }) { innerPadding ->
        Column(
            modifier = Modifier
                .padding(innerPadding)
                .fillMaxSize(),
            verticalArrangement = Arrangement.Center,
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Button(onClick = {
                coroutineScope.launch {
                    snackBarHostState.showSnackbar("Show Message")
                }
            }) {
                Text("Toast Msg")
            }
        }
    }
}

그림2. Custom Snackbar

마지막으로 커스텀 정의한 스낵바 레이아웃을 살펴보면, 스낵바 컴포넌트에서 아이콘과 텍스트를 나타내었다.

이 부분은 컴포저블 함수를 정의 하는 것과 동일하기 때문에

modifier, shape, color 같은 속성을 사용하여 스낵바에 길이나 모양, 색을 지정할 수 있다.

@Composable
fun CustomSnackBar(
    icon: ImageVector,
    message: String,
    containerColor: Color = Color(60, 60, 60, 255)
) {
    Snackbar(
        modifier = Modifier.width(180.dp),
        shape = RoundedCornerShape(16.dp),
        containerColor = containerColor
    ) {
        Row(
            modifier = Modifier.fillMaxSize(),
            horizontalArrangement = Arrangement.Center,
            verticalAlignment = Alignment.CenterVertically
        ) {
            Icon(icon, contentDescription = null, tint = Color(94, 255, 115, 255))
            Spacer(modifier = Modifier.width(8.dp))
            Text(message)
        }
    }
}

참고

전체 코드 | Github

이 블로그 검색

Compose World