요구사항

1. 음악 상세 정보 화면의 아랫부분을 쓸어올리면 뮤직비디오 화면으로 이동
2. 화면 전환 시 자연스럽게 투명도 변경

1️⃣ Swipe 제스처로 화면 전환하기

픽 정보 화면을 위로 Swipe하면 오른쪽 화면으로 전환되도록 구현해보자.

1. Swipe를 위한 UI 만들기

DetailPickScreen 하단에 Swipe를 위한 아이콘을 만들고, Swipe시 기존 화면에 겹쳐지기 위해서 Box로 전체 화면을 감쌌다.

Box(modifier = Modifier.fillMaxSize()) {
		// 기존 화면
    DetailPickScreen(
        userId = userId,
        username = username,
        pick = pick,
        isFavorite = isFavorite,
        swipeableModifier = swipeableModifier,
        onBackClick = onBackClick
    )

    if (isMusicVideoAvailable) {
        // 새로운 화면이 보일 영역
    }
}

2. Swipe 아이콘에 Modifier의 swipeable을 적용

val screenHeight = LocalConfiguration.current.screenHeightDp.dp
val screenHeightPx = with(LocalDensity.current) { screenHeight.toPx() }
val statusBarHeight = with(LocalDensity.current) { WindowInsets.statusBars.getTop(this) }
val contentHeightPx = screenHeightPx + statusBarHeight

val swipeableState = rememberSwipeableState(initialValue = 0)
val anchors = mapOf(contentHeightPx to 0, 0f to 1)

val swipeableModifier = Modifier.swipeable(
    state = swipeableState,
    anchors = anchors,
    thresholds = { _, _ -> FractionalThreshold(0.3f) },
    orientation = Orientation.Vertical
)

swipeableState는 swipe 상태이다.

anchors는 스와이프의 시작과 끝 위치를 의미한다. 즉, 스와이프 가능한 지점과 swipeableState를 0에서 1로 매핑하는 것이다.

thresholds로 스와이프의 임계값을 설정했다. 0.3f이상 끌어올리면 SwipeState가 1까지 올라가게 된다.

orientation은 스와이프 방향이다.

우리는 기기의 상태바까지 전체화면으로 뮤직비디오를 보여주고 있으므로 contentHeightPx를 화면 높이와 상태바를 더해서 설정했다.