스크롤해서 화면을 내릴 때, 네비게이션 타이틀이 같이 올라가게 하기

수정 전(왼쪽) / 수정 후(오른쪽)

 

 

구현 내용

• 스크롤해서 화면을 내릴 때 네비게이션 부분을 안보이게 한다. (테이블 뷰에 밀려 올라가게 한다.)

 

구현 코드

• extension ~ 부분에 넣었다
• 스크롤 뷰가 스크롤될 때마다 호출되며, 네비게이션 바를 스크롤에 따라 숨기거나 보이게 하는 효과를 준다.

// 스크롤 뷰가 스크롤될 때마다 호출되는 델리게이트 메서드이다.
func scrollViewDidScroll(_ scrollView: UIScrollView) {

	// 화면 상단의 안전 영역(주로 상태 바와 노치 영역)의 높이를 가져오는데,
    // 이는 기기마다 다를 수 있으며, 네비게이션 바의 기본 위치를 결정하는데 사용된다.
    let defaultOffset = view.safeAreaInsets.top
    
    // 현재 스크롤 뷰의 수직 스크롤 위치(contentOffset.y)에 defaultOffset을 더한다.
    // 이렇게 하면 스크롤의 시작점을 안전 영역 아래로 조정할 수 있다.
    let offset = scrollView.contentOffset.y + defaultOffset

	// 네비게이션 바에 변환(transform)을 적용한다.
    // translationX는 0으로, 수평 이동은 없다.
    // translationY는 -offset으로, 스크롤 양만큼 위로 이동시킨다.
    // 스크롤을 내리면 offset이 양수가 되어 네비게이션 바가 위로 사라지고,
    // 스크롤을 올리면 offset이 음수가 되어 네비게이션 바가 다시 나타난다.
    navigationController?.navigationBar.transform = .init(translationX: 0, y: -offset)
}

 

 

• 사용자가 콘텐츠를 아래로 스크롤하면 네비게이션 바가 위로 사라진다.
• 사용자가 콘텐츠를 위로 스크롤하면 네비게이션 바가 다시 나타난다.
• 이는 화면 공간을 효율적으로 사용하면서 사용자 경험을 향상시키는 흔한 UI 패턴이다.

 

🟥 주의할 점은 이 방식이 네비게이션 바를 실제로 숨기는 것이 아니라 화면 밖으로 이동시키는 것이므로, 네비게이션 바의 기능은 여전히 활성 상태이다.