픽 정보 화면을 위로 Swipe하면 오른쪽 화면으로 전환되도록 구현해보자.
DetailPickScreen 하단에 Swipe를 위한 아이콘을 만들고, Swipe시 기존 화면에 겹쳐지기 위해서 Box로 전체 화면을 감쌌다.
Box(modifier = Modifier.fillMaxSize()) {
// 기존 화면
DetailPickScreen(
userId = userId,
username = username,
pick = pick,
isFavorite = isFavorite,
swipeableModifier = swipeableModifier,
onBackClick = onBackClick
)
if (isMusicVideoAvailable) {
// 새로운 화면이 보일 영역
}
}
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
를 화면 높이와 상태바를 더해서 설정했다.