TiTi Side Project | SwipeDismiss + Animate ListItem 컴포넌트 구현하기

현재 TiTi에서는 Task를 선택하기 위해 BottomSheet에서 Task를 선택, 수정, 추가, 삭제 등 다양한 작업을 할 수 있는 화면이 있습니다. 

이 화면에 요구사항으로는 다음과 같습니다.

• Edit 모드에 진입하면 좌우측에서 삭제와 드래그할 수 있는 아이콘이 Animate 하게 등장한다.
• SwipeDismiss를 통해 삭제가 가능하다.
• LongClick을 통해 Task명을 수정하는 Dialog가 등장한다.

이러한 요구사항을 만족하기 위해 아래와 같은 Compose의 API를 이용하여 쉽게 구현할 수 있습니다.

• AnimateVisibility
• SwipeToDismiss
• combinedClickable

AnimateVisiblity

AnimatedVisibility(visible = editMode) {
    Icon(
        modifier = Modifier
            .padding(end = 12.dp)
            .clickable { onDelete() },
        painter = painterResource(id = R.drawable.cancel_icon),
        contentDescription = "cancel",
        tint = TdsColor.wrongTextFieldColor.getColor()
    )
}

AnimatedVisibility를 통해 editMode가 활성화 될 시 Icon이 Animate 하게 등장하도록 할 수 있습니다.

SwipeToDismiss

val dismissState = rememberDismissState(confirmValueChange = { dismissValue ->
        when (dismissValue) {
            DismissValue.Default -> false
            DismissValue.DismissedToEnd -> false
            DismissValue.DismissedToStart -> {
                onDelete()
                true
            }
        }
    })

SwipeToDismiss(
        state = dismissState,
        directions = setOf(DismissDirection.EndToStart),
        background = {
            Box(
                modifier = Modifier
                    .fillMaxSize()
                    .background(color = TdsColor.wrongTextFieldColor.getColor())
                    .padding(end = 12.dp),
                contentAlignment = Alignment.CenterEnd
            ) {
                TdsText(
                    text = "Delete",
                    textStyle = TdsTextStyle.normalTextStyle,
                    fontSize = 16.sp,
                    color = TdsColor.whiteColor
                )
            }
        },
        dismissContent = {
        	// Content 내용
        }
    )

rememberDismissState를 통해 Dismiss되었을 때 동작을 정의합니다.

뿐만 아니라, SwipeToDismiss의 파라미터로 Dismiss 방향, 백그라운드, content를 정의합니다.

combinedClickable

.combinedClickable(
    onClick = onClickTask,
    onLongClick = onLongClickTask
)

Modifier.combinedClickable을 통해 onClick 뿐만 아니라, LongClick도 정의할 수 있습니다.