SwipeToDismiss(밀어서 삭제) 방식은 리스트에서 아이템을 삭제하거나, 좋아요나 플레이리스트 등 특정 그룹에 추가하는 기능을 구현할 때 용이하다.

Jetpack Compose에서는 이를 쉽게 제작할 수 있도록 SwipeToDismiss 라는 Composable 함수를 지원한다.

작성 방법이 쉽기 때문에 금방 따라 작성할 수 있다.

val dismissState = rememberDismissState(confirmStateChange = {               
    if (it == DismissValue.DismissedToStart) {                              
        /**                                                                 
         * Dismiss 되었을 때 작업할 코드 작성                                          
         */                                                                 
    }                                                                       
    true                                                                     
})                                                                          
                                                                            
SwipeToDismiss(state = dismissState, directions = setOf(                    
    DismissDirection.EndToStart                                             
), dismissThresholds = { direction ->                                       
    FractionalThreshold(0.4f)                                               
}, background = {                                                            
    val color by animateColorAsState(                                       
        when (dismissState.targetValue) {                                   
            DismissValue.Default -> Color.White                             
            else -> Color.Red                                               
        }                                                                   
    )                                                                       
    val scale by animateFloatAsState(                                       
        if (dismissState.targetValue == DismissValue.Default) 0.75f else 1f 
    )                                                                       
    Box(                                                                    
        modifier = Modifier                                                 
            .fillMaxSize()                                                  
            .background(color)                                              
            .padding(horizontal = Dp(20f)),                                 
        contentAlignment = Alignment.CenterEnd                              
    ) {                                                                      
        Icon(                                                               
            Icons.Default.Delete,                                           
            contentDescription = "Delete Icon",                             
            modifier = Modifier.scale(scale)                                
        )                                                                   
    }                                                                       
}, dismissContent = {                                                        
    Card(                                                                   
        shape = RoundedCornerShape(0.dp),                                   
        elevation = animateDpAsState(                                       
            if (dismissState.dismissDirection != null) 4.dp else 0.dp       
        ).value                                                             
    ) {                                                                     
        /**                                                                 
         * 원본 콘텐츠 구성가능한함수 작성                                                
         */                                                                 
    }                                                                       
})                                                                          

state : 앞선 코드에서 선언한 DismissState 에서 confirmStateChange 콜백 함수를 통해 SwipeToDismiss Composable 함수의 Dismiss 상태를 추적할 수 있다.

DismissValue.DismissedToStart : 오른쪽에서 왼쪽으로 Dismiss 됨

DismissValue.DismissedToEnd : 왼쪽에서 오른쪽으로 Dismiss 됨

Default : Dismiss 되지 않은 상태

의도한 방향으로 Dismiss 된 경우 리스트 아이템 삭제 등 작업을 수행하면 된다.

dismissThresholds : Dismiss 되는 임계치 이다. 0.0f ~ 1.0f, ex) 0.5f 로 설정한 경우 50% 이상 Swipe 된 경우 Dismiss 된 것으로 간주

background : Dismiss 된 경우 후방에 위치하는(본 컨텐츠 뒤에 위치하는) Composable 함수. 이전에 선언한 DismissState에 따라 애니메이션을 삽입 할 수 있다.

dismissContent : 본 컨텐츠가 되는 Composable 함수 (Dismiss 되기 전까지 보여지는 컨텐츠)

아이템 삭제시 자연스럽게 하기

DismissedToStart등 State 반응시 즉시 아이템을 제거하는 등의 작업을 하게 되면 UI 가 부자연스럽다.

이를 해결하기 위해, SwipeToDismiss의 modifier에 animateItemPlacement()를 적용하면 리스트에서 아이템이 제거 되었을 때 보다 자연스럽게 반응한다.

또한 다음과 같이 일정 시간 동안 딜레이를 준 뒤 본 작업을 수행 하는 것이 더 보기 좋다.

val dismissState = rememberDismissState(confirmStateChange = {               
    if (it == DismissValue.DismissedToStart) {                              
        CoroutineScope(Dispatchers.Main).launch {                            
            delay(400)                                                      
            viewModel.remove(resource)                                      
        }                                                                   
    }                                                                       
    true                                                                     
})