스와이프 삭제 구현

이미 쓴 글이 있지만 솔직히 너무 별로라서 새로 만들어봤다. 

(솔직히 내가 만들어놓고도 이건 좀.. 하고 있었음)

2024.01.14 - [Android/Android Compose] - [안드로이드 컴포즈] 스와이프 삭제 구현

 

핵심 키워드는 DraggableAnchors, AnchoredDraggableState 

이고 구현에 관심이 있다면 위 검색어로 찾아보면 훨씬 쉽고 자연스럽게 뚝딱하고 만들 수 있다.

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun SwipeScreen(
    contentComposable: @Composable () -> Unit,
    buttonComposable: @Composable () -> Unit,
    buttonModifier : Modifier,
    clickAction : () -> Unit
) {
    val density = LocalDensity.current
    val screenSizeDp = LocalConfiguration.current.screenWidthDp.dp
    var buttonVisible by remember { mutableStateOf(false) }
    val anchors = remember {
        DraggableAnchors {
            DragValue.Start at 0f
            DragValue.End at -250f
        }
    }
    val state = remember {
        AnchoredDraggableState(
            initialValue = DragValue.Start,
            positionalThreshold = {  with(density) { 130.dp.toPx() } },
            velocityThreshold = {  with(density) { 130.dp.toPx() } },
            animationSpec = tween(),
        )
    }
    SideEffect { state.updateAnchors(anchors) }
    Row(
        horizontalArrangement = Arrangement.SpaceBetween,
        modifier = Modifier.height(100.dp)
    ) {
        Box(
            Modifier
                .fillMaxSize()
                .anchoredDraggable(state, Orientation.Horizontal)
        ) {
            Box(modifier = Modifier
                .width(80.dp)
                .height(78.dp)
                .align(Alignment.CenterEnd)
                .clip(RoundedCornerShape(12.dp))
                .background(color = LinkZipTheme.color.redFB5B63)
                .padding(
                    vertical = 10.dp
                )
                .clickable {

                },
            ) {
                Box(modifier = buttonModifier
                    .align(Alignment.Center)
                    .clickable {
                    clickAction()
                }){
                    buttonComposable()
                }
            }
            Box(
                Modifier
                    .offset {
                        IntOffset(
                            x = state
                                .requireOffset()
                                .roundToInt(),
                            y = 0
                        )
                    } // x = 0 Horizontal
            ){
                contentComposable()
            }
        }
    }
}