swift xcode 상태바 변경, 다크모드

iOS 13 버전 부터 다크모드가 제공되면서, 잘못하면 상태바에 있는 내용(시간, lte 나 wifi 상태, 배터리정보)이 안보이는 상황이 생길 수 있다. 사용자가 다크모드로 설정한 핸드폰에서 개발자가 다크모드 관련된 처리를 하지 않았을 경우, 상태바는 흰배경에 흰글씨로 표시된다.

이를 처리하기 위한 몇가지 방안을 찾아본다. 주로 하이브리드앱에서 상태바만 처리할 경우이다.

 

1. 무조건 상태바를 light 모드로 설정

   이경우 사용자가 핸드폰 설정에서 다크모드로 지정했더라고, 이 앱은 무조건 light 모드로 설정된다.

   제일 간단하고, 단순한 방법이다.

   이 방식은 상태바 뿐만 아니라, native 코드의 버튼, 뷰 등의 모드를 모두 light 모드로 설정하는것이다.

   info.plist 파일 선택후 우클릭 - Open As - Source Code 로 파일을 연후

   UIUserInterfaceStyle 에 Light 값을 넣는다.  ( Dark 값을 넣으면 기본이 다크 모드가 된다.) 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    ...
    <key>UIUserInterfaceStyle</key>
    <string>Light</string>
</dict>
</plist> 

실제 적용된 화면은 아래와 같다.

info.plist 에 속성 추가

   ===> 몇달뒤에 보니 또 변경 되었다.  Appearance에 Light를 넣으면 된다.

2. ViewController.swift 파일에서 소스코드로 적용하는 방법

   이 방식은 상태바 스타일만을 소스코드로 변경하는 방식이다. 주의할것은 .lightContent 가 다크모드를 의미한다. 즉 검은 바탕에 흰글씨가 표시된다. 여러개의 ViewController가 있을때 각각 다르게 설정할 수 있다.

 //@@@ 뷰컨트롤러 파일에서 설정
 override var preferredStatusBarStyle: UIStatusBarStyle {

        return .lightContent		// .default : 검은글씨에 흰바탕, .lightContent : 흰글씨에 검은 바탕

 }

 

3. 하나의 ViewController.swift 파일에서 동적으로 상태바를 변경하고 싶을때

  이 방식은 상태바 뿐만 아니라, native 코드의 버튼, 뷰 등의 모드를 임의의 ViewController 에서 변경할때 사용하는 방식이다.

  이때 주의할것은 setNeedsStatusBarAppearanceUpdate() 를 호출해줘야 상태바가 업데이트가 된다.

   func darkMode(){ 
  		print("@@@ darkMode")
        if #available(iOS 13.0, *) {
            // Always adopt a light / dark interface style.
            overrideUserInterfaceStyle = .dark  // 상태바는 흰글씨, 검은배경
            setNeedsStatusBarAppearanceUpdate()
        }
   }
   
   func lightMode(){     
        print("@@@ lightMode")
        if #available(iOS 13.0, *) {
            // Always adopt a light / dark interface style.
            overrideUserInterfaceStyle = .light // 상태바는 검은글씨, 흰배경
            setNeedsStatusBarAppearanceUpdate()
        }
   }     

참고 링크

https://developer.apple.com/documentation/uikit/uiviewcontroller/1621416-preferredstatusbarstyle

https://developer.apple.com/documentation/uikit/uiviewcontroller/1621354-setneedsstatusbarappearanceupdat

 

 

상태바의 배경색도 변경할 수 있다.

하이브리드앱을 사용하는 경우는 기본이 되는 view 전체의 백그라운드 컬러를 바꾸면 된다.

view.backgroundColor = UIColor(red: 0, green: 0.441, blue: 0.742, alpha: 1.0) // 배경색 변경, 파란색

이경우 아이폰 X 의 경우, 상단 상태바와 하단의 모서리가 있는 부분의 색이 같이 변경되게 된다. 즉 Safe Area 이외의 영역이다.

만약 상단에 있는 상태바의 배경색만 바꾸고 싶다면, 해당 영역에 view를 놓고, 그 백그라운드 색을  아래 처럼 변경하면된다.

상단 상태바 배경색 변경

  @IBOutlet weak var myStatus: UIView!
  
  myStatus.backgroundColor = UIColor(red: 0, green: 0.441, blue: 0.742, alpha: 1.0) // 상태바 배경색 변경, 파란색
  
  myStatus.backgroundColor = UIColor(red: 1.0, green: 1.0, blue: 1.0, alpha: 1.0) // 상태바 배경색 변경, 흰색

 

<< 참고 링크 >>

아이폰앱 상태바 색 설정 : https://g-y-e-o-m.tistory.com/150

[SWIFT] iOS 13대응 - UI(Modal 뷰, Present, 다크모드, StatusBar Color)

상태바 동적 변경

https://www.hackingwithswift.com/example-code/uikit/how-to-use-light-text-color-in-the-status-bar

 

상태바 변경 및 숨기기

https://zeddios.tistory.com/569

iOS ) UIStatusBar

 

다크모드 적용 :       https://caution-dev.github.io/ios/2019/12/02/DarkMode-%EC%A0%81%EC%9A%A9%ED%95%98%EA%B8%B0.html

DarkMode 적용하기