[Android] Compose - SwipeToDismiss

XML에서 사용하던 RecyclerView의 ItemTouchHelper를 Compose에서 구현한 것이다.

RecyclerView의 각 아이템을 스크롤 할 수 있도록하는 Compose API이다.

 

기존의 사용 방식이다

내일배움캠프 7기 Android TIL 37일차 (2023.09.05)

 

Compose Api에서는 SwipeToDismiss라는 컴포저블을 통해 구현 할 수 있다.

Compose에서 RecyclerView와 같은 동작을 하는 LazyColumn안에서 SwipeToDismiss를 선언하여 사용한다.

// SwipeToDismiss를 사용하기 위한 LazyColumn
LazyColumn(
            modifier = modifier
                .fillMaxSize()
                .padding(it)
        ) {
            items(wishList.value) { wish ->
                // 아이템의 스와이프 동작 상태를 위한 state
                val dismissState = rememberSwipeToDismissBoxState(
                    confirmValueChange = { value ->
                        // 양 옆으로 스와이프 하면
                        if (value == SwipeToDismissBoxValue.StartToEnd || value == SwipeToDismissBoxValue.EndToStart) {
                            // 컨텐츠를 삭제
                            viewModel.deleteWish(wish)
                        }
                        // Boolean을 반환 (true 동작)
                        true
                    }
                )
                // 스와이프를 할 수 있도록 만들어주는 컴포저블
                // material 3에서 사용하는 API 이다.
//                SwipeToDismissBox(state = dismissState, backgroundContent = ) {
//
//                }
                // 스와이프를 할 수 있도록 만들어주는 컴포저블 (material 3이전)
                SwipeToDismiss(
                    state = dismissState,
                    // 스와이프 시 각 아이템 뒤에 보여줄 배경 선언
                    background = {
                        // 스와이프 할 떄 색 변경 상태
                        val color by animateColorAsState(
                            targetValue = if (dismissState.dismissDirection == SwipeToDismissBoxValue.EndToStart) Color.Red else Color.Transparent,
                            label = ""
                        )
                        val alignment = Alignment.CenterEnd
                        Box(
                            modifier = modifier
                                .fillMaxSize()
                                .background(color)
                                .padding(horizontal = 20.dp),
                            // 중간 끝에 배치
                            contentAlignment = alignment
                        ) {
                            Icon(
                                Icons.Default.Delete,
                                contentDescription = null,
                                tint = Color.White
                            )
                        }

                    },
                    // 스와이프 뱡향 가능 위치
                    directions = setOf(
                        SwipeToDismissBoxValue.StartToEnd,
                        SwipeToDismissBoxValue.EndToStart
                    ),
                    // 스와이프 했을때 없어질 것
                    dismissContent = {
                        val id = wish.id
                        navController.navigate(Screen.AddScreen.route + "/$id")
                    }
                )
				// Item Composable 등록
                ...
            }
        }

 

 

 

DismissState  |  Android Developers