फोनगैप परियोजनाओं के भीतर ऐप आइकन कैसे जोड़ें?


85

मैंने डिफॉल्ट config.xml के साथ एक नया फोनगैप (v 3.0.0-0.14.0) प्रोजेक्ट बनाया और फिर iOS और एंड्रॉइड प्लेटफॉर्म जोड़े।

कॉन्फ़िगरेशन में सभी प्लेटफ़ॉर्म आइकन के सभी पथ शामिल हैं।

मैंने iOS और Android के लिए डिफ़ॉल्ट आइकन को ओवरराइट कर दिया है ताकि पथ और नाम अभी भी उन png से मेल खाते हों।

सिम्युलेटर में दौड़ते समय आइकन दिखाई नहीं देते हैं। मैंने इसे xCode में देखा है जहाँ यह मुझे बताता है कि आइकन के लिए "संसाधन" फ़ोल्डर में अभी भी फ़ोनगैप डिफ़ॉल्ट चिह्न मौजूद हैं। 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" />

4
यही है क्या? स्थानीय बिल्ड कॉन्फ़िगर फ़ाइल को अनदेखा करता है? stackoverflow.com/questions/15018098/…
मार्कस

मार्कस सही है, उनकी टिप्पणी का उत्तर होना चाहिए
drodsou

1
मुझे उन सभी चीज़ों के बारे में अक्सर पूछे जाने वाले प्रश्न बनाने में समय लगता है जो आपको डिबग / आइकॉन काम करने के लिए पता होना चाहिए (कॉर्डोवा 5.1.1)। चेक stackoverflow.com/a/31674547/82609
सेबेस्टियन Lorber

जवाबों:


67

सौभाग्य से छप छवियों के बारे में डॉक्स में थोड़ा सा है, जिसने मुझे आइकन छवियों के लिए सही स्थान प्राप्त करने के लिए सड़क पर डाल दिया। तो यहाँ यह जाता है।

जहां फाइलें रखी जाती हैं एक बार जब आपने कमांड-लाइन इंटरफेस "कॉर्डोवा बिल्ड आईओएस" का उपयोग करके अपनी परियोजना का निर्माण किया था, तो आपको platforms/ios/फ़ोल्डर में अपने iOS ऐप के लिए एक पूर्ण फ़ाइल संरचना होनी चाहिए ।

उस फ़ोल्डर के अंदर एक फ़ोल्डर होता है जिसमें आपके ऐप का नाम होता है। बदले में एक resources/निर्देशिका होती है जहाँ आपको icons/और splashscreen/फ़ोल्डर्स मिलेंगे ।

आइकन फ़ोल्डर में आपको चार आइकन फाइलें (57px और 72 px के लिए, प्रत्येक नियमित और @ 2x संस्करण में) मिलेंगी। ये फ़ोनगैप प्लेसहोल्डर आइकन हैं जिन्हें आप अब तक देख रहे हैं।

क्या करें

आपको बस इस फोल्डर में आइकन फाइल्स को सेव करना है। तो यह है:

YourPhonegapProject/Platforms/ios/YourAppName/Resources/icons

स्प्लैशस्क्रीन फ़ाइलों के लिए भी।

टिप्पणियाँ

  1. फ़ाइलों को वहाँ रखने के बाद, cordova build iosxCode के 'क्लीन प्रोडक्ट' मेनू कमांड का उपयोग करके और प्रोजेक्ट का पुनर्निर्माण करें । इसके बिना, आप अभी भी Phonegap प्लेसहोल्डर देख रहे होंगे।

  2. यह info.plist या config.xml में नामों को संपादित करने के बजाय अपनी फ़ाइलों को iOS / Apple तरीके (यानी icon-72@2x.png आदि) का नाम बदलने के लिए सबसे बुद्धिमान है। कम से कम मेरे लिए तो काम किया।

  3. और वैसे, 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

  4. आइकन पर Apple के चमक प्रभाव को रोकने के लिए config.xml का उपयोग न करें। इसके बजाय, बॉक्स को xCode में टिक करें (बाएं नेविगेशन कॉलम में प्रोजेक्ट शीर्षक पर क्लिक करें, लक्ष्य हेडर के तहत अपना ऐप चुनें और आइकन सेक्शन पर स्क्रॉल करें)।


config.xml में फ़ाइल नाम छोड़ कर फ़ोनगैप बिल्ड सेवा के साथ निर्माण को तोड़ना नहीं चाहिए? यह केवल इसलिए काम करता है क्योंकि स्थानीय बिल्ड config.xml को अनदेखा कर रहा है। क्या होगा अगर फोनगैप इसे पढ़ने का फैसला करता है? मैं उन फ़ाइलों को किसी प्रकार की निर्माण प्रक्रिया के साथ कॉपी करने का सुझाव दूंगा।
मार्कस

1
हाय मार्कस, मुझे फोनगैप बिल्ड सेवा के साथ कोई अनुभव नहीं है (सिवाय इसके कि जब मैं इसे एक संक्षिप्त और असफल कोशिश दे रहा था तो यह चकरा देने वाला था)। इसलिए मैं आपकी टिप्पणी का न्याय नहीं कर सकता, लेकिन मैं इसके लिए आपका वचन लेता हूं। इसलिए मेरा जवाब केवल उन लोगों को लक्षित है जो अपना निर्माण करते हैं।
Wytze

1
यह उत्तर पुराना है (लेकिन 3.0.0 के लिए काम करता है)। इसे संभालने के लिए किसी भी मैनुअल प्रक्रिया की आवश्यकता नहीं है। किनारे की जाँच करें और मेरा जवाब यहां stackoverflow.com/a/31674547/82609
सेबस्टियन लोरर

46

अकसर किये गए सवाल: ICON / SPLASH SCREEN (कॉर्डोवा 5.x / 2015)

मैं अपना जवाब एक सामान्य FAQ के रूप में प्रस्तुत करता हूं जो आपको आइकनों / स्प्लैश स्क्रीन के साथ काम करते समय कई समस्याओं को हल करने में मदद कर सकता है। आपको मेरी तरह पता चल सकता है कि प्रलेखन हमेशा बहुत स्पष्ट नहीं है और न ही आज तक। यह उपलब्ध होने पर संभवतः StackOverflow प्रलेखन में जाएगा।

पहला: सवाल का जवाब देना

मैं फोनगैप के साथ आईओएस और एंड्रॉइड के लिए कस्टम ऐप आइकन कैसे जोड़ सकता हूं?

कॉर्डोवा के आपके संस्करण मेंicon टैग बेकार है। यह कॉर्डोवा 3.0.0 में भी प्रलेखित नहीं है। आपको प्रलेखन संस्करण का उपयोग करना चाहिए जो आपके द्वारा उपयोग किए जा रहे क्ली को फिट करता है और नवीनतम को नहीं!

आइकन टैग मैं क्या प्रलेखन के विभिन्न संस्करणों में देख सकते हैं के अनुसार संस्करण 3.5.0 से पहले सभी पर Android के लिए काम नहीं करता। 3.4.0 में वे अभी भी फ़ाइलों को मैन्युअल रूप से कॉपी करने की सलाह देते हैं

नए संस्करणों में : config.xmlनए कॉर्डोवा संस्करणों के लिए आपका रूप बेहतर है। हालाँकि अभी भी कई चीजें हैं जिन्हें आप जानना चाहते हैं। यदि आप यहां अपग्रेड करने का निर्णय लेते हैं तो संशोधित करने के लिए कुछ उपयोगी चीजें हैं:

  • आपको gap:नामस्थान की आवश्यकता नहीं है
  • आपको <preference name="SplashScreen" value="screen" />Android की आवश्यकता है

यहां उन सवालों के अधिक विवरण दिए गए हैं जो आप आइकन और स्प्लैश स्क्रीन से निपटने की कोशिश करते समय पूछ सकते हैं:

क्या मैं कॉर्डोवा / फोनगैप के पुराने संस्करण का उपयोग कर सकता हूं

नहीं, आइकन / स्प्लैशस्क्रीन सुविधा कॉर्डोवा के पूर्व संस्करणों में नहीं थी, इसलिए आपको हाल के संस्करण का उपयोग करना होगा। पूर्व संस्करणों में, केवल Phonegap Build ने आइकन / स्प्लैश स्क्रीन को हैंडल किया था इसलिए स्थानीय रूप से निर्माण करना और आइकन को हैंडल करना केवल हुक के साथ ही संभव था। मैं इस सुविधा का उपयोग करने के लिए न्यूनतम संस्करण नहीं जानता, लेकिन 5.1.1 के साथ यह कॉर्डोवा / फोनगैप क्ली दोनों में ठीक काम करता है। कॉर्डोवा 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

फिर आप एपीके को पा सकते हैं, और इसे आइकनों की जांच के लिए ज़िप संग्रह के रूप में खोल सकते हैं। उन्हें एक res/drawable*फ़ोल्डर में होना चाहिए क्योंकि यह Android के लिए एक विशेष फ़ोल्डर है।

मुझे अपने प्रोजेक्ट में आइकन / स्प्लैश स्क्रीन कहां से डालनी चाहिए?

कई उदाहरणों में आप पाएंगे कि आइकन / स्प्लैश स्क्रीन एक resफ़ोल्डर के अंदर घोषित किए गए हैं । यह resआउटपुट एपीके में एक विशेष एंड्रॉइड फ़ोल्डर है, लेकिन इसका मतलब यह नहीं है कि आपको resअपने प्रोजेक्ट में एक फ़ोल्डर का उपयोग करना होगा।

आप अपने आइकन को कहीं भी रख सकते हैं, लेकिन आपके द्वारा उपयोग किया जाने वाला पथ परियोजना की जड़ के सापेक्ष होना चाहिए , और wwwइसलिए ध्यान नहीं रखना चाहिए! यह प्रलेखित है, लेकिन स्पष्ट रूप से नहीं क्योंकि सभी उदाहरण उपयोग कर रहे हैं resऔर आपको नहीं पता कि यह फ़ोल्डर कहां है :(

मेरा मतलब है अगर आप आइकन को पूरी तरह से अपने पथ में www/icon.pngशामिल wwwकरते हैं।

मंगल २०१६ को संपादित करें : मेरे संस्करणों को अपग्रेड करने के बाद, अब ऐसा लगता है कि आइकन wwwफ़ोल्डर के सापेक्ष हैं लेकिन दस्तावेज़ीकरण नहीं बदला गया है ( मुद्दा )

<icon src="icon.png"/>काम करता है ?

नहीं, यह नहीं है!

एंड्रॉइड पर, ऐसा लगता है कि यह पहले काम करता था (जब घनत्व विशेषता अभी तक समर्थित नहीं थी?) लेकिन अब नहीं। इस कॉर्डोवा मुद्दे को देखें

IOS पर, ऐसा लगता है कि इस वैश्विक घोषणा का उपयोग अधिक विशिष्ट घोषणाओं को ओवरराइड कर सकता है, इसलिए ध्यान रखें और --verboseजैसा कि अपेक्षित है, सब कुछ सुनिश्चित करने के लिए निर्माण करें।

क्या मैं सभी घनत्वों के लिए एक ही आइकन / स्प्लैश स्क्रीन फ़ाइल का उपयोग कर सकता हूं।

हाँ तुम कर सकते हो। तुम भी दोनों आइकन के लिए एक ही फ़ाइल का उपयोग कर सकते हैं, और स्क्रीन छप (बस परीक्षण करने के लिए!)। मैंने बिना किसी समस्या के 65kb की "बड़ी" आइकन फ़ाइल का उपयोग किया है।

प्लेटफ़ॉर्म टैग बनाम प्लेटफ़ॉर्म विशेषता का उपयोग करते समय क्या अंतर है

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

के समान है

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

क्या मुझे फोन गैप का उपयोग करते हुए गैप: नेमस्पेस का उपयोग करना चाहिए?

मेरे अनुभव में फोनगैप या कॉर्डोवा के नए संस्करण दोनों किसी भी gap:xml नाम स्थान का उपयोग किए बिना आइकन घोषणाओं को समझने में सक्षम हैं ।

हालाँकि मैं अभी भी यहाँ एक मान्य उत्तर की प्रतीक्षा कर रहा हूँ: कॉर्डोवा / फोनगैप प्लगइन वी.एस. config.xml जोड़ें

जहाँ तक मैं समझता हूँ, gap:नाम स्थान के साथ कुछ सुविधाएँ पहले PhonegapBuild में, उसके बाद Phonegap में और फिर Cordova (?) में पोर्ट की जा सकती हैं।

की <preference name="SplashScreen" value="screen" />आवश्यकता है?

कम से कम Android के लिए हाँ यह है। मैंने अतिरिक्त स्पष्टीकरण के साथ एक मुद्दा खोला ।

क्या आइकन घोषणा आदेश मायने रखता है?

हाँ यह करता है! एंड्रॉइड पर इसका कोई प्रभाव नहीं हो सकता है लेकिन मेरे परीक्षणों के अनुसार आईओएस पर इसका प्रभाव है। यह अप्रत्याशित और अनैच्छिक व्यवहार है इसलिए मैंने एक और मुद्दा खोला ।

क्या मुझे जरूरत है cordova-plugin-splashscreen?

यदि आप स्प्लैश स्क्रीन को काम करना चाहते हैं, तो हां, इसकी पूरी आवश्यकता है। प्रलेखन स्पष्ट नहीं है ( मुद्दा ) और हमें लगता है कि प्लगइन केवल एक स्प्लैश स्क्रीन जावास्क्रिप्ट एपीआई की पेशकश करने के लिए आवश्यक है।

मैं तेजी से सभी चौड़ाई / ऊंचाई / घनत्व के लिए छवियों का आकार कैसे बदल सकता हूं

ऐसा करने में आपकी मदद करने के लिए उपकरण हैं। मेरे लिए सबसे अच्छा एक 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>

उदाहरणों का एक अच्छा स्रोत स्टार्टर किट हैं। जैसे फोनगैप-स्टार्ट या आयोनिक स्टार्टर


2
मैं (कई दूसरों के बीच) एक छोटे से CLI उपयोगिता, कि हैंडल एप्लिकेशन आइकन, स्प्लैश स्क्रीन, और पूर्वावलोकन पीढ़ी का निर्माण https://github.com/mmacmillan/cordova-imaging , मैं इस क्योंकि इसके विन्यास फाइल thats से प्रेरित अच्छी तरह से प्रलेखित के बारे में उल्लेख आकार / आयाम / स्थान, और प्लेटफ़ॉर्म विशिष्ट दस्तावेज़ के लिंक शामिल हैं; यह आपके द्वारा दिए गए विस्तृत उत्तर के पूरक होने में मदद कर सकता है
माइक मैकमिलन

मैंने यह सब किया, कॉर्डोवा 5.1 के साथ, फाइलों को कॉपी किया जाता है .apk जैसा कि आपने उल्लेख किया है, लेकिन फिर भी टैबलेट में नया आइकन नहीं दिखता है। कोई विचार?
ग्रिंगो सुवे

ऐप के पुराने संस्करण को अनइंस्टॉल करना और फिर नया संस्करण स्थापित करना आवश्यक है। फिर देखा कि गोली कुछ बदल गई है। इसलिए, मैं नया आइकन प्राप्त करने में सक्षम था।
ग्रिंगो सुवे

1
क्या शानदार जवाब है! मैंने cordova build android --verboseअपने मुद्दे की पहचान करने और हल करने के लिए आपके सुझाव का उपयोग किया । धन्यवाद!
सारा

अच्छा जवाब सेबस्टियन;) अंगूठे
अलादीन

32

कॉर्डोवा 3.5.0-0.2.6.6 के रूप <icon />में config.xml में तत्व निम्नलिखित चेतावनी के साथ काम करता है:

  1. srcविशेषता अपनी परियोजना रूट फ़ोल्डर के लिए एक रास्ता सापेक्ष है। इस मुद्दे के बारे में मुद्दा ट्रैकर कारण क्यों परिवर्तन।

  2. <icon src="..." />संकल्प / डीपीआई बिना तत्व डिफ़ॉल्ट आइकन के रूप में सभी प्लेटफार्मों द्वारा प्रयोग किया जाता चिह्न के रूप में दर्ज है। हालाँकि, एंड्रॉइड बिल्ड पर, डिफ़ॉल्ट आइकन को केवल एंड्रॉइड ड्रॉएबल फ़ोल्डर में कॉपी किया जाता है, बिना विशिष्ट रिज़ॉल्यूशन सेट के। यह आपको /res/drawableफ़ोल्डर में कस्टम आइकन दिखाई देता है , और विशिष्ट रिज़ॉल्यूशन वाला कॉर्डोवा डिफ़ॉल्ट आइकन अंतिम एपीके (यानी /res/drawable-ldpi) के अंदर अन्य फ़ोल्डरों में मौजूद है । config.xmlAndroid प्लेटफ़ॉर्म पर प्रत्येक रिज़ॉल्यूशन के लिए आपको एक आइकन तत्व जोड़ना होगा ।

उदाहरण के लिए, यदि आपकी आइकन छवि www/res/img/icon.pngआपके रूट प्रोजेक्ट के सापेक्ष पथ में है , तो यह पंक्तियां config.xmlआपके एप्लिकेशन आइकन को Android कार्यों में बनाती है:

<!-- 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" />

उस कॉन्फ़िगरेशन के साथ, आपके पास डिफ़ॉल्ट कॉर्डोवा आइकन पर लिखे गए सभी प्रस्तावों के लिए एक एकल छवि आइकन हो सकता है, और बिना कस्टम होक के। बस के साथ निर्माण करना cordova build androidचाहिए।


क्या आपके पास समस्या 2 के लिए बग रिपोर्ट लिंक है? मैंने अभी एक नए प्रोजेक्ट पर इस समस्या को मारा है और इसने मुझे पहली बार भ्रमित किया है। जब संभव हो तो यह तय करने के लिए प्रगति का पालन करना चाहेंगे। चीयर्स।
माइक

omg आखिरकार यह काम करने के लिए मिल गया! के लिए धन्यवाद density। मैं बदल <icon gap:platform="android" gap:qualifier="ldpi" src="www/res/icon/android/icon-36-ldpi.png" />गया<icon gap:platform="android" density="ldpi" src="www/res/icon/android/icon-36-ldpi.png" />
थ लीनग

@ रोनोल्डो पेरिआरा तेरा मेरा उद्धारकर्ता !! <आइकन ..> प्रत्येक घनत्व के लिए टैग! प्रतिभाशाली!!
हित्ज़

डिफ़ॉल्ट आइकन src Android के लिए अच्छी तरह से काम नहीं करता है इसलिए वास्तव में इसे अनदेखा कर दिया जाता है! यहाँ मेरे उत्तर की जाँच करें: stackoverflow.com/a/31674547/82609
सेबस्टियन लोरर

8

यदि आप स्थानीय रूप से निर्माण करते समय आइकन को स्वचालित रूप से जोड़ने के लिए एक आसान-से-उपयोग तरीका चाहते हैं cordova emulate ios, cordova run androidतो इस नज़र पर नज़र डालें:

https://gist.github.com/LinusU/7515016

उम्मीद है कि यह भविष्य में किसी समय बॉक्स से बाहर निकलना शुरू हो जाएगा, यहां पर कॉर्डोवा परियोजना पर प्रासंगिक बग रिपोर्ट दी गई है:

https://issues.apache.org/jira/browse/CB-2606


लिनुस के रूप में यह मेरे जवाब में समझाया गया है हाँ अब यह काम करता है, लेकिन यह भी कुछ सामान टूट गया है, stackoverflow.com/a/31674547/82609
सेबेस्टियन लोरर

4

आपको एक config.xml फ़ाइल बनानी होगी जिसमें आप आइकन फ़ाइल डालेंगे

<?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>

इसे जांचें: https://build.phonegap.com/docs/config-xml

वहाँ iOS विशिष्ट प्रतीक है


मेरी कॉन्फ़िग फ़ाइल में पहले से ही सभी आइकन मौजूद हैं। यह एक नया फोनगैप प्रोजेक्ट बनाते समय डिफ़ॉल्ट रूप से बनाया जाता है
मार्कस

2
काम नहीं करता है। इसने पीजी बिल्ड के साथ काम किया, लेकिन कॉर्डोवा 3.x क्ली config.xml में निर्दिष्ट आइकनों को ध्यान में नहीं रखता है (न ही icon.png और screen.png रूट में)। इस सवाल का जवाब भी ढूंढ रहे हैं।
lefnire

Yup config.xml केवल PhoneGap Build के लिए है! किसी को पता है कि यह कैसे करना है ?!
माइकल

कॉर्डोबा 3.5.0-0.2.6 पर एंड्रॉइड पर कुछ कैविएट्स के साथ आइकन कार्यों के लिए समर्थन। विवरण के लिए मेरा उत्तर देखें।
रोनाल्डो परेरा जूल

4

चूंकि अधिकांश उत्तर यहां iOS के लिए लक्षित हैं, इसलिए Android में आइकन बदलने का समाधान है।

एंड्रॉयड के लिए:

<परियोजना स्थान> \ प्लेटफार्मों \ android \ ant-build \ res और नहीं <परियोजना स्थान> \ प्लेटफार्मों \ android \ res में परिवर्तन करें

बाद के स्थान में परिवर्तन करने वाले कुछ लोगों ने काम किया हो सकता है, लेकिन देखा गया है कि फोनगैप की प्रतिलिपि \ android \ res से \ android \ ant-build \ res में देखी जा रही है, मैंने वहाँ जाँच करने का निर्णय लिया और डिफ़ॉल्ट रूप से ड्रॉ करने योग्य फ़ोल्डर का एक अलग सेट पाया। फोनगैप आइकन।

उन लोगों को बदलकर आखिरकार काम किया।

चूंकि मैं स्थानीय रूप से निर्माण कर रहा हूं और एडोब फोनगैप बिल्ड का उपयोग नहीं कर रहा हूं, इसलिए आइकन बदलकर <प्रोजेक्ट लोकेशन> \ www \ res \ icon \ android भी काम करेगा।


3

मैं फोनगैप 3.1.0-0.15.0 पर चल रहा हूं, चूंकि iOS7 ने रिजॉल्यूशन को 120x120px पर बदल दिया है। मैंने प्रोजेक्ट में उन आयामों के साथ एक फाइल जोड़ी है और फिर info.plist फाइल को बदल दिया है।

  1. Xcode में प्रोजेक्ट फ़ाइल को राइट क्लिक करके और "" [आपका प्रोजेक्ट का नाम "..." में फ़ाइलें जोड़ें , प्रोजेक्ट में 120x120 फ़ाइल जोड़ें।
  2. Xcode "संसाधन / [आपका प्रोजेक्ट नाम] -info.plist" में info.plist फ़ाइल पर जाएँ
  3. के तहत "चिह्न फ़ाइलें (आईओएस 5) / प्राथमिक चिह्न / चिह्न फ़ाइलें" परिवर्तन "आइटम 2" जो कुछ भी करने के लिए फ़ाइल नाम अपनी फ़ाइल था (मैं मेरा "आइकन-120.png जो मैं ओर के साथ अन्य सभी माउस प्रोजेक्ट फ़ोल्डर में रखा बुलाया , हालांकि यह बात नहीं होनी चाहिए)

अधिक जानकारी यहां पाई जा सकती है: http://www.digifloor.com/missing-recommended-icon-file-error-ios-app-13

आईओएस में स्प्लैश स्क्रीन को ठीक करने के लिए मैं पुराने आयामों को ओवरराइट करते हुए समान आयामों और समान फ़ाइलनामों के साथ नई फ़ाइलों में चिपकाया जाता हूं। बस उत्पाद में जाना याद रखें > एक्सकोड में मेनू बार में साफ करें (शॉर्टकट शिफ्ट + कमांड + के) और यह ठीक काम करना चाहिए! :)


3

कॉर्डोबा 3.3.1-0.1.2 में अपेक्षित व्यवहार सही काम नहीं कर रहा है।

में

http://cordova.apache.org/docs/en/3.3.0/config_ref_images.md.html#Icons%20and%20Splash%20Screens

यह स्पष्ट रूप से बताता है कि आप उन्हें अपने मुख्य www फ़ोल्डर में रेस और आइकन नामक फ़ोल्डर में डाल सकते हैं जो मूल अनुकूलन योग्य config.xml निर्दिष्ट तरीके के बजाय एक विशेष नामकरण सम्मेलन का अनुसरण करते हैं (जिसमें आप अपने चुनने की एक फ़ाइल को इंगित करते हैं, जो था / बहुत बेहतर है)। इसे तब प्रत्येक प्लेटफ़ॉर्म के लिए वहाँ से ले जाना चाहिए और उन्हें प्लेटफार्मों / /? एंड्रॉइड में रखना चाहिए? / Res / drawable-? dpi / icon.png लेकिन यह इस समय ऐसा कोई सही व्यवहार नहीं करता है ... बग।

इसलिए मुझे लगता है कि हमें उन्हें प्रत्येक प्लेटफ़ॉर्म के लिए मैन्युअल रूप से रखना होगा। बेशक इसे www फ़ोल्डर में फिर से डुप्लिकेट करने से हटाने की आवश्यकता होगी। मेरे लिए मुझे वैसे भी मुख्य www फ़ोल्डर में सामग्री को पूरी तरह से बदलना पड़ा क्योंकि यह केवल कुछ अजीब यादृच्छिक फ़ोल्डर खोजने के लिए एक रीडायरेक्ट index.html को हैक किए बिना हैलो दुनिया के साथ काम नहीं करता था। Www के पास रेस फोल्डर लगाने से सबसे ज्यादा फायदा होता है, लेकिन कभी भी यह मेरे लिए ऐसा लगता है कि यह कैस्केडिंग और भ्रमित करने वाले डिजाइन विकल्पों / खामियों की इस श्रृंखला के कारण है।


2

कुछ मामलों में कॉर्डोवा की आंतरिक रेखाओं ने आइकन को सही फ़ोल्डर में नहीं रखा है, इसके अलावा आप अपने स्वयं के आइकन के बजाय f *** कॉर्डोवा रोबोट को देख सकते हैं।

हुक स्क्रिप्ट का उपयोग करें।;)

तीन हुक-your-cordovaphonegap-परियोजना की जरूरत

हुक फ़ोल्डर में "after_platform_add" एक फ़ोल्डर बनाएं और अंतिम स्क्रीप्ट को देवगर्ल से बदल दें।

लिंकन में लिपि के लिए कार्यकारी अधिकार निर्धारित करना न भूलें "chmod 777 <script>"

सौभाग्य!


1

सभी मैंने किया था config.xml में नीचे लाइनों को जोड़ा <icon src="www/img/appIcon.png" />

और यह पूरी तरह से ठीक काम किया


Thx आदमी। मैंने रेस / icon.png में एक आइकन डालने की कोशिश की (जैसा कि प्रलेखन उदाहरणों में ...) और इसने कभी भी आईओएस पर काम नहीं किया। मैंने आखिरकार उस भ्रमित "रेस" फ़ोल्डर को छोड़ दिया और "www" के तहत आइकन डाल दिया जैसा आपने सुझाव दिया था और यह मेरे लिए भी एक आकर्षण की तरह काम करता है! यह कॉर्डोवा 6.0.0 के लिए काम करता है। आईओएस प्लेटफॉर्म।
अग्नि

1

बस इस कोड को अपने config.xml फ़ाइल में जोड़ें

<icon src="path to your icon image">

उदाहरण के लिए:

<icon src="icon.png">

अल तरीके याद रखें कि आपको .png एक्सटेंशन का उपयोग करने की आवश्यकता है


Png छवियों का उपयोग करने का प्रयास करें
Jobincs

0

मैं यह समझने की कोशिश कर रहा हूं कि यह सब कैसे जुड़ता है।

यहाँ मैंने XCode में अब तक क्या पाया है, लेकिन मुझे उम्मीद है कि अगर मेरी धारणा सही है, तो मुझे सुधार या पुष्टि होने की उम्मीद है। मुझे कॉर्डोबा से एक्सकोड बनाने के लिए बॉक्स से बाहर नहीं मिला है जो सही ढंग से आइकन लागू करता है। आप की तरह मैंने config.xml में सूचीबद्ध सभी आइकन अपडेट किए हैं, लेकिन कोई पासा नहीं।

इसलिए...

सबसे पहले, मैं आमतौर पर अपने "www" फ़ोल्डर में एक के साथ प्रोजेक्ट के रूट में config.xml को अपडेट करता हूं (यह मैं अनिश्चितता से बाहर करता हूं कि www / config.xml में कोई पूर्वता है या यदि यह लागू है)

दूसरा, मैं प्रोजेक्ट के "बिल्ड चरणों" को अपडेट करता हूं। "कॉपी बंड रिसोर्स" का विस्तार करें, आपने पहले से ही "संसाधन / आइकन", "संसाधन / छप" में सभी छवियों पर ध्यान दिया है। आप या तो यह कर सकते हैं:

  • अपनी छवियों को अधिलेखित करने से बचने के लिए इन सभी को हटा दें या
  • अपने स्वयं के साथ इन सभी चित्रों को अपडेट करें (सूचीबद्ध छवि नाम पर नामकरण)

जैसा कि मैं इसे बाहर काम कर रहा था, आप "सारांश" टैब से न्यूनतम छवियों को अपडेट करने में सक्षम हो सकते हैं।

"सारांश" टैब में अपनी छवियों को अपने Res फ़ोल्डरों से खींचकर उपयुक्त छवि पर रखें। (res / icon / ios -> ऐप आइकन और res / स्क्रीन / ios -> लॉन्च छवियां)। मैं इसे केवल iPhone के लिए करता हूं क्योंकि मेरा ऐप केवल iPhone है। यदि आप चाहते हैं कि ग्लॉस दिखाई न दे तो "पहले से रेंडर" की जाँच करें।

फिर प्रोजेक्ट आइकन फ़ाइल में संदर्भित "icon.png" को अपडेट करें: प्रोजेक्ट लक्ष्य को देखते हुए PROJECT_NAME-Info.plist या "जानकारी" टैब में। इसे "आइकन -57.png" का नाम दें (जो अब आपके प्रोजेक्ट रूट में रहता है, यह स्वचालित रूप से रूट में तब जोड़ा गया था जब आपने ड्रैग-एंड-ड्रॉप किया था।

बिल्ड और आपको एक अपडेटेड ऐप आइकन चाहिए।


मैंने कॉर्डोवा 3.0.3 के साथ परियोजना का निर्माण किया है, लेकिन मुझे लगता है कि यह फोनगैप बिल्ड के साथ समान है।
सैम त्वाई

0

बस यह देखते हुए कि मैंने सेबस्टियन के उदाहरण की तरह दिखने के लिए सिर्फ अपना config.xml बदल दिया है।

कुछ ऐसा जो डिबगिंग में भी मददगार होता है, खासतौर पर तब जब आप लोकल बिल्ड नहीं करते हैं ... फोनगैप क्लाउड से निर्मित एक्सएपी / आईपीए / एपीके फाइल डाउनलोड करना और प्रत्येक के लिए फोल्डर बनाना है। .ZIP एक्सटेंशन के साथ प्रत्येक फ़ाइल का नाम बदलें और प्रत्येक की सामग्री को अपने संबंधित फ़ोल्डर में निकालें। तो मूल रूप से, अब आप देख सकते हैं कि पैकेज में क्या है जिसे फोन पर भेज दिया जाएगा।

ऐसा करते हुए, मैं देख सकता हूं कि Microsoft फोन प्लेटफ़ॉर्म के लिए यह आइकन या स्प्लैश स्क्रीन को बदलने के मेरे सभी प्रयासों को काफी हद तक अनदेखा कर रहा है। यदि आप तब ApplicationIcon.png और SplashScreenImage.jpg को प्रतिस्थापित करते हैं, तो फ़ोल्डर्ससेट को फिर से ज़िप करें और इसे फिर से एक .XAP फ़ाइल के रूप में नाम दें और फिर आप इसे अपने फोन पर तैनात कर सकते हैं और यह पूरी तरह से काम करेगा। किसी भी तरह, सिर्फ PhoneGap बनाने का एक तरीका है कि आप अपने icon.png और icon.jpg को उन दो फाइलों में बदल दें। शायद मसूद का सुझाव यहां एक संभावना है और एक हुक स्क्रिप्ट का उपयोग करें।

.IPA फ़ाइल (iOS) के लिए ऐसा ही करने से आइकन-कुछ जैसी कई फाइलें निकलती हैं। www के ऊपर मूल स्तर पर। वे सभी खाली दिखाई देते हैं।

.APK फ़ाइल (Android) के लिए ऐसा ही करने से फ़ोल्डर्स का एक Res / drawable-something सेट होता है और यह हर एक में मेरा icon.png लगता है। यह एक सफलता के सबसे करीब है जो मैं इस समय दावा कर सकता हूं।

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.