[iOS] status bar hidden / navigation bar shrink or overlap

 

☑️ 이 글의 제목

- status bar를 hidden한 뷰컨트롤러를 푸쉬했다가 back 했을때 navigation bar가 shrink 되는 현상

- status bar를 hidden한 뷰컨트롤러를 푸쉬했다가 back 했을때 navigation bar 가 status bar 와 overlap 되는 현상

 

(두가지를 계속 고민하다가 결국 둘다 너무 길어서 찐제목에는 키워드만 적음,,,) 

 

 

☑️ 주된 테스트 환경

Xcode 13.4.1 / iOS 15

---

 

[1] 준비

아래와 같은 상황으로 준비해줍니다  (feat. 노치없는 시뮬레이터!) 

 

- A 는 네비게이션의 root 이다. 

- A 에서 B 를 푸쉬한다

import UIKit

class MyNavigationController: UINavigationController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        self.navigationBar.backgroundColor = .red
    }
}

class AViewController: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        self.view.backgroundColor = .lightGray
    }
    
    @IBAction func push(_ sender: Any) {
        let viewController = BViewController()
        self.navigationController?.pushViewController(viewController, animated: true)
    }
}

class BViewController: UIViewController {
        
    override func viewDidLoad() {
        super.viewDidLoad()
        self.view.backgroundColor = .darkGray
    }
}

 

 

[2] B의 statusBar 를 감추기

 

B의 statusBar를 감추고 싶어서 prefersStatusBarHidden 을 오버라이딩해줍니다.

 

class BViewController: UIViewController {
    
    override var prefersStatusBarHidden: Bool { return true }
    
    override func viewDidLoad() {
        super.viewDidLoad()
        self.view.backgroundColor = .darkGray
    }
}

 

그럼 statusBar는 잘 감춰지나.. swipe back 해보면 네비게이션이 shrink 하는 것을 볼 수 있습니다,, 

 

 

 

preferredStatusBarUpdateAnimation도 바꿔보고 

class BViewController: UIViewController {
    
    override var prefersStatusBarHidden: Bool { return true }
    ✅ override var preferredStatusBarUpdateAnimation: UIStatusBarAnimation { return .none }
    
    override func viewDidLoad() {
        super.viewDidLoad()
        self.view.backgroundColor = .darkGray
    }
}

 

setNeedsStatusBarAppearanceUpdate()  도 불러보고 했는데도 (참고:  prefersStatusBarHidden)

동일증상이 발생합니다. 

 

 

[3] 왜 애플은...?

이게 애플 기본 동작이라고...??!?!?  하는 생각이 들면서 혼란스러웠지만

스택오버플로우 (NavBar overlaps Status Bar in iOS 13 Swift) 에서 살짝 힌트를 찾은 것 같습니다. 

now Apple seems to be assuming that if you have a navigation bar you won't hide the status bar at all

"I want in the first view controller a full screen user experience" Ah, 
but if you wanted that you would hide the navigation bar too. That's the point I'm making.

 

- 이제 애플은 네비게이션 바가 있으면 상태 바를 전혀 숨기지 않을 것이라고 가정하고 있는 것으로 보인다

- 너가 user experience 를 위해 full screen을 제공하고 싶은거면 statusbar 뿐만 아니라 navigation bar도 감춰야지 말이 된다

 

 

이건 애플의 공식발표(?)기 아니라 단지 추측일 뿐이지만,,, 

제가 생각하기에도,,,,  present 도 아니고

같은 네비게이션에서 push를 하는데 특정화면만 status bar 를 숨기는게 좋은 사용성인지 잘모르겠습니다,, 

 

 

[4]  원인 찾기 & 문제 해결 

아무튼 해결은 하고 싶으니 원인을 찾아봅시다

원인은 무엇일까요?! 

A로 back 했을 때  '네비게이션 컨트롤러의 safeAreaTopInset' 과  '네비게이션 바의 y' 가 다르기 때문입니다. 

class MyNavigationController: UINavigationController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        self.navigationBar.backgroundColor = .red
    }
    
    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()
        
        print("1) \(self.view.safeAreaInsets.top)")
        print("2) \(self.navigationBar.frame.minY)")
    }
}



// A 일때
1) 20.0
2) 20.0


// B 로 push 했을때
1) 0.0
2) 0.0

// A 로 돌아왔을때 
1) 20.0
✅ 2) 0.0

 

 

원인을 알았으니 아래와 같이 해결해주면 되겠습니다. 

import UIKit

class MyNavigationController: UINavigationController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        self.navigationBar.backgroundColor = .red
    }
    
    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()
        ✅ self.navigationBar.frame.origin.y = self.view.safeAreaInsets.top
    }
}

 

또는 viewDidLayoutSubviews 말고 viewSafeAreaInsetsDidChange 를 오버라이딩 하셔도 됩니다. 

class MyNavigationController: UINavigationController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        self.navigationBar.backgroundColor = .red
    }

     override func viewSafeAreaInsetsDidChange() {
        super.viewSafeAreaInsetsDidChange()
        ✅ self.navigationBar.frame.origin.y = self.view.safeAreaInsets.top
    }
}

 

 

 

[5] UINavigationBarAppearance 를 쓴 케이스

UINavigationBarAppearance 를 써준 경우도 대응이 잘 될까요?! 
(status bar background가 navigation bar background와 동일한 경우)

class MyNavigationController: UINavigationController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let appearance = UINavigationBarAppearance()
        appearance.configureWithOpaqueBackground()
        appearance.backgroundColor = .red
        
        self.navigationBar.standardAppearance = appearance
        self.navigationBar.scrollEdgeAppearance = appearance
    }
    
    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()
        self.navigationBar.frame.origin.y = self.view.safeAreaInsets.top
    }
}

 

좀 아쉽게 되는군요,,,  (swipe back 하는 도중에는 안변하니까,,)

 

 

(참고로 viewWillAppear 에서 configureWithOpaqueBackground 를 다시 불러주거나 appearance 를 다시 설정해주거나,, 해도 동일합니다)

 

 

그렇다면! 아래처럼 대응해줄 수 있습니다. 

import UIKit

class MyNavigationController: UINavigationController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let appearance = UINavigationBarAppearance()
        appearance.configureWithDefaultBackground()
        appearance.backgroundColor = .red
        
        self.navigationBar.standardAppearance = appearance
        self.navigationBar.scrollEdgeAppearance = appearance
    }
}

class BaseViewController: UIViewController {
    
    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)
        ✅ self.navigationController?.isNavigationBarHidden = false
    }
    
    override func viewWillDisappear(_ animated: Bool) {
        super.viewWillDisappear(animated)
        ✅ self.navigationController?.isNavigationBarHidden = true
    }
}

class AViewController: BaseViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        self.view.backgroundColor = .lightGray
    }
    
    @IBAction func push(_ sender: Any) {
        let viewController = BViewController()
        self.navigationController?.pushViewController(viewController, animated: true)
    }
}

class BViewController: BaseViewController {

    override var prefersStatusBarHidden: Bool { return true }

    override func viewDidLoad() {
        super.viewDidLoad()
        self.view.backgroundColor = .darkGray
    }
}

 

 

 

 

만약 높이차이가 좀 나니까,, swipe back 할때 좀 더 자연스럽고 싶다!! 하면

swipe back 의 percent 변화를 활용해서 alpha 값 또는 y 값을 설정해주셔도 좋습니다. 

 

class MyNavigationController: UINavigationController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        ... 
        self.interactivePopGestureRecognizer?.addTarget(self, action: #selector(self.didSwipeBack(_:)))
    }
    
    @objc
    private func didSwipeBack(_ sender: UIGestureRecognizer) {
        let percent = self.transitionCoordinator?.percentComplete ?? 1
        self.navigationBar.alpha = percent
        self.navigationBar.frame.origin.y = ....
    }
}