[Swift] Status Bar / Home Indicator의 색상 변경

 

Status Bar에 변경된 색상이 적용된 모습

 

목차

1. 배경

2. Status Bar와 Home indicator 색상 변경

3. Status Bar만 색상 변경

 

1. 배경

앱의 현재 테마 모드가 라이트인지 다크인지 확인해서 웹뷰에 적용했지만,

상태 바와 소프트 홈 버튼의 색상은 변경되지 않아 부자연스러웠다.

그래서 위아래 색상을 테마에 따라 다르게 변경했다.

 

2. Status Bar와 Home indicator의 색상 변경

View Controller의 배경색을 바꾸면, 상태바와 홈버튼의 색상이 함께 변경된다.

view.backgroundColor = .red

다크 모드인지 아닌지 판별해서 바꿔준다면 아래와 같이 할 수 있을 것이다.

view.backgroundColor = .white

if traitCollection.userInterfaceStyle == .dark {
	view.backgroundColor = .black
}

 

3. Status Bar만 색상 변경

검색하며 찾아본 바로는 상태 바만의 색상을 변경하는 방법은 두 가지였다.

 

첫 번째는 info.plist 파일과 프로젝트의 "General > Status Bar Style" 항목 값을 변경해주는 것이고,

두 번째는 Status Bar에 UIView를 SubView에 추가해서 덧씌우는 방법이다.

 

하지만, 첫 번째 방법은 디폴트 색상을 변경해 주는 것이기 때문에, 상황에 따라 실시간으로 변경해줄 수가 없었다.

 

예를 들어, 앱을 잠시 내리고 다크 모드로 변경한 후 앱을 다시 시작하면, 앱의 전체적인 테마도 다크 모드로 변경해주어야 하는 상황에서 변경할 수가 없다.

 

때문에 두 번째 방법을 사용했고, delegate 부분에 아래 코드를 추가했다.

 

if #available(iOS 13.0, *) {
    var background: UIColor = UIColor.white

    if traitCollection.userInterfaceStyle == .dark {
        //background = UIColor.init(red: 38/255, green: 33/255, blue: 38/255, alpha: 1)
        background = UIColor.black
    }

    let statusBar = UIView(frame: UIApplication.shared.keyWindow?.windowScene?.statusBarManager?.statusBarFrame ?? CGRect.zero)
    statusBar.backgroundColor = background
    
    UIApplication.shared.keyWindow?.addSubview(statusBar)
}

 

Status Bar의 글자 색상을 변경하려면, 변수 overriding을 통해 바꿔줄 수 있다.

 

override var preferredStatusBarStyle: UIStatusBarStyle {
	return .default
}

 

이후에 아이폰을 가로 또는 세로로 회전(orientation)하게 되면, 처음 앱을 로딩할 당시에 휴대폰의 가로 사이즈를 기준으로 UIView가 만들어지기 때문에 UI가 깨지는 문제가 있었다.

 

그래서 변수를 global로 놓고, 회전 delegate를 사용해 가로(landscape) 상태에서는 Status Bar를 숨기도록 했다.

 

override func viewWillTransition(to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator) {
    super.viewWillTransition(to: size, with: coordinator)
    
    if UIDevice.current.orientation.isLandscape {
    	print("Landscape")
    	self.statusBar.isHidden = true
    } else {
    	print("Portrait")
    	self.statusBar.isHidden = false
    }
}

 

위의 방법은 아무래도 정상적인 방법이 아니라서...

폰을 가로 또는 세로로 회전했을 때 UI가 깨자는 것처럼 여러가지 문제가 발생할 수 있기 때문에 권장하지 않는다.

 

그래서 View Controller의 배경색을 바꾸는 게 최선이라고 생각한다.