cordova-plugin-statusbar 사용법.

cordova를 사용하여 하이브리드 앱을 만들 때 신경이 쓰이는 것이.

이렇게. 스테이터스 바(캐리어라든지 충전등의 바)와 HTML5로 쓴 컨텐츠가 쓰여져 있는 것. 보기 힘들고 기분 나쁘고 어떻게 하고 싶다.

이런 과제를 해결하는 plugin으로서 cordova-plugin-statusbar 라는 것이 있다.
망비록으로 써 남긴다.

1. plugin의 소개.

다른 플러그인의 도입과 마찬가지로

~$ cordova plugin add cordova-plugin-statusbar

이제 OK. 일단 확인해 보면

~$ cordova plugin list                                                     
cordova-plugin-statusbar 1.0.1 "StatusBar"
cordova-plugin-whitelist 1.0.0 "Whitelist"
org.apache.cordova.console 0.2.13 "Console"
org.apache.cordova.device 0.3.0 "Device"

되어 있다. 제대로 StatusBar 들어있어.

2. 설정

config.xml 파일에 조금 쓰는 것만으로 OK.

config.xml

<preference name="StatusBarOverlaysWebView" value="false" />
<preference name="StatusBarBackgroundColor" value="#00FF00" />

이런 느낌의 코드를 name 태그와 같은 들여쓰기의 높이로 추가.

StatusBarOverlaysWebView

「WebView의 컨텐츠에 스테이터스 바를 씌울지 어떨지」를 설정할 수 있다. 쓸 수 있다면 value="true", 쓸 수 없다면 value="false". 이번에 쓰고 싶지 않기 때문에 value="false".

StatusBarBackgroundColor

「스테이터스 바의 배경색을 몇 색으로 할까」를 설정할 수 있다.
자신이 좋아하는 색상을 value로 설정합시다.

⭐︎ JS에서 StatusBar 객체를 통해 설정할 수도 있습니다. 자세한 것은 본가에서.

변경 후 실행하면 다음과 같아야합니다.

그래, 제대로 입지 않았다! 깔끔합니다.

참고

cordova-plugin-statusbar