Phonegap 프로젝트에 앱 아이콘을 추가하는 방법은 무엇입니까?
기본 config.xml을 사용하여 새 phonegap (v 3.0.0-0.14.0) 프로젝트를 만든 다음 iOS 및 Android 플랫폼을 추가했습니다.
구성에는 모든 플랫폼 아이콘에 대한 모든 경로가 포함됩니다.
경로와 이름이 여전히 해당 png와 일치하도록 iOS 및 Android의 기본 아이콘을 덮어 썼습니다.
시뮬레이터에서 실행할 때 아이콘이 표시되지 않습니다. xCode에서 아이콘의 "Resources"폴더에 여전히 phonegap 기본 아이콘이 포함되어 있음을 알 수 있습니다. Android와 동일합니다.
내가 뭘 잘못하고 있죠?
Phonegap을 사용하여 iOS 및 Android 용 사용자 정의 앱 아이콘을 추가하려면 어떻게해야합니까?
감사
내 config.xml
<icon src="icon.png" />
<icon gap:density="ldpi" gap:platform="android" src="res/icon/android/icon-36-ldpi.png" />
<icon gap:density="mdpi" gap:platform="android" src="res/icon/android/icon-48-mdpi.png" />
<icon gap:density="hdpi" gap:platform="android" src="res/icon/android/icon-72-hdpi.png" />
<icon gap:density="xhdpi" gap:platform="android" src="res/icon/android/icon-96-xhdpi.png" />
<icon gap:platform="ios" height="57" src="res/icon/ios/icon-57.png" width="57" />
<icon gap:platform="ios" height="72" src="res/icon/ios/icon-72.png" width="72" />
<icon gap:platform="ios" height="114" src="res/icon/ios/icon-57-2x.png" width="114" />
<icon gap:platform="ios" height="144" src="res/icon/ios/icon-72-2x.png" width="144" />
<icon gap:platform="blackberry" src="res/icon/blackberry/icon-80.png" />
<icon gap:platform="blackberry" gap:state="hover" src="res/icon/blackberry/icon-80.png" />
<icon gap:platform="webos" src="res/icon/webos/icon-64.png" />
<icon gap:platform="winphone" src="res/icon/windows-phone/icon-48.png" />
<icon gap:platform="winphone" gap:role="background" src="res/icon/windows-phone/icon-173.png" />
다행스럽게도 스플래시 이미지에 대한 문서가 약간 있으므로 아이콘 이미지에 대한 올바른 위치를 찾는 데 도움이됩니다. 그래서 여기에 있습니다.
파일 배치 위치 명령 줄 인터페이스 "cordova build ios"를 사용하여 프로젝트를 빌드 한 후에는 platforms/ios/폴더에 iOS 앱에 대한 완전한 파일 구조가 있어야 합니다.
이 폴더 안에는 앱 이름이있는 폴더가 있습니다. 차례로 및 폴더를 resources/찾을 수 있는 디렉토리가 포함 됩니다 .icons/splashscreen/
아이콘 폴더에는 4 개의 아이콘 파일 (57px 및 72px, 각각 일반 및 @ 2x 버전)이 있습니다. 지금까지 보신 Phonegap 자리 표시 자 아이콘입니다.
해야 할 일
이 폴더에 아이콘 파일을 저장하기 만하면됩니다. 그래서 그건:
YourPhonegapProject/Platforms/ios/YourAppName/Resources/icons
스플래시 화면 파일과 동일합니다.
노트
거기에 파일을 배치 한 후
cordova build iosxCode의 '제품 정리'메뉴 명령을 사용 하여 프로젝트를 다시 빌드하십시오 . 이것이 없으면 여전히 Phonegap 자리 표시자가 표시됩니다.info.plist 또는 config.xml에서 이름을 편집하는 대신 파일 이름을 iOS / Apple 방식 (예 : icon-72@2x.png 등)으로 변경하는 것이 가장 현명합니다. 적어도 그것은 나를 위해 일했습니다.
그리고 config.xml (예 :)의 아이콘에 지정된 이상한 경로와 이상한 파일 이름은 무시하십시오
<icon gap:platform="ios" height="114" src="res/icon/ios/icon-57-2x.png" width="114" />. 나는 그 정의를 거기에 남겨 두었고 내 114px 아이콘의 이름icon@2x.png이icon-57-2x.png.아이콘에 대한 Apple의 광택 효과를 방지하기 위해 config.xml을 사용하지 마십시오. 대신 xCode의 상자를 선택합니다 (왼쪽 탐색 열에서 프로젝트 제목을 클릭하고 대상 헤더 아래에서 앱을 선택한 다음 아이콘 섹션까지 아래로 스크롤).
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/ 이지만 이메일 주소를 제공해야합니다.
기타 가능한 솔루션은 다음과 같습니다.
나에게 구성 예제를 줄 수 있습니까?
예. 여기 내 진짜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 스타터 처럼
Cordova 3.5.0-0.2.6부터 <icon />config.xml 의 요소는 다음주의 사항과 함께 작동합니다.
src속성은 프로젝트 루트 폴더에 상대적인 경로입니다. 이 문제에 대한 문제 추적기는 변경 이유입니다.The
<icon src="..." />element without resolution/dpi is documented as the icon used by all platforms as the default icon. However, on android builds, the default icon is only copied to the android drawable folder, without specific resolutions set. This makes you custom icon appear in the/res/drawablefolder, and the cordova default icon with specific resolutions exists in the other folders inside the final apk (i.e./res/drawable-ldpi). You must add one icon element inconfig.xmlfor each resolution on the android platform.
For instance, if your icon image is in the path www/res/img/icon.png relative to your root project, this lines in config.xml makes your app icon in android works:
<!-- Default application icon -->
<icon src="www/res/img/icon.png" />
<!--
Default icon should work, but cordova don't overwrite
the default on all densities
-->
<icon src="www/res/img/icon.png" platform="android" density="ldpi" />
<icon src="www/res/img/icon.png" platform="android" density="mdpi" />
<icon src="www/res/img/icon.png" platform="android" density="hdpi" />
<icon src="www/res/img/icon.png" platform="android" density="xhdpi" />
With that configuration in place, you can have a single image icon for all resolutions overwriting the default cordova icon, and without custom hoooks. Simply building with cordova build android should do the trick.
If you want an easy-to-use way to add icons automatically when building locally (cordova emulate ios, cordova run android, etc) have a look at this gist:
https://gist.github.com/LinusU/7515016
Hopefully this will start to work out of the box sometime in the future, here is the relevant bug report on the Cordova project:
https://issues.apache.org/jira/browse/CB-2606
You have to create a config.xml file in which you shall put the icon file
<?xml version="1.0" encoding="ISO-8859-1" ?>
<widget xmlns = "http://www.w3.org/ns/widgets"
xmlns:gap = "http://phonegap.com/ns/1.0"
id = "example"
version = "1.0.0">
<icon src="icon.png" />
</widget>
Check this: https://build.phonegap.com/docs/config-xml
there is iOS specific icons
Since most of the answers here are targeted towards iOS here's a solution for changing icon in Android.
For android:
Make changes in <project location>\platforms\android\ant-build\res and not <project location>\platforms\android\res
For some people making changes in the latter location may have worked, but having noticed Phonegap copying from \android\res into \android\ant-build\res, I decided to check in there and found a separate set of drawable folders containing the default phonegap icon.
Changing those finally worked.
Since I'm building and running locally and not using Adobe PhoneGap Build, changing icons in <project location>\www\res\icon\android didn't work either.
I'm running phonegap 3.1.0-0.15.0, since iOS7 changed the resolution to 120x120px I just added a file with those dimensions to the project then changed the info.plist file.
- Add a 120x120 file to the project, by right clicking the project file in Xcode and selecting, "Add files to "[Your Project Name]"...
- Go to the info.plist file in Xcode "Resources/[Your Project Name]-info.plist"
- Under "Icon files (iOS 5)/Primary Icon/Icon files" change "Item 2" to whatever the filename your file had (I called mine "icon-120.png which I placed in the Project folder along side all the other icons, though this shouldn't matter)
More info can be found here: http://www.digifloor.com/missing-recommended-icon-file-error-ios-app-13
To fix the splash screen in iOS i just pasted in new files with the same dimensions and same filenames, overwriting the old ones. Just remember to go to Product>Clean in the menu bar in Xcode (shortcut Shift+Command+K) and it should work fine! :)
In cordova 3.3.1-0.1.2 the expected behavior is not working right.
in
http://cordova.apache.org/docs/en/3.3.0/config_ref_images.md.html#Icons%20and%20Splash%20Screens
it clearly states you're suppose to put them into your main www folder in a folder called res and icons that follow a particular naming convention instead of the original customizable config.xml specified way (in which you point to a file of your choosing, which was/is much better). it should take then from there for each platform and put them into the platforms/?android?/res/drawable-?dpi/icon.png but it does no such correct behavior at this time... bug.
so I guess we have to manually put them there for each platform. it would of course need to remove that from duplicating it into the www folder again. for me I had to totally replace the contents in the main www folder anyway because it simply didn't work with even hello world without hacking a redirect index.html to find some weird random folder there. Putting the res folder beside www makes the most sense but what ever it seems to be for me caused by this series of cascading and confusing design choices/flaws.
in some cases the internal skripts of cordova don´t put the icons in the right folder, therfore you can see the f*** cordova robot instead of your own icon.
Make use of hook script.;)
three-hooks-your-cordovaphonegap-project-needs
Create a folder "after_platform_add" in the hook folder and put/change the last skript from devgirl.
Don´t forget to set executive rights for the script, in linux "chmod 777 <script>"
good luck!
All I did was added the below lines in config.xml <icon src="www/img/appIcon.png" />
And it worked totally fine
Just add this code into your config.xml file
<icon src="path to your icon image">
eg:
<icon src="icon.png">
Al ways remember you need to use .png extension
I'm also in the middle of trying to understand how this all connects.
Here's what I've found so far in XCode, but I hope to be corrected or affirmed if my assumptions are correct. I haven't found an out of the box build to xcode from cordova that correctly applies the icons. Like you I've updated all the icons listed in the config.xml but no dice.
So...
First, I usually update the config.xml in the root of the project with the one in my "www" folder (this I do out of uncertainty that the www/config.xml has any precedence or if it's even applied)
Second, I update the "Build Phases" of the project. Expand "Copy Bundle Resources", you've already noticed all of the images in "Resources/icons", "Resources/splash". You can either:
remove all of these to avoid overwriting your images ORupdate all of these images with your own (renaming to the image name listed)
As I was working this out, you might be able to minimally just update images from the "Summary" tab.
Drag-and-drop your images from your res folders to the appropriate image in the "Summary" tab. (res/icon/ios -> App icons and res/screen/ios -> Launch Images). I do it only for iPhone since my app is iPhone only. Check "prerendered" if you don't want gloss to appear.
Then update the "icon.png" referenced in the project's plist file: PROJECT_NAME-Info.plist or in the "Info" tab when looking at the project target. Rename it to "icon-57.png" (that now lives in your project root, this was automatically added to the root when you did the drag-and-drop.
Build and you should an updated app icon.
Just noting that I've just changed my config.xml to look like Sebastian's example.
Something that's also helpful in debugging all this especially if you don't do local builds... is to download the XAP/IPA/APK files as built from PhoneGap cloud and create folders for each. Rename each file with a .ZIP extension and extract the contents of each to their respective folders. So basically, you can now see what's in the package that will be shipped to the phone.
Doing this, I can see that for the Microsoft Phone platform it's largely ignoring all my attempts at replacing the icon or splash screen. If you then replace the ApplicationIcon.png and SplashScreenImage.jpg, then re-zip the folderset and rename it again as a .XAP file you can then deploy it to your phone and it will work perfectly. Somehow, there's a way of just getting the PhoneGap build to turn your icon.png and icon.jpg into those two files. Perhaps Masood's suggestion is a possibility here and utilize a hook script.
Doing the same for the .IPA file (iOS) results in several files like icon-something.png at the parent level above www. They all appear to be blank.
Doing the same for the .APK file (Android) results in a res/drawable-something set of folders and it appears to have my icon.png in each one. It's the closest to a success I can claim at the moment.
참고URL : https://stackoverflow.com/questions/17820492/how-to-add-app-icon-within-phonegap-projects
'program story' 카테고리의 다른 글
| AngularJS 커스텀 필터 함수 (0) | 2020.09.16 |
|---|---|
| iOS 푸시 알림은 어떻게 작동합니까? (0) | 2020.09.16 |
| 구성 요소 외부에있는 클릭 이벤트를 수신하는 방법 (0) | 2020.09.16 |
| C #을 사용하여 Windows Form에 파일 찾아보기 단추를 추가하는 방법 (0) | 2020.09.16 |
| Java 7 try-with-resources를 올바르게 사용하고 있습니까? (0) | 2020.09.16 |