[UIKit] status bar, home indicator 배경색 변경하기

 

노치 있는 status bar나 home indicator 부분까지 색상이 깔린 디자인을 받을 때가 종종 있다.

폰마다 status bar, home indicator 영역이 조금 다르다. 예를 들어, 홈 버튼이 있는 아이폰 SE 2, 3세대 등의 폰은 아예 home indicator 영역이 잡히지 않는다. 무조건 화면 아래에 constraint를 깔고 constant 34 주는 게 능사가 아닐 수 있다는 이야기다.

 

우선 status bar 배경색을 주는 방법부터 살펴보자. 2가지 방법이 있다.

 

(1) statusBarManager 사용

첫 번째는 windowScene의 statusBarManager를 사용하는 것이다.

UIApplication의 windows 중 첫 번째 window의 windowScene, 즉 지금 연결된 UIWindowScene에는 statusBarManager라는 게 있다. 사실 Manager 자체로 뭘 하는 건 아니고, 그냥 프레임만 따서 뷰를 새로 만드는 거다.

이 새로 딴 뷰를 최상위 뷰에 붙여주면 된다. 이미 Frame이 정해져있기 때문에 Constraint를 따로 줄 필요는 없다. 혹은, window에 직접 뷰를 붙일 수 있는데 이 경우에는 zPosition 값을 충분히 크게 줘야 뷰컨의 최상위 뷰에 가려지지 않는다.

let window = UIApplication.shared.windows.first
let statusBarManager = window?.windowScene?.statusBarManager
let statusBarView = UIView(frame: statusBarManager?.statusBarFrame ?? .zero)
statusBarView.backgroundColor = .systemTeal
view.addSubview(statusBarView)

 

(2) UIView에 safeLayoutGuide를 이용한 constraint 주기

두 번째는 StatusBarManager를 사용하지 않고, 단독으로 뷰를 선언해 constraint를 적절히 줘서 뷰에 직접 붙이는 방법이다.

top은 최상위 뷰의 top과 동일하게, bottom은 safeAreaLayoutGuide의 topMargin과 동일하게 주는 것이 중요하다. Status bar의 하단이 safeAreaLayoutGuide의 topMargin이기 때문에, bottom을 여기 맞추면 딱 status Bar만큼의 높이를 확보할 수 있다.

let statusBarView = UIView()
view.addSubview(statusBarView)
statusBarView.snp.makeConstraints { make in
    make.leading.top.trailing.equalToSuperview()
    make.bottom.equalTo(view.safeAreaLayoutGuide.snp.topMargin)
}

Home indicator 자체가 아니라 그 배경 부분 색상을 주는 것도 (2)번과 비슷한 방법으로 할 수 있다. 이 경우에는 bottom은 최상위 뷰 bottom과 동일하게 주고 top을 safeAreaLayoutGuide의 bottomMargin과 동일하게 준다.

let bottomView = UIView()
view.addSubview(bottomView)
bottomView.snp.makeConstraints { make in
    make.leading.bottom.trailing.equalToSuperview()
    make.top.equalTo(view.safeAreaLayoutGuide.snp.bottomMargin)
}

결론적으로는 뷰에 safeAreaLayoutGuide에 맞게 적절히 constraint을 주면 어느 폰이든 이 목적을 달성할 수 있다.

 

 

 

References

• Change Status Bar Background Color in Swift 3