FAQ : 아이콘 / 스플래시 화면 (Cordova 5.x / 2015)

아이콘 / 스플래시 화면을 다루는 동안 발생한 많은 문제를 해결하는 데 도움이 될 수있는 일반적인 FAQ로 제 답변을 제시합니다. 나처럼 문서가 항상 명확하거나 최신이 아니라는 것을 알 수 있습니다. 가능한 경우 StackOverflow 문서 로 이동 합니다.

첫째 : 질문에 답하기

Phonegap을 사용하여 iOS 및 Android 용 사용자 지정 앱 아이콘을 추가하려면 어떻게해야합니까?

코르도바의 버전에서icon 태그는 쓸모가 없다. Cordova 3.0.0에는 문서화되어 있지 않습니다. 최신 버전이 아닌 사용중인 cli에 맞는 문서 버전을 사용해야합니다!

아이콘 태그는 내가 문서의 서로 다른 버전에서 볼 수있는 내용에 따라 버전 3.5.0 전에 모든 안드로이드 작동하지 않습니다. 3.4.0에서는 여전히 파일을 수동으로 복사하라는 조언이 있습니다.

최신 버전 : config.xml최신 Cordova 버전이 더 좋아 보입니다. 그러나 여전히 알고 싶은 것이 많이 있습니다. 업그레이드하기로 결정한 경우 수정해야 할 몇 가지 유용한 사항이 있습니다.

• gap:네임 스페이스 가 필요하지 않습니다.
• <preference name="SplashScreen" value="screen" />Android 가 필요 합니다.

---

다음은 아이콘과 스플래시 화면을 처리 할 때 스스로에게 물어볼 수있는 질문에 대한 자세한 내용입니다.

이전 버전의 Cordova / Phonegap을 사용할 수 있습니까?

아니요, 아이콘 / 스플래시 화면 기능은 이전 버전의 Cordova에 없었으므로 최신 버전을 사용해야합니다. 이전 버전에서는 Phonegap Build만이 아이콘 / 스플래시 화면을 처리 했으므로 로컬에서 빌드하고 아이콘을 처리하는 것은 후크로만 가능했습니다. 이 기능을 사용하기위한 최소 버전을 모르지만 5.1.1에서는 Cordova / Phonegap cli 모두에서 제대로 작동합니다. Cordova 3.5에서는 작동하지 않았습니다.

편집 : Android의 경우 3.5.0 이상을 사용해야합니다.

아이콘에 대한 빌드 프로세스를 디버그하려면 어떻게해야합니까?

cli는 CP 명령을 사용합니다. 잘못된 아이콘 경로를 제공하면 cp오류 가 표시됩니다 .

sebastien@sebastien-xps:cordova (dev *+$%)$ cordova run android --device
cp: no such file or directory: /home/sebastien/Desktop/Stample-react/cordova/res/www/stample_splash.png

편집 : cordova build <platform> --verbose아이콘이 복사되는 위치를 확인하기 위해 cp 명령 사용 로그를 얻는 데 사용 했습니다.

아이콘은 구성에 따라 폴더에 있어야합니다. 나를 위해 그것은 많은 하위 폴더에 있습니다.platforms/android/build/intermediates/res/armv7/debug/drawable-hdpi-v4/icon.png

그런 다음 APK를 찾아서 zip 아카이브로 열어 아이콘이 있는지 확인할 수 있습니다. Android 용 특수 폴더res/drawable* 이므로 폴더에 있어야합니다 .

프로젝트에서 아이콘 / 스플래시 화면을 어디에 배치해야합니까?

많은 예에서 아이콘 / 스플래시 화면이 res폴더 안에 선언되어 있음을 알 수 있습니다. 이것은 res출력 APK의 특수 Android 폴더이지만 res프로젝트에서 폴더 를 사용해야한다는 의미는 아닙니다 .

아이콘은 어디에나 놓을 수 있지만 사용하는 경로 는 프로젝트의 루트에 상대적 이어야 하며www 주의 하지 마십시오 ! 이것은 문서화되어 있지만 모든 예제가 사용 res하고 있으며이 폴더가 어디에 있는지 모르기 때문에 명확 하지는 않습니다.

내 말은 아이콘을 넣으면 www/icon.png절대적으로 www경로에 포함해야 함 을 의미합니다.

Mars 2016 편집 : 버전을 업그레이드 한 후 이제 아이콘이 www폴더에 상대적인 것처럼 보이지만 문서가 변경되지 않았습니다 ( 문제 ).

합니까의 <icon src="icon.png"/>작업?

아니 그렇지 않아! .

Android에서는 이전에는 (밀도 속성이 아직 지원되지 않았을 때?) 작동했지만 더 이상 작동하지 않는 것 같습니다. 이 Cordova 문제보기

iOS에서는이 전역 선언을 사용하면 보다 구체적인 선언 이 재정의 될 수 있으므로 --verbose모든 것이 예상대로 작동하도록 주의하고 빌드하십시오 .

모든 밀도에 대해 동일한 아이콘 / 스플래시 화면 파일을 사용할 수 있습니까?

그래 넌 할수있어. 아이콘과 스플래시 화면 모두에 동일한 파일을 사용할 수도 있습니다 (테스트 용입니다!). 문제없이 65kb의 “큰”아이콘 파일을 사용했습니다.

플랫폼 태그와 플랫폼 속성을 사용할 때의 차이점은 무엇입니까?

<icon src="icon.png" platform="android" density="ldpi" />

와 같다

<platform name="android">
    <icon src="www/stample_icon.png" density="ldpi" />
</platform>

Phonegap을 사용하는 경우 gap : 네임 스페이스를 사용해야합니까?

내 경험상 Phonegap 또는 Cordova의 새 버전은 gap:xml 네임 스페이스 를 사용하지 않고도 아이콘 선언을 이해할 수 있습니다.

그러나 나는 여전히 유효한 대답을 기다리고 있습니다 : cordova / phonegap plugin add VS config.xml

내가 이해하는 한 gap:네임 스페이스가있는 일부 기능 은 PhonegapBuild에서 이전에 사용할 수 있으며 Phonegap에서 사용할 수 있으며 Cordova (?)

인가 <preference name="SplashScreen" value="screen" />가 필요?

적어도 안드로이드에서는 그렇습니다. 추가 설명으로 문제 를 열었습니다 .

아이콘 선언 순서가 중요합니까?

네 그렇습니다! Android에는 영향을 미치지 않을 수 있지만 테스트에 따르면 iOS에는 영향을 미칩니다. 이것은 예상치 못한 문서화되지 않은 동작이므로 다른 문제를 열었습니다 .

내가 필요 cordova-plugin-splashscreen합니까?

예, 스플래시 화면이 작동하려면 절대적으로 필요합니다. 문서는 명확하지 않으며 ( issue ) 플러그인은 스플래시 화면 자바 스크립트 API를 제공하는 데만 필요하다고 생각합니다.

모든 너비 / 높이 / 밀도의 이미지 크기를 빠르게 조정하려면 어떻게해야합니까?

그렇게하는 데 도움이되는 도구가 있습니다. 나에게 가장 좋은 것은 http://makeappicon.com/ 이지만 이메일 주소를 제공해야합니다.

기타 가능한 솔루션은 다음과 같습니다.

• AndroidAssetStudio
• https://gist.github.com/LinusU/7515016
• 코르도바 아이콘

나에게 구성 예제를 줄 수 있습니까?

예. 여기 내 진짜config.xml

<?xml version='1.0' encoding='utf-8'?>
<widget id="co.x" version="0.2.6" xmlns="http://www.w3.org/ns/widgets" xmlns:android="http://schemas.android.com/apk/res/android" xmlns:cdv="http://cordova.apache.org/ns/1.0" xmlns:gap="http://phonegap.com/ns/1.0">
    <name>x</name>
    <description>
        x
    </description>
    <author email="info@x.co" href="https://x.co">
        x
    </author>
    <content src="index.html" />
    <preference name="permissions"                  value="none" />
    <preference name="webviewbounce"                value="false" />
    <preference name="StatusBarOverlaysWebView"     value="false" />
    <preference name="StatusBarBackgroundColor"     value="#0177C6" />
    <preference name="detect-data-types"            value="true" />
    <preference name="stay-in-webview"              value="false" />
    <preference name="android-minSdkVersion"        value="14" />
    <preference name="android-targetSdkVersion"     value="22" />
    <preference name="phonegap-version"             value="cli-5.1.1" />

    <preference name="SplashScreenDelay"            value="10000" />
    <preference name="SplashScreen"                 value="screen" />


    <plugin name="cordova-plugin-device"                spec="1.0.1" />
    <plugin name="cordova-plugin-console"               spec="1.0.1" />
    <plugin name="cordova-plugin-whitelist"             spec="1.1.0" />
    <plugin name="cordova-plugin-crosswalk-webview"     spec="1.2.0" />
    <plugin name="cordova-plugin-statusbar"             spec="1.0.1" />
    <plugin name="cordova-plugin-screen-orientation"    spec="1.3.6" />
    <plugin name="cordova-plugin-splashscreen"          spec="2.1.0" />

    <access origin="http://*" />
    <access origin="https://*" />

    <access launch-external="yes" origin="tel:*" />
    <access launch-external="yes" origin="geo:*" />
    <access launch-external="yes" origin="mailto:*" />
    <access launch-external="yes" origin="sms:*" />
    <access launch-external="yes" origin="market:*" />

    <platform name="android">
        <icon src="www/stample_icon.png" density="ldpi" />
        <icon src="www/stample_icon.png" density="mdpi" />
        <icon src="www/stample_icon.png" density="hdpi" />
        <icon src="www/stample_icon.png" density="xhdpi" />
        <icon src="www/stample_icon.png" density="xxhdpi" />
        <icon src="www/stample_icon.png" density="xxxhdpi" />
        <splash src="www/stample_splash.png" density="land-hdpi"/>
        <splash src="www/stample_splash.png" density="land-ldpi"/>
        <splash src="www/stample_splash.png" density="land-mdpi"/>
        <splash src="www/stample_splash.png" density="land-xhdpi"/>
        <splash src="www/stample_splash.png" density="land-xhdpi"/>
        <splash src="www/stample_splash.png" density="land-xhdpi"/>
        <splash src="www/stample_splash.png" density="port-hdpi"/>
        <splash src="www/stample_splash.png" density="port-ldpi"/>
        <splash src="www/stample_splash.png" density="port-mdpi"/>
        <splash src="www/stample_splash.png" density="port-xhdpi"/>
        <splash src="www/stample_splash.png" density="port-xxhdpi"/>
        <splash src="www/stample_splash.png" density="port-xxxhdpi"/>
    </platform>

    <platform name="ios">
        <icon src="www/stample_icon.png" width="180" height="180" />
        <icon src="www/stample_icon.png" width="60" height="60" />
        <icon src="www/stample_icon.png" width="120" height="120" />
        <icon src="www/stample_icon.png" width="76" height="76" />
        <icon src="www/stample_icon.png" width="152" height="152" />
        <icon src="www/stample_icon.png" width="40" height="40" />
        <icon src="www/stample_icon.png" width="80" height="80" />
        <icon src="www/stample_icon.png" width="57" height="57" />
        <icon src="www/stample_icon.png" width="114" height="114" />
        <icon src="www/stample_icon.png" width="72" height="72" />
        <icon src="www/stample_icon.png" width="144" height="144" />
        <icon src="www/stample_icon.png" width="29" height="29" />
        <icon src="www/stample_icon.png" width="58" height="58" />
        <icon src="www/stample_icon.png" width="50" height="50" />
        <icon src="www/stample_icon.png" width="100" height="100" />
        <splash src="www/stample_splash.png" width="320" height="480"/>
        <splash src="www/stample_splash.png" width="640" height="960"/>
        <splash src="www/stample_splash.png" width="768" height="1024"/>
        <splash src="www/stample_splash.png" width="1536" height="2048"/>
        <splash src="www/stample_splash.png" width="1024" height="768"/>
        <splash src="www/stample_splash.png" width="2048" height="1536"/>
        <splash src="www/stample_splash.png" width="640" height="1136"/>
        <splash src="www/stample_splash.png" width="750" height="1334"/>
        <splash src="www/stample_splash.png" width="1242" height="2208"/>
        <splash src="www/stample_splash.png" width="2208" height="1242"/>
    </platform>

    <allow-intent href="*" />
    <engine name="browser" spec="^3.6.0" />
    <engine name="android" spec="^4.0.2" />
</widget>

좋은 예는 스타터 키트입니다. phonegap-start 또는 Ionic 스타터 처럼