Android Compose 커스텀 알림 UI 예제

🎯 목표

• 각 알림이 화면에 등장할 때 애니메이션으로 표시
• 삭제 버튼을 누르면 퇴장 애니메이션 후 알림 제거

💡 개선된 코드 예시

// 알림 그룹
val currentAlarms by rememberUpdatedState(alarms)

LazyColumn(
    modifier = modifier
        .wrapContentWidth()
        .height(300.dp),
    verticalArrangement = Arrangement.spacedBy(10.dp)
) {
    // 특정 개수만 알림 표시
    items(
        items = currentAlarms.takeLast(maxCount),
        key = { it.id }
    ) { alarm ->

        var isVisible by remember { mutableStateOf(false) }
        var isDeleted by remember { mutableStateOf(false) }

        // 알림이 나타날때 애니메이션에 필요
        LaunchedEffect(alarm.id) {
            isVisible = true
        }

        AnimatedVisibility(
            modifier = Modifier.animateItem(),
            visible = isVisible && !isDeleted,
            enter = slideInVertically { it } + fadeIn(),
            exit = slideOutVertically { -it } + fadeOut(),
            exitFinishedListener = {
                // 애니메이션 종료 후 알림 제거
                onAlarmRemoved?.invoke(alarm.id)
            }
        ) {
            AlarmItem(
                event = alarm,
                onClickDismiss = {
                    // 삭제 버튼을 누르면 알림이 지워진 것처럼 애니메이션션
                    isDeleted = true
                }
            )
        }
    }
}

📌 주요 포인트

1. 알림 삭제

• 알림을 삭제할 때 목록에서 바로 삭제하면 애니메이션 없이 삭제되버린다.
• 삭제 애니메이션이 끝나 후 삭제하게 만들어야 함함

2. id

• 목록에서 아이템을 id로 구별하고 애니메이션도 id를 기준으로 동작하기 때문에 id가 중복되면 안됨됨