الفرق بين المراجعتين ل"Cordova/images"
< Cordova
اذهب إلى التنقل
اذهب إلى البحث
جميل-بيلوني (نقاش | مساهمات) (تدقيق) |
|||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE: تخصيص الأيقونات}}</noinclude> | <noinclude>{{DISPLAYTITLE: تخصيص الأيقونات}}</noinclude> | ||
[[تصنيف: Cordova]] | [[تصنيف: Cordova]] | ||
| − | |||
يوضح هذا القسم كيفية إعداد أيقونة التطبيق لمختلف المنصات. إن كنت تبحث عن معلومات حول صور شاشة البداية (splash screen)، فراجع صفحة [https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-splashscreen/ التوثيق الخاص بالإضافة Splashscreen] | يوضح هذا القسم كيفية إعداد أيقونة التطبيق لمختلف المنصات. إن كنت تبحث عن معلومات حول صور شاشة البداية (splash screen)، فراجع صفحة [https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-splashscreen/ التوثيق الخاص بالإضافة Splashscreen] | ||
==إعداد الأيقونات عبر واجهة سطر الأوامر (CLI)== | ==إعداد الأيقونات عبر واجهة سطر الأوامر (CLI)== | ||
عند العمل على واجهة سطر الأوامر (CLI)، يمكنك تحديد أيقونة التطبيق عبر العنصر <code><icon></code> (في الملف <code>config.xml</code>). | عند العمل على واجهة سطر الأوامر (CLI)، يمكنك تحديد أيقونة التطبيق عبر العنصر <code><icon></code> (في الملف <code>config.xml</code>). | ||
| − | إذا لم تحدّد أيقونة، فسيُستخدم شعار | + | إذا لم تحدّد أيقونة، فسيُستخدم شعار كوردوفا الأساسي.<syntaxhighlight lang="xml"><icon src="res/ios/icon.png" platform="ios" width="57" height="57" density="mdpi" ></div></syntaxhighlight>توجد بعض الخاصيات التي يمكن استعمالها مع العنصر <code><icon></code> وهي: |
{| class="wikitable" | {| class="wikitable" | ||
| − | ! | + | !الخاصية |
!الوصف | !الوصف | ||
|- | |- | ||
|<code>src</code> | |<code>src</code> | ||
|مطلوب | |مطلوب | ||
| − | موقع الصورة | + | موقع الصورة نسبةً إلى مجلد المشروع. |
|- | |- | ||
|<code>platform</code> | |<code>platform</code> | ||
| − | | | + | |اختيارية. |
| − | المنصة المستهدفة | + | المنصة المستهدفة. |
|- | |- | ||
|<code>width</code> | |<code>width</code> | ||
| − | | | + | |اختيارية. |
| − | عرض الأيقونة بالبكسل (px) | + | عرض الأيقونة بالبكسل (px). |
|- | |- | ||
|<code>height</code> | |<code>height</code> | ||
| − | | | + | |اختيارية. |
| − | ارتفاع الأيقونة بالبكسل | + | ارتفاع الأيقونة بالبكسل. |
|- | |- | ||
|<code>density</code> | |<code>density</code> | ||
| − | | | + | |اختيارية (أندرويد). |
| − | كثافة الأيقونة | + | كثافة الأيقونة. |
|- | |- | ||
|<code>target</code> | |<code>target</code> | ||
| − | | | + | |اختيارية (ويندوز). |
| − | اسم ملف | + | اسم ملف الهدف (destination filename) لملف الصورة وجميع الأهداف متعددة الألوان (MRT) التي ترافقها. |
| − | |}يمكن استخدام الإعدادات التالية لتعريف أيقونة افتراضية واحدة لاستخدامها في كافة المنصات | + | |}يمكن استخدام الإعدادات التالية لتعريف أيقونة افتراضية واحدة لاستخدامها في كافة المنصات:<syntaxhighlight lang="xml"><icon src="res/icon.png" ></div></syntaxhighlight>يمكنك أيضًا أن تحدد لكل منصة أيقونة بحجم معين لتلائم دقة (resolution) مختلف الشاشات. |
==منصة أندرويد== | ==منصة أندرويد== | ||
<syntaxhighlight lang="xml"><platform name="android"> | <syntaxhighlight lang="xml"><platform name="android"> | ||
| سطر 51: | سطر 50: | ||
<icon src="res/android/xxhdpi.png" density="xxhdpi" /> | <icon src="res/android/xxhdpi.png" density="xxhdpi" /> | ||
<icon src="res/android/xxxhdpi.png" density="xxxhdpi" /> | <icon src="res/android/xxxhdpi.png" density="xxxhdpi" /> | ||
| − | </platform></syntaxhighlight> | + | </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== | ||
| − | لا | + | لا يمكن استعمال الأيقونات على منصة Browser. |
==منصة iOS== | ==منصة iOS== | ||
<syntaxhighlight lang="xml"><platform name="ios"> | <syntaxhighlight lang="xml"><platform name="ios"> | ||
| سطر 89: | سطر 87: | ||
<!-- iPad Pro --> | <!-- iPad Pro --> | ||
<icon src="res/ios/icon-83.5@2x.png" width="167" height="167" /> | <icon src="res/ios/icon-83.5@2x.png" width="167" height="167" /> | ||
| − | </platform></syntaxhighlight> | + | </platform></syntaxhighlight>انظر أيضا: |
| − | + | *[https://developer.apple.com/library/content/qa/qa1686/_index.html أيقونات التطبيقات على آيباد (iPad) وآيفون (iPhone)]. | |
| − | *[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" /> | <icon src="res/windows/storelogo.png" target="StoreLogo" /> | ||
<icon src="res/windows/smalllogo.png" target="Square30x30Logo" /> | <icon src="res/windows/smalllogo.png" target="Square30x30Logo" /> | ||
| سطر 104: | سطر 101: | ||
</platform></syntaxhighlight>تمثل الخاصية <code>src</code> مسار الأيقونة المراد إضافتها. | </platform></syntaxhighlight>تمثل الخاصية <code>src</code> مسار الأيقونة المراد إضافتها. | ||
| − | تعالج منصة ويندوز أيقونات MRT (المناولة متعددة الأهداف) تلقائيًا، لذا إذا | + | تعالج منصة ويندوز أيقونات 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</code> الاسم الأساسي (base name) للأيقونات الناتجة. لكل ملف أيقونة، يُحدد التعبير <code>target + '.' + MRT_qualifiers + extension(src)</code> اسم الملف الهدف (destination filename) الخاص به. لكي تُعرَض الأيقونات بشكل سليم في التطبيق، يجب أن تكون قيم الخاصية <code>target</code> واحدة من أسماء ملفات الأيقونات المحددة في الملف <code>.appxmanifest</code> الخاص بالتطبيق. |
| − | + | خلاصة ما سبق، يمكننا استخدام الخاصية <code>target</code> لأجل: | |
| − | *تحديد مجموعة من الأيقونات لتناسب مختلف قياسات الأجهزة باستخدام عنصر <code><icon ...></code> | + | *تحديد مجموعة من الأيقونات لتناسب مختلف قياسات الأجهزة باستخدام عنصر واحد من <code><icon ...></code>. على سبيل المثال: |
<syntaxhighlight lang="xml"> | <syntaxhighlight lang="xml"> | ||
<icon src="res/windows/AppListIcon.png" target="Square44x44Logo" />، | <icon src="res/windows/AppListIcon.png" target="Square44x44Logo" />، | ||
| سطر 115: | سطر 112: | ||
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" /> | 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" /> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
| − | *تعريف أيقونات لأجل قياسات أخرى غير القياسين <code>scale-100</code> و <code>scale-240</code> (وأي من مرشحات MRT الأخرى) | + | *تعريف أيقونات لأجل قياسات أخرى غير القياسين <code>scale-100</code> و <code>scale-240</code> (وأي من مرشحات MRT الأخرى). |
من الممكن أيضًا تعريف الأيقونات باستخدام الخاصيتين <code>width</code> و <code>height</code>، لكن ذلك غير مستحسن:<syntaxhighlight lang="xml"><platform name="windows"> | من الممكن أيضًا تعريف الأيقونات باستخدام الخاصيتين <code>width</code> و <code>height</code>، لكن ذلك غير مستحسن:<syntaxhighlight lang="xml"><platform name="windows"> | ||
<icon src="res/windows/logo.png" width="150" height="150" /> | <icon src="res/windows/logo.png" width="150" height="150" /> | ||
| سطر 129: | سطر 126: | ||
<icon src="res/windows/Wide310x150Logo.scale-100.png" width="310" height="150" /> | <icon src="res/windows/Wide310x150Logo.scale-100.png" width="310" height="150" /> | ||
<icon src="res/windows/Wide310x150Logo.scale-240.png" width="744" height="360" /> | <icon src="res/windows/Wide310x150Logo.scale-240.png" width="744" height="360" /> | ||
| − | </platform></syntaxhighlight> | + | </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 منصة ويندوز | + | *[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 منصة ويندوز | ||
==مصادر== | ==مصادر== | ||
| − | *[https://cordova.apache.org/docs/en/latest/config_ref/images.html | + | *[https://cordova.apache.org/docs/en/latest/config_ref/images.html صفحة Customize Icons في توثيق كوردوفا الرسمي.] |
مراجعة 08:44، 21 نوفمبر 2018
يوضح هذا القسم كيفية إعداد أيقونة التطبيق لمختلف المنصات. إن كنت تبحث عن معلومات حول صور شاشة البداية (splash screen)، فراجع صفحة التوثيق الخاص بالإضافة Splashscreen
إعداد الأيقونات عبر واجهة سطر الأوامر (CLI)
عند العمل على واجهة سطر الأوامر (CLI)، يمكنك تحديد أيقونة التطبيق عبر العنصر <icon> (في الملف config.xml).
إذا لم تحدّد أيقونة، فسيُستخدم شعار كوردوفا الأساسي.
<icon src="res/ios/icon.png" platform="ios" width="57" height="57" density="mdpi" ></div>
توجد بعض الخاصيات التي يمكن استعمالها مع العنصر <icon> وهي:
| الخاصية | الوصف |
|---|---|
src
|
مطلوب
موقع الصورة نسبةً إلى مجلد المشروع. |
platform
|
اختيارية.
المنصة المستهدفة. |
width
|
اختيارية.
عرض الأيقونة بالبكسل (px). |
height
|
اختيارية.
ارتفاع الأيقونة بالبكسل. |
density
|
اختيارية (أندرويد).
كثافة الأيقونة. |
target
|
اختيارية (ويندوز).
اسم ملف الهدف (destination filename) لملف الصورة وجميع الأهداف متعددة الألوان (MRT) التي ترافقها. |
يمكن استخدام الإعدادات التالية لتعريف أيقونة افتراضية واحدة لاستخدامها في كافة المنصات:
<icon src="res/icon.png" ></div>
يمكنك أيضًا أن تحدد لكل منصة أيقونة بحجم معين لتلائم دقة (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>
انظر أيضا: