الفرق بين المراجعتين لصفحة: «Cordova/images»

مراجعة 22:18، 18 نوفمبر 2018

يوضح هذا القسم كيفية إعداد أيقونة التطبيق لمختلف المنصات. إن كنت تبحث عن معلومات حول صور شاشة البداية (splash screen)، فراجع صفحة التوثيق الخاص بالإضافة Splashscreen

إعداد الأيقونات عبر واجهة سطر الأوامر (CLI)

عند العمل على واجهة سطر الأوامر (CLI)، يمكنك تحديد أيقونة التطبيق عبر العنصر <icon> (في الملف config.xml).

إذا لم تحدّد أيقونة، فسيُستخدم شعار Apache Cordova.

<icon src="res/ios/icon.png" platform="ios" width="57" height="57" density="mdpi" ></div>‎

الخصائص	الوصف
`src`	مطلوب موقع الصورة نسبة إلى مجلد المشروع
`platform`	اختياري المنصة المستهدفة
`width`	اختياري عرض الأيقونة بالبكسل (px)
`height`	اختياري ارتفاع الأيقونة بالبكسل
`density`	اختياري (أندرويد) كثافة الأيقونة
`target`	اختياري (ويندوز) اسم ملف المقصد (Destination filename) لملف الصورة وجميع المناولات متعددة الأهداف (MRTs) التي ترافقها

يمكن استخدام الإعدادات التالية لتعريف أيقونة افتراضية واحدة لاستخدامها في كافة المنصات.

<icon src="res/icon.png" ></div>‎

يمكنك أيضًا أن تحدد لكل منصة مجموعة من الأيقونات المفصلة (pixel-perfect) لتلائم دقة (resolution) مختلف الشاشات.

منصة أندرويد

<platform name="android">
        <!--
            ldpi    : 36x36 px
            mdpi    : 48x48 px
            hdpi    : 72x72 px
            xhdpi   : 96x96 px
            xxhdpi  : 144x144 px
            xxxhdpi : 192x192 px
        -->
        <icon src="res/android/ldpi.png" density="ldpi" />
        <icon src="res/android/mdpi.png" density="mdpi" />
        <icon src="res/android/hdpi.png" density="hdpi" />
        <icon src="res/android/xhdpi.png" density="xhdpi" />
        <icon src="res/android/xxhdpi.png" density="xxhdpi" />
        <icon src="res/android/xxxhdpi.png" density="xxxhdpi" />
    </platform>‎

انظر أيضا

منصة Browser

لا تشتغل الأيقونات على منصة Browser.

منصة iOS

<platform name="ios">
        <!-- iOS 8.0+ -->
        <!-- iPhone 6 Plus  -->
        <icon src="res/ios/icon-60@3x.png" width="180" height="180" />
        <!-- iOS 7.0+ -->
        <!-- iPhone / iPod Touch  -->
        <icon src="res/ios/icon-60.png" width="60" height="60" />
        <icon src="res/ios/icon-60@2x.png" width="120" height="120" />
        <!-- iPad -->
        <icon src="res/ios/icon-76.png" width="76" height="76" />
        <icon src="res/ios/icon-76@2x.png" width="152" height="152" />
        <!-- Spotlight Icon -->
        <icon src="res/ios/icon-40.png" width="40" height="40" />
        <icon src="res/ios/icon-40@2x.png" width="80" height="80" />
        <!-- iOS 6.1 -->
        <!-- iPhone / iPod Touch -->
        <icon src="res/ios/icon.png" width="57" height="57" />
        <icon src="res/ios/icon@2x.png" width="114" height="114" />
        <!-- iPad -->
        <icon src="res/ios/icon-72.png" width="72" height="72" />
        <icon src="res/ios/icon-72@2x.png" width="144" height="144" />
        <!-- iPad Pro -->
        <icon src="res/ios/icon-167.png" width="167" height="167" />
        <!-- iPhone Spotlight and Settings Icon -->
        <icon src="res/ios/icon-small.png" width="29" height="29" />
        <icon src="res/ios/icon-small@2x.png" width="58" height="58" />
        <!-- iPad Spotlight and Settings Icon -->
        <icon src="res/ios/icon-50.png" width="50" height="50" />
        <icon src="res/ios/icon-50@2x.png" width="100" height="100" />
        <!-- iPad Pro -->
        <icon src="res/ios/icon-83.5@2x.png" width="167" height="167" />
    </platform>‎

انظر أيضا

أيقونات التطبيقات على آيباد وآيفون

منصة ويندوز

على ويندوز، الأسلوب الموصى به لتحديد أيقونات التطبيق هو استخدام الخاصية target.

<platform name="windows">
        <icon src="res/windows/storelogo.png" target="StoreLogo" />
        <icon src="res/windows/smalllogo.png" target="Square30x30Logo" />
        <icon src="res/windows/Square44x44Logo.png" target="Square44x44Logo" />
        <icon src="res/windows/Square70x70Logo.png" target="Square70x70Logo" />
        <icon src="res/windows/Square71x71Logo.png" target="Square71x71Logo" />
        <icon src="res/windows/Square150x150Logo.png" target="Square150x150Logo" />
        <icon src="res/windows/Square310x310Logo.png" target="Square310x310Logo" />
        <icon src="res/windows/Wide310x150Logo.png" target="Wide310x150Logo" />
    </platform>‎

تمثل الخاصية src مسار الأيقونة المراد إضافتها.

تعالج منصة ويندوز أيقونات MRT (المناولة متعددة الأهداف) تلقائيًا، لذا إذا وضعت src="res/windows/storelogo.png"‎ ، فستُنسخ الملفات التالية في مجلد التطبيق images ‏: res/windows/storelogo.scale-100.png وres/windows/storelogo.scale-200.png ، إلخ.

تحدد الخاصية target الاسم الأساسي (base name) للأيقونات الناتجة. ولكل ملف أيقونة، يُحدد التعبير target + '.' + MRT_qualifiers + extension(src)‎ اسم ملف المقصد (destination filename) الخاص به. لكي تُعرض الأيقونات بشكل سليم في التطبيق، يجب أن تكون قيم الخاصية target واحدة من أسماء ملفات الأيقونات المحددة في ملف التطبيق ‎.appxmanifest.

كخلاصة لما سبق، يمكننا استخدام الخاصية target لأجل:

تحديد مجموعة من الأيقونات لتناسب مختلف قياسات الأجهزة باستخدام عنصر <icon ...‎> واحد. على سبيل المثال:

<icon src="res/windows/AppListIcon.png" target="Square44x44Logo" /‎>،

وهو ما يعادل الأسطر التالية:

xml <icon src="res/windows/Square44x44Logo.scale-100.png" width="44" height="44" ></div> <icon src="res/windows/Square44x44Logo.scale-150.png" width="66" height="66" /> <icon src="res/windows/Square44x44Logo.scale-200.png" width="88" height="88" /> <icon src="res/windows/Square44x44Logo.scale-240.png" width="106" height="106" />

تعريف أيقونات لأجل قياسات أخرى غير القياسين scale-100 و scale-240 (وأي من مرشحات MRT الأخرى)

من الممكن أيضًا تعريف الأيقونات باستخدام الخاصيتين width و height، لكن ذلك غير مستحسن:

<platform name="windows">
        <icon src="res/windows/logo.png" width="150" height="150" />
        <icon src="res/windows/smalllogo.png" width="30" height="30" />
        <icon src="res/windows/storelogo.png" width="50" height="50" />
        <icon src="res/windows/Square44x44Logo.scale-100.png" width="44" height="44" />
        <icon src="res/windows/Square44x44Logo.scale-240.png" width="106" height="106" />
        <icon src="res/windows/Square70x70Logo.scale-100.png" width="70" height="70" />
        <icon src="res/windows/Square71x71Logo.scale-100.png" width="71" height="71" />
        <icon src="res/windows/Square71x71Logo.scale-240.png" width="170" height="170" />
        <icon src="res/windows/Square150x150Logo.scale-240.png" width="360" height="360" />
        <icon src="res/windows/Square310x310Logo.scale-100.png" width="310" height="310" />
        <icon src="res/windows/Wide310x150Logo.scale-100.png" width="310" height="150" />
        <icon src="res/windows/Wide310x150Logo.scale-240.png" width="744" height="360" />
    </platform>‎

انظر أيضا

مصادر

قسم تخصيص الأيقونات في التوثيق الرسمي لكوردوفا.

@@ سطر 2: / سطر 2: @@
 [[تصنيف: Cordova]]
 يوضح هذا القسم كيفية إعداد أيقونة التطبيق لمختلف المنصات. إن كنت تبحث عن معلومات حول صور شاشة البداية (splash screen)، فراجع صفحة [https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-splashscreen/ التوثيق الخاص بالإضافة Splashscreen]
 ==إعداد الأيقونات عبر واجهة سطر الأوامر (CLI)==
 عند العمل على واجهة سطر الأوامر (CLI)، يمكنك تحديد أيقونة التطبيق عبر العنصر <code><icon></code> (في الملف <code>config.xml</code>).
@@ سطر 13: / سطر 12: @@
 |<code>src</code>
 |مطلوب
 موقع الصورة نسبة إلى مجلد المشروع
 |-
 |<code>platform</code>
 |اختياري
 المنصة المستهدفة
 |-
 |<code>width</code>
 |اختياري
 عرض الأيقونة بالبكسل (px)
 |-
 |<code>height</code>
 |اختياري
 ارتفاع الأيقونة بالبكسل
 |-
 |<code>density</code>
 |اختياري (أندرويد)
 كثافة الأيقونة
 |-
 |<code>target</code>
 |اختياري (ويندوز)
 اسم ملف المقصد (Destination filename) لملف الصورة وجميع المناولات متعددة الأهداف (MRTs) التي ترافقها
-|}
+|}يمكن استخدام الإعدادات التالية لتعريف أيقونة افتراضية واحدة لاستخدامها في كافة المنصات.<syntaxhighlight lang="xml"><icon src="res/icon.png" ></div>‎</syntaxhighlight>يمكنك أيضًا أن تحدد لكل منصة مجموعة من الأيقونات المفصلة (pixel-perfect) لتلائم دقة (resolution) مختلف الشاشات.
-يمكن استخدام الإعدادات التالية لتعريف أيقونة افتراضية واحدة، والتي ستُستخدم في كافة المنصات.<syntaxhighlight lang="xml"><icon src="res/icon.png" ></div>‎</syntaxhighlight>يمكنك أيضًا أن تحدد لكل منصة مجموعة من الأيقونات المفصلة (pixel-perfect) لتلائم دقة (resolution) مختلف الشاشات.
 ==منصة أندرويد==
 <syntaxhighlight lang="xml"><platform name="android">
@@ سطر 60: / سطر 52: @@
      </platform>‎</syntaxhighlight>
 ===انظر أيضا===
-* [https://www.google.com/design/spec/style/icons.html دليل أيقونات أندرويد]
+*[https://www.google.com/design/spec/style/icons.html دليل أيقونات أندرويد]
-* [http://developer.android.com/guide/practices/screens_support.html أندرويد - دعم عدة شاشات]
+*[http://developer.android.com/guide/practices/screens_support.html أندرويد - دعم عدة شاشات]
 ==منصة Browser==
 لا تشتغل الأيقونات على منصة Browser.
@@ سطر 99: / سطر 90: @@
      </platform>‎</syntaxhighlight>
 ===انظر أيضا===
-* [https://developer.apple.com/library/content/qa/qa1686/_index.html أيقونات التطبيقات على آيباد وآيفون]
+*[https://developer.apple.com/library/content/qa/qa1686/_index.html أيقونات التطبيقات على آيباد وآيفون]
+==منصة ويندوز==
-==ويندوز==
 على ويندوز، الأسلوب الموصى به لتحديد أيقونات التطبيق هو استخدام الخاصية <code>target</code>.<syntaxhighlight lang="xml"><platform name="windows">
          <icon src="res/windows/storelogo.png" target="StoreLogo" />
@@ سطر 113: / سطر 103: @@
      </platform>‎</syntaxhighlight>تمثل الخاصية <code>src</code> مسار الأيقونة المراد إضافتها.
-تعالج منصة ويندوز أيقونات MRT (المناولة متعددة الأهداف) تلقائيًا، لذا إذا قمت بوضع <code>src="res/windows/storelogo.png"‎</code> ، فستُنسخ الملفات التالية في مجلد التطبيق <code>images</code> ‏: <code>res/windows/storelogo.scale-100.png</code> و<code>res/windows/storelogo.scale-200.png</code> ، إلخ.
+تعالج منصة ويندوز أيقونات MRT (المناولة متعددة الأهداف) تلقائيًا، لذا إذا وضعت <code>src="res/windows/storelogo.png"‎</code> ، فستُنسخ الملفات التالية في مجلد التطبيق <code>images</code> ‏: <code>res/windows/storelogo.scale-100.png</code> و<code>res/windows/storelogo.scale-200.png</code> ، إلخ.
 تحدد الخاصية <code>target</code> الاسم الأساسي (base name) للأيقونات الناتجة. ولكل ملف أيقونة، يُحدد التعبير <code>target + '.' + MRT_qualifiers + extension(src)‎</code> اسم ملف المقصد (destination filename) الخاص به. لكي تُعرض الأيقونات بشكل سليم في التطبيق، يجب أن تكون قيم الخاصية <code>target</code> واحدة من أسماء ملفات الأيقونات المحددة في ملف التطبيق ‎<code>.appxmanifest</code>.
-كخلاصة لما سبق، فيمكننا باستخدام الخاصية <code>target</code>:
+كخلاصة لما سبق، يمكننا استخدام الخاصية <code>target</code> لأجل:
-*تحديد مجموعة من الأيقونات لتناسب مختلف قياسات الأجهزة باستخدام عنصر <code><icon ...‎></code> واحد، على سبيل المثال:
+*تحديد مجموعة من الأيقونات لتناسب مختلف قياسات الأجهزة باستخدام عنصر <code><icon ...‎></code> واحد. على سبيل المثال:
 <syntaxhighlight lang="xml">
 <icon src="res/windows/AppListIcon.png" target="Square44x44Logo" /‎>،
@@ سطر 139: / سطر 129: @@
          <icon src="res/windows/Wide310x150Logo.scale-240.png" width="744" height="360" />
      </platform>‎</syntaxhighlight>
-===انظر أيضا:===
+===انظر أيضا===
-* [https://msdn.microsoft.com/en-us/library/windows/apps/mt412102.aspx منصة ويندوز  10 - دليل الأيقونات]
+*[https://msdn.microsoft.com/en-us/library/windows/apps/mt412102.aspx منصة ويندوز  10 - دليل الأيقونات]
-* [https://msdn.microsoft.com/en-us/library/windows/apps/xaml/hh781198.aspx منصة ويندوز  8.1 - التشكيلات وأحجام الأيقونات]
+*[https://msdn.microsoft.com/en-us/library/windows/apps/xaml/hh781198.aspx منصة ويندوز  8.1 - التشكيلات وأحجام الأيقونات]
 ==مصادر==
 *[https://cordova.apache.org/docs/en/latest/config_ref/images.html قسم تخصيص الأيقونات في التوثيق الرسمي لكوردوفا.]