Cordova(코르도바) 실행 로딩화면 Splashscreen(스플래시 스크린) 적용

 

Cordova의 Splashscreen는 Native App과 마찬가지로 Portrait(세로)와 Landscape(가로)를 지원합니다.

 

그리고 해상도 별로 각 다른 크기의 이미지를 지정해야 합니다.

 

Android는 Portrait와 Landscape별로 이미지를 따로 지정해야 하지만, iOS는 Universal이라는 명칭으로 Portrait와 Landscape를 함께 지정해서 사용합니다.

 

Android는 앱의 Orientation(화면방향)을 Portrait로 고정해서 Portrait Splashscreen만 지정해도 무관합니다. (반대로 Landscape도 가능)

 

그럼 Splashscreen을 적용하는 방법을 알아보겠습니다.

 

대상 플랫폼은 iOS(iPad+iPhone), Android 입니다.

 

 

이미지 제원 및 준비

Android

대상	Portrait(세로) px	Portrait 파일명	Landscape(가로) px	Landscape 파일명
ldpi	200x320	splash-port-hdpi.png	320x200	splash-land-hdpi.png
mdpi	320x480	splash-port-ldpi.png	480x320	splash-land-ldpi.png
hdpi	480x800	splash-port-mdpi.png	800x480	splash-land-mdpi.png
xhdpi	720x1280	splash-port-xhdpi.png	1280x720	splash-land-xhdpi.png
xxhdpi	960x1600	splash-port-xxhdpi.png	1600x960	splash-land-xxhdpi.png
xxxhdpi	1280x1920	splash-port-xxxhdpi.png	1920x1280	splash-land-xxxhdpi.png

 

iOS

대상	Universal px	파일명
2x*	2732x2732	Default@2x~universal~anyany.png
2x	1278x2732	Default@2x~universal~comany.png
2x	1334x750	Default@2x~universal~comcom.png
3x*	2208x2208	Default@3x~universal~anyany.png
3x	2208x1242	Default@3x~universal~anycom.png
3x	1242x2208	Default@3x~universal~comany.png

 

 

이미지 파일 위치

Splashscreen 이미지가 준비가 되면, 각 플랫폼 별로 이미지 파일을 복사합니다.

• Android : res/screen/android/
• iOS : res/screen/ios/

 

 

config.xml 편집

config.xml 파일을 편집기에서 열어서 각 플랫폼 별로 이미지를 지정합니다.

<widget id=...>
  ...
  <platform name="android">
    ...
    <splash src="res/screen/android/splash-port-hdpi.png" density="port-hdpi" />
    <splash src="res/screen/android/splash-port-ldpi.png" density="port-ldpi" />
    <splash src="res/screen/android/splash-port-mdpi.png" density="port-mdpi" />
    <splash src="res/screen/android/splash-port-xhdpi.png" density="port-xhdpi" />
    <splash src="res/screen/android/splash-port-xxhdpi.png" density="port-xxhdpi" />
    <splash src="res/screen/android/splash-port-xxxhdpi.png" density="port-xxxhdpi" /> 
    <splash src="res/screen/android/splash-land-hdpi.png" density="land-hdpi" />
    <splash src="res/screen/android/splash-land-ldpi.png" density="land-ldpi" />
    <splash src="res/screen/android/splash-land-mdpi.png" density="land-mdpi" />
    <splash src="res/screen/android/splash-land-xhdpi.png" density="land-xhdpi" />
    <splash src="res/screen/android/splash-land-xxhdpi.png" density="land-xxhdpi" />
    <splash src="res/screen/android/splash-land-xxxhdpi.png" density="land-xxxhdpi" />
  </platform>
  <platform name="ios">
    ...
    <splash src="res/screen/ios/Default@2x~universal~anyany.png" />
    <splash src="res/screen/ios/Default@2x~universal~comany.png" />
    <splash src="res/screen/ios/Default@2x~universal~comcom.png" />
    <splash src="res/screen/ios/Default@3x~universal~anyany.png" />
    <splash src="res/screen/ios/Default@3x~universal~anycom.png" />
    <splash src="res/screen/ios/Default@3x~universal~comany.png" />
  </platform>
  ...
</widget>

Android에서 Portrait만 사용시 splash-land-xxxx 는 제외할 수 있으며, Landscape만 사용할 경우에도 마찬가지로 반대로 제외할 수 있습니다.

 

 

Splashscreen 숨김 규칙 지정

config.xml 파일에서 어떻게 숨겨질지 지정합니다.

 

- 일정 시간이 지나면 자동으로 숨길 경우 (단위 : milliseconds(밀리초))

config.xml 파일 편집기로 열어 아래 내용을 추가합니다.

<widget id=...>
  ...
  <preference name="AutoHideSplashScreen" value="true" />
  <preference name="SplashScreenDelay" value="3000" />
</widget>

 

- 직접 코드로 추가하여 숨길 경우 (페이지 로딩이 끝난 후 등의 원하는 시점)

config.xml 파일 편집기로 열어 아래 내용을 추가합니다.

<widget id=...>
  ...
  <preference name="AutoHideSplashScreen" value="false" />
</widget>

코드로 직접 숨기려는 경우, js파일에서 deviceready 이벤트가 발생된 이후의 원하는 곳에 navigator.splashscreen.hide() 코드를 삽입합니다.

...
onDeviceReady: function() {
  ...
  navigator.splashscreen.hide();
  ...
}

 

 

프로젝트 빌드 및 실행

준비가 끝났습니다. 빌드 및 실행해서 확인해 봅니다.

> cordova build android
> cordova run android

 

 

참고

화면 고정 및 회전 방법은 아래 글을 참고해주세요.

https://bundw.tistory.com/67

Cordova(코르도바) Orientation(화면) 가로,세로 고정 및 회전 지정

https://cordova.apache.org/docs/en/10.x/reference/cordova-plugin-splashscreen/

Splashscreen - Apache Cordova