[Kotlin/Compose] Slide-Unlock(밀어서 잠금해제) 기능 개발하기 (2)

지난 포스팅에 이어서 개발을 진행하겠습니다.

아이콘 적용

기존에 텍스트 B가 적용되어 있는 스와이핑 버튼을 아이콘으로 변경하도록 하겠습니다.

Icon(Icons.Outlined.KeyboardArrowRight, "", tint = Color.White, modifier = Modifier.align(  
    Alignment.Center  
))

기존의 Text를 Icon으로 바꾸어주었습니다.

드래그가 완료가 되면 배경색을 바꾸기

드래그가 완료가 되면, 기존의 배경색을 바꾸도록 하겠습니다.

기존의 노랑으로 적용되어 있던 배경색을
Gary -> LightGray로 변경되게끔 바꾸어보도록 하겠습니다.

드래그가 중간 이상에 도착을 했을 때 색상을 LightGray로 바뀌도록 하기 위해,
animateColorAsState를 사용하여, 상태에 따라 배경 색상을 부드럽게 변경하도록 하였습니다.

val backgroundColor by animateColorAsState(targetValue =  
    if(state.offset > componentSize.width.toFloat() / 2) {  
        Color.LightGray  
    }  
    else Color.Gray  
    , animationSpec = tween(durationMillis = 300)  
)

state.offset이 배경의 중앙 이상에 위치하게 되면 색상이 바뀌도록 적용하였습니다.
또한 animationSpec을 적용하여 부드럽게 색상이 변경되도록 하였습니다.

이렇게 만들어진 backgroundColor를 기존의 배경의 색상 (Yellow로 적용된)에 적용하였습니다.

스와이프 상태에 따라 텍스트가 바뀌도록 하기

스와이프가 완료되기 전에 사용자에게 '밀어서 잠금 해제'라는 텍스트를 보여주고, 해제가 완료되면 '잠금 해제 완료'가 되도록 하였습니다.

이를 위해, 기존에 작성해두었던, 텍스트를 remember을 이용하여 상태를 저장하고,
LaunchedEffect의 state.currentValue을 이용하여 중간 이상에 위치하면, 상태 값을 바꾸어 스와이핑에 따라 화면이 변경되도록 하였습니다.

var swipeText by remember {  
    mutableStateOf("밀어서 잠금 해제")  
}  

LaunchedEffect(state.currentValue) {  
    if(state.currentValue == Position.Start && state.offset > componentSize.width.toFloat() / 2) {  
        state.snapTo(Position.End)  
    }  

    if(state.offset > componentSize.width.toFloat() / 2) {  
        swipeText = "잠금 해제 완료"  
    }  
    else {  
        swipeText = "밀어서 잠금 해제"  
    }  
}

완성본

드르륵

깃허브

https://github.com/Myeongcheol-shin/slide-and-unlock