iOS ) UIStatusBar

안녕하세요 :) Zedd입니다.

뭔가 statusBar에 대해서 제대로 공부한 적이 없는 것 같아서 이번기회에 제대로 공부해보려 합니다 :0!!

statusBar가 뭔지는 다들 아시죠!?! 상태표시줄!!!!!

요거 !!

ㅎㅎㅎ이 글 안에서는..상태표시줄보다는 statusBar라고 표현할게요.

일단 statusBar에 대해서 공부하기 전에 HIG를 한번 봅시다.

오랜만의 HIG...HIG라 조금 딱딱하게 번역이 될 것 같네요. 

Status Bars

---

statusBar는 화면의 상단 가장자리에 표시되며 시간, 이동통신사, 네트워크 상태 및 배터리 수준과 같은 디바이스의 현재 상태에 대한 유용한 정보를 표시합니다. statusBar에 표시된 실제 정보는 디바이스 및 시스템 구성에 따라 다릅니다.

• Use the system-provided status bar. (시스템에서 제공하는 status Bar를 사용하세요.)

사람들은 status Bar이 시스템 전체에서 일관될 것으로 기대합니다. 커스텀 status Bar로 바꾸지 마십시오.

• Coordinate the status bar style with your app design. (status Bar스타일을 앱 디자인과 함께 조정하세요.)

status Bar의 텍스트 및 비쥬얼 스타일은 밝거나 어둡습니다. 앱에 대해 전역적이거나 각 화면에 대해 개별적으로 설정할 수 있습니다. 어두운 status Bar는 밝은 색상의 콘텐츠 위에서 잘 작동하고, 밝은 status Bar는 어두운 색상의 콘텐츠 위에서 잘 작동합니다.

• Obscure content under the status bar.(status Bar아래에 있는 내용을 흐리게 표시하세요.)

기본적으로 status Bar의 배경은 투명하므로, 아래에 있는 콘텐츠를 표시할 수 있습니다. status Bar을 읽을 수 있게 유지하고, 그 뒤에 있는 콘텐츠가 상호작용 할 수 있다는 것을 암시하지 마십시오. 이 작업을 수행하는 몇가지 일반적인 방법은 다음과 같습니다.

- 앱의 navigation bar를 사용하면, 자동으로 status Bar배경이 표시되며, status Bar아래에 콘텐츠가 표시되지 않습니다.

- status Bar뒤에 gradient(그라데이션) 또는 solid color(단색)과 같은 사용자 정의 이미지를 표시하십시오.

- status Bar뒤에 blurred view를 배치하십시오. UIBlurEffect를 참고하십시오.

• Consider temporarily hiding the status bar when displaying full-screen media.(전체 화면 미디어를 표시할 때 status Bar를 일시적으로 숨기십시오.)

사용자가 미디어에 집중하려고 할 때 status Bar때문에 주의가 산만해질 수 있습니다. 이러한 요소를 일시적으로 숨겨, 보다 몰입적인 환경을 제공하십시오. 예를들어, 사진앱은 사용자가 전체화면 사진을 탐색할 때, status Bar와 기타 인터페이스 요소를 숨깁니다. 

• Avoid permanently hiding the status bar.(status Bar를 영구적으로 숨기지 마십시오.)

status Bar가 없으면 앱을 닫아 시간을 확인하거나 Wi-Fi에 연결되어있는지 확인해야합니다. 간단하고 쉽게 발견가능한 제스쳐를 사용하여 사람들이 숨겨진 status Bar를 다시 표시하도록 하십시오. 사진앱에서 전체화면을 탐색 할 때, 한 번 탭하면 status Bar가 다시 표시됩니다. 

• Use the status bar to denote network activity. (status Bar를 사용하여 네크워크 활동을 나타냅니다.)

앱이 네트워크를 사용하는 경우, (특히 오랜기간 작동하는 경우) 네트워크 활동 status Bar indicator를 표시하여 사람들이 네트워크 활동이 일어나고 있다는 것을 알게하십시오. Network Activity Indicators를 참고하십시오.

개발자 가이드는 UIApplication의 UIStatusBarStyle와 UIViewController의 preferredStatusBarStyle프로퍼티를 참조하십시오. 

네! HIG를 보았는데요 status Bar도 개발하면서 잘 신경을 써줘야 한다는 것을 알 수 있습니다....ㅎㅎ

그럼 우리는 개발자니까 맨 마지막줄의 

"개발자 가이드는 UIApplication의 UIStatusBarStyle와 UIViewController의 preferredStatusBarStyle프로퍼티를 참조하십시오. "

를 참고하여 공부를 해봅시다.

먼저 UIStatusBarStyle.

UIStatusBarStyle

---

자 위에서 언급되었듯이, status Bar는 검정색이 될 수도 있고, 하얀색이 될 수도 있어요.

검은색 배경에 검정색 status Bar가 있으면 안보이겠죠? 그 반대도 마찬가지구요.

그래서 우리는 위에서 언급된 navigation bar를 사용한다거나..그렇지 않은 상황이라면 status bar를 뒤에있는 콘텐츠의 색상에 따라 바꿔줄 필요가 있습니다.

그걸 가능하게 해주는 것이 바로 UIStatusBarStyle인데요, UIApplication안에 있는 enum입니다.

case로는 아래와 같은 것들이 있는데, 

한번에 알 수 있죠. 

default는 검정색, lightContent는 status Bar가 하얀색이 됩니다. 

lightContent면 뭔가 밝은 느낌의 "콘텐츠"라 status Bar가 검정색이 되어야 할 것 같지 않나요?..아님말고..이름이 저한테는 어색한 느낌이에용..

이런게 있다,..알아두시고, 이제 이걸 사용해서 preferredStatusBarStyle를 사용하면 됩니다.

preferredStatusBarStyle

---

preferredStatusBarStyle은 UIViewController의 인스턴스 프로퍼티입니다.

요 preferredStatusBarStyle은 우리가 방금 공부했던 UIStatusBarStyle타입을 리턴하죠.

사용하는 방법은 viewController안에서 

 override var preferredStatusBarStyle: UIStatusBarStyle {

        return .lightContent

    }

preferredStatusBarStyle를 재정의 하면 됩니다. 저는 lightContent를 리턴했으니, "현재" viewController안에서는 status Bar가 하얀색이 되겠네요.

새롭게 열린 ViewController는 검정색이죠?

그렇다면 현재 ViewController에서 status Bar를 숨기고 싶다!!!

역시나 prefersStatusBarHidden라는 인스턴스 프로퍼티가 있습니다. true면 숨기겠다! false면 안숨기겠다! 죠.

 override var prefersStatusBarHidden: Bool {
        return true
    }

딱 현재 ViewController에서만 status Bar가 사라졌죠?

preferredStatusBarUpdateAnimation이라는 것도 있는데요, 

이름에서 볼 수 있듯이 status bar가 업데이트 되는데 animation을 가지고 업데이트 된다..뭐 이런것 같네요.

역시나 UIViewController의 인스턴스 프로퍼티로, viewController의 statusBar를 숨기거나 표시하는데 사용할 animation style을 지정 할 수 있습니다.

return타입으로  UIStatusBarAnimation를 리턴하는데요,  UIStatusBarAnimation는 UIApplication의 enum입니다. 







케이스는 3가지가 있는데요, 이름만 봐도 알 수 있겠죠...

그럼 preferredStatusBarUpdateAnimation를 사용해봅시다.

preferredStatusBarUpdateAnimation는 뭔가 UIStatusBarAnimation의 none case가 default일 것 같지만, fade가 default입니다. 

그리고 preferredStatusBarUpdateAnimation를 사용하면서 꼭 알아야 할 사실이 있는데요, 

당연한거긴 하지만..

preferredStatusBarUpdateAnimation프로퍼티는 prefersStatusBarHidden를 사용하여 status Bar의 숨김 상태를 변경한 경우에만 작동한답니다 :)

그럼 사용해볼까요? 

  var isStatusBarHidden: Bool = false

  override var prefersStatusBarHidden: Bool {

        return self.isStatusBarHidden

    }

override var preferredStatusBarUpdateAnimation: UIStatusBarAnimation {

        return .fade

    }

기본이 fade지만..한번 어떻게 사라지는지 봅시다.  

일단 이렇게 해놓고. 저 isStatusBarHidden를 어디선가 값을 바꿔줘야겠죠?

 @IBAction func buttonDidTap(_ sender: Any) {

        self.isStatusBarHidden = !self.isStatusBarHidden

        UIView.animate(withDuration: 0.3, animations: {

            self.setNeedsStatusBarAppearanceUpdate()

        })

    }

 저는 그냥 버튼 하나 만들어줘서 클릭하면 값이 바뀌도록 했습니다. 그리고 가장 중요한 부분이 저. setNeedsStatusBarAppearanceUpdate()를 호출하는 것인데요, 

ViewController의 status Bar의 특성이 변경되었음을 시스템에 알리는 역할을 합니다.

저 메소드를 호출하지 않으면 

  var isStatusBarHidden: Bool = false

  override var prefersStatusBarHidden: Bool {

        return self.isStatusBarHidden

  }

isStatusBarHidden의 값이 처음에 false였기 때문에 prefersStatusBarHidden는 false를 리턴했을 거고, 

결과적으로 status Bar가 사라지지 않았겠죠? 

prefersStatusBarHidden가 한번 더 호출이 되어서 현재 true로 업데이트 된 isStatusBarHidden를 리턴해줘야 하는데 prefersStatusBarHidden가 호출이 되지 않기 때문에 status bar가 사라지지 않습니다.

그러니까 꼭!!! 어떤것이든 내 코드 안에서 status Bar의 특성을 변경했으면, setNeedsStatusBarAppearanceUpdate()를 호출해주세요. 

 @IBAction func buttonDidTap(_ sender: Any) {

        self.isStatusBarHidden = !self.isStatusBarHidden

        UIView.animate(withDuration: 0.3, animations: {

            self.setNeedsStatusBarAppearanceUpdate()

        })

    }

그리고 또 주의해야 할점...UIView.animate안에 안넣어주면, 지정해준 animation이 안먹고 그냥 샥 사라집니다;; 

setNeeds~라 그런거 같음 ㅎ

그러면 한 번 fade로 사라지는 것을 봅시다.

올ㅋ

none은 animation이 없다는거니..none으로 지정하면 샥하고 바로 사라집니다.

마지막으로 남은 slide를 볼까요? 

슝슝

다시한번 말하지만 기본값은 fade니까..평타는 칩니다.

갸ㅑㅑㅑ

statusBar재밌네요..!!! 

궁금한점이나, 틀린부분이 있다면 댓글이나 PC화면 오른쪽 하단의 채널 서비스를 통해서 메세지 주세요 XD

출처 : https://developer.apple.com/design/human-interface-guidelines/ios/bars/status-bars/