[iOS - swift] NavigationBar에 blur 효과 적용하는 방법 (UIBlurEffect, UIVisualEffectView, isTranslucent, 네비게이션 바 블러 효과)

네비게이션 블러 효과

네비게이션 바 블려 효과

• 구현 아이디어
  • 먼저 navigationBar를 투명하게하고(isTranslucent = true), 색상을 clear로 설정
  • 네비게이션바에 addSubview하여 blur 뷰를 삽입
    • blur뷰는 UIBlurEffect와 UIVisualEffectView를 사용하면 편하게 블러효과를 줄 수 있음

구현 방법

• 먼저 navigationBar를 투명하게하고(isTranslucent = true), 색상을 clear로 설정

UINavigationBar.appearance().setBackgroundImage(UIImage(), for: UIBarMetrics.default)
UINavigationBar.appearance().shadowImage = UIImage()
UINavigationBar.appearance().isTranslucent = true
UINavigationBar.appearance().tintColor = .clear
UINavigationBar.appearance().backgroundColor = .clear

• navigationBar가 생성되는 viewDidAppear에서 블러 뷰를 세팅

package override func viewDidAppear(_ animated: Bool) {
    super.viewDidAppear(animated)
    title = "네비게이션 바 블러효과"
    setupBlurEffectToTopView()
}

• 중복으로 세팅되면 안되므로 변수 선언

var blurView: UIView?

• UIBlurEffect의 스타일을 설정한 후, UIVisualEffectView 인스턴스 생성

func setupBlurEffectToTopView() {
    guard blurView == nil else { return }

    let blurEffect = UIBlurEffect(style: .light)
    let blurView = UIVisualEffectView(effect: blurEffect)
    self.blurView = blurView
}

• 이 blurView의 높이는 navigationBar height에다가 상단 safeArea height를 고려한 값이므로 이 값으로 blurView의 height를 지정하여 사용

func setupBlurEffectToTopView() {
    guard blurView == nil else { return }
    
    let blurEffect = UIBlurEffect(style: .light)
    let blurView = UIVisualEffectView(effect: blurEffect)
    self.blurView = blurView
    
    let navigationBarBounds = navigationController?.navigationBar.bounds ?? .zero
    let window = UIApplication.shared.windows.first
    let safeAreaHeight = window?.safeAreaInsets.top ?? 0
    blurView.frame = .init(x: 0, y: 0, width: navigationBarBounds.width, height: navigationBarBounds.height + safeAreaHeight)
    blurView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
    view.addSubview(blurView)
}

완성) 

네비게이션 바 블려 효과

* 전체 코드: https://github.com/JK0369/ExNavigationBarBlurEffect