[iOS] iPhone 12 mini의 StatusBar를 알아봅시다.

안녕하세요!

얼마전 출시한 아이폰 12류들의 소식이 소란스러운데요, 저는 시뮬레이터가 나오는 순간

뷰 터진것 없는지 확인하러 갔습니다. 비교적 양호한 편이였는데 (거의 안 깨짐)
iphone 12 mini가 문제였습니다. 그래도 슉 잡아버린 정도로 해결 완료!

무슨 일이었는지 알아보러 갑시다.

 

우선, 새로 나온 아이폰들의 가로 세로 px는 다음과 같습니다.

 

미니 : 375  * 812

12/12pro : 390 * 844 (사이즈 같음)

pro max  : 428 * 926

 

미니가 5.4인치임에도 불구하고 5.8인치대의 화면인 11 pro, X 등의 화면 사이즈와 같습니다.

또 12 류들부터 모두 3x의 에셋을 사용하게 되었습니다.

 

가로세로 px가 저렇게 나와서 큰 아이폰들만 확인했다가 얼마전에 mini를 확인해 보았는데,

상태바가 아래와 같이 나오지 뭡니까...

[사진 1] 깔려있는 것은 iPhone 11 pro, 위는 iPhone 12 mini.

StatusBar의 height를 44로 맞춰놓은것(아님)
iOS 13에서 제공하는 statusBarManager 속성을 사용해서...

[사진 2] 이놈은 iOS 13에서 제공하는 따끈한 프로퍼티입니다

상태바의 height를 구해서, 

 if let window = UIApplication.shared.windows.first(where: { $0.isKeyWindow }) {
        statusBarHeight = window.windowScene?.statusBarManager?.statusBarFrame.height ?? 0
        print(statusBarHeight)
      }

프린트를 찍어보니까!

잘! 나옵니다!

 

실험적 결과:
iPhone12 mini   : 44px

iPhone12           : 47px

iPhone12 Pro     : 47px

iPhone12 Pro Max : 47px

 

하이라키 창을 보러 갑시다.

[사진 3]

(환장)

아직 한참 모자른것 같은데요... 미니만 그렇습니다.

 

또 실험적 결과로, height를 50을 주었을 때 하얀색이 가려지더라구요.

결과: iPhone12 mini의 statusBar height는 50이다!

 

애플에서 제공하는 프로퍼티의 값이 다르게 나오는 버그가 있는것 같습니다.

이를 고치려면 안전하게 Safe Area와 오토레이아웃을 잡아야 되겠습니다.

 

코드를 아래와 같이 수정해줍니다.

if #available(iOS 13.0, *) {
      var statusBarHeight: CGFloat = 0
      let margin = view.layoutMarginsGuide
      if let window = UIApplication.shared.windows.first(where: { $0.isKeyWindow }) {
        statusBarHeight = window.windowScene?.statusBarManager?.statusBarFrame.height ?? 0
        print(statusBarHeight)
      }
      // height를 구하고,
      
      let statusbarView = UIView()
      statusbarView.backgroundColor = UIColor.mainBlue
      statusbarView.frame = CGRect.zero
      view.addSubview(statusbarView)
      statusbarView.translatesAutoresizingMaskIntoConstraints = false
      // frame 선언

      NSLayoutConstraint.activate([
        statusbarView.topAnchor.constraint(equalTo: view.topAnchor),
        statusbarView.widthAnchor.constraint(equalTo: view.widthAnchor, multiplier: 1.0),
        statusbarView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
        statusbarView.bottomAnchor.constraint(equalTo: margin.topAnchor)
      ])
      // autolayout 선언
      
      ~

SafeArea의 Top과 붙여주면 되겠습니다.

[사진 4]

깔끔하게 해결 완료!

질문과 지적은 언제나 감사히 받고 있습니다.

감사합니다~!