Customizing the UIKit status bar style

Customizing the UIKit status bar style
Photo by Szabo Viktor / Unsplash

애플리케이션의 user interface와 잘 어울리는 status bar의 style을 설정해보자

당연하게도 Status bar의 콘텐츠는 사용자가 읽을 수 있거나(readable) 볼 수 있어야(visible) 사용자 경험이 좋을 것이다.

예를 들면

위와 같이 Status bar를 구성하는 것보다

위 처럼 Status bar의 style을 구성해야한다는 것이다.

app level(앱 수준)또는 ViewController level(뷰 컨트롤러 수준)에서 UIStatusBarStyle 을 제어할 수 있다.

먼저 app level에서 전체 background color scheme과 잘 어울리는 UIStatusBarStyle 을 선택하고, ViewController level에서 특정 background color와 잘 어울리는 UIStatusBarStyle 을 선택한다.

Background color가 어두운 색인 경우 UIStatusBarStylelightContent로 설정하고, 배경이 밝은 색인 경우 UIStatusBarStyledarkContent로 설정한다.

Set a style for the entire app

앱 전체에 걸쳐 단일(single) status bar style을 사용하려면 info.plistUIViewControllerBasedStatusBarAppearance key를 추가하고, value로 false 를 설정한 후에, 특정 스타일로 UIStatusBarStyle 을 추가한다. 예를 들어 light content status bar를 설정하려면 다음과 같이 구성한다.

<key>UIStatusBarStyle</key>
<string>UIStatusBarStyleLightContent</string>

<key>UIViewControllerBasedStatusBarAppearance</key>
<false/>

info.plist 파일에 코드를 직접 기입하거나,

위 처럼 Xcode 상에서 입력할 수 있다.

Set a style for each view controller

각각의 뷰 컨트롤러에서 Status bar style을 지정할 수 있게하려면

먼저 아래와 Info.plist 에서 UIViewControllerBasedStatusBarAppearancetrue로 설정해야한다.

<key>UIStatusBarStyle</key>
<string>UIStatusBarStyleLightContent</string>

Initial root view controller의 Status bar style을 lightContent로  설정하고 싶은 경우 Info.plist에 위 처럼 항목을 추가한다.

마지막으로 각각의 뷰 컨트롤러의 preferredStatusBarStyle 속성을 override를 해준다.

예를들어 해당 뷰 컨트롤러의 Status bar style을 lightContent로 설정하고 싶다면 다음과 같이 작성하면 된다.


class ViewController: UIViewController {
	//..
    override var preferredStatusBarStyle: UIStatusBarStyle {
        return .lightContent
    }
    //..
}

특정 뷰 컨트롤러가 자식으로 포함되거나 UINavigationController 스택 안에 있는 경우 해당 부모 또는 UINavigationController가 Status bar style을 결정하게 된다.

하위에 포함하고 있는 뷰 컨트롤러의 각각의 자식 뷰 컨트롤러가 Status bar style을 제어할 수 있게 하려면  다음과 같이 childForStatusBarStyle 속성을 override하여 다음과 같이 Status bar style을 최상단에 있는 ViewController가 결정할 수 있도록 하면 된다.

visibleViewController 주석
class MyNavigationController: UINavigationController {
    // Return the visible child view controller which determines the status bar style.
    override var childForStatusBarStyle: UIViewController? {
        return self.visibleViewController
    }
}

UITabBarController를 사용할 때는 childForStatusBarStyle 속성을 override 하지 않아도 된다. UITabBarController는 Status bar style을 자식에게 요청한다.

Storyboard에 정의된 모든 UINavigationController에 대해 자식에게 Status bar style을 제어할 수 있게 하려면 해당 Custom class 이름을 Identity inspector의 UINavigationController 서브클래스 이름과 일치하도록 설정해야 한다.

이 접근 방식을 사용할 때 모든 자식 뷰 컨트롤러는 UINavigationBarAppearance에 사용하는 color scheme 또는 사용자 지정과 일치하는 Status bar style을 결정한다.

nil을 반환하거나 이 메서드를 override 하지 않으면 self에 대한 Status bar style이 사용된다.

이 메서드의 반환 값이 변경되면 setNeedsStatusBarAppearanceUpdate() 메서드가 호출된다.

배경색에 맞는 Status bar style을 사용하여 사용자가 정보를 확인하는데 있어 방해가 되지 않도록 하자💪

참고

TN3105: Customizing the UIKit status bar style | Apple Developer Documentation
Configure the device’s status bar style to work well with your app’s user interface.