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

من موسوعة حسوب
التعديل اللاحق ←
مرئينص الويكي
أنشأ الصفحة ب'<noinclude>{{DISPLAYTITLE: تخصيص الأيقونات}}</noinclude> تصنيف: Cordova يوضح هذا القسم كيفية إعداد أيقونة التط...'
 
لا ملخص تعديل
سطر 1: سطر 1:
<noinclude>{{DISPLAYTITLE:  تخصيص الأيقونات}}</noinclude>
<noinclude>{{DISPLAYTITLE:  تخصيص الأيقونات}}</noinclude>
[[تصنيف: Cordova]]
[[تصنيف: Cordova]]
يوضح هذا القسم كيفية إعداد أيقونة التطبيق لمختلف المنصات. يمكنك العثور على التوثيق الخاص بصور شاشة البداية (splash screen) في قسم توثيق [../reference/cordova-plugin-splashscreen/ Splashscreen plugin docs].
يوضح هذا القسم كيفية إعداد أيقونة التطبيق لمختلف المنصات. إن كنت تبحث عن معلومات حول صور شاشة البداية (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>). إذا لم تحدّد أيقونة، فسيُستخدم شعار Apache Cordova.  
إذا لم تحدّد أيقونة، فسيُستخدم شعار Apache Cordova.<syntaxhighlight lang="xml"><icon src="res/ios/icon.png" platform="ios" width="57" height="57" density="mdpi" ></div>‎</syntaxhighlight>
<syntaxhighlight><icon src="res/ios/icon.png" platform="ios" width="57" height="57" density="mdpi" />‎</syntaxhighlight>  
{| class="wikitable"
الخصائص  
!الخصائص
الوصف
!الوصف
SRC
|-
مطلوب  
|<code>src</code>
موقع الصورة نسبة إلى مجلد المشروع
|مطلوب
المنصة
اختياري
المنصة المستهدفة
العرض
اختياري
عرض الأيقونة بالبكسل (px)
الارتفاع
اختياري
ارتفاع الأيقونة بالبكسل
الكثافة
اختياري


موقع الصورة نسبة إلى مجلد المشروع
|-
|<code>platform</code>
|اختياري


كثافة الأيقونة
المنصة المستهدفة
الهدف
|-
اختياري  
|<code>width</code>
|اختياري


عرض الأيقونة بالبكسل (px)
|-
|<code>height</code>
|اختياري


اسم ملف المقصد (Destination filename) لملف الصورة وجميع المناولات متعددة الأهداف (MRTs) التي ترافقها
ارتفاع الأيقونة بالبكسل
|-
|<code>density</code>
|اختياري (أندرويد)


يمكن استخدام الإعدادات التالية لتعريف أيقونة افتراضية واحدة والتي ستُستخدم في كافة المنصات.
كثافة الأيقونة
<syntaxhighlight><icon src="res/icon.png" />‎</syntaxhighlight>
|-
|<code>target</code>
|اختياري (ويندوز)


يمكنك أيضًا أن تحدد مجموعة من الأيقونات المفصلة (pixel-perfect) لتلائم دقة (resolution) عدة شاشات.  
اسم ملف المقصد (Destination filename) لملف الصورة وجميع المناولات متعددة الأهداف (MRTs) التي ترافقها
 
|}
== الأندرويد ==  
يمكن استخدام الإعدادات التالية لتعريف أيقونة افتراضية واحدة، والتي ستُستخدم في كافة المنصات.<syntaxhighlight lang="xml"><icon src="res/icon.png" ></div>‎</syntaxhighlight>يمكنك أيضًا أن تحدد لكل منصة مجموعة من الأيقونات المفصلة (pixel-perfect) لتلائم دقة (resolution) مختلف الشاشات.
<syntaxhighlight><platform name="android">
==منصة أندرويد==
<syntaxhighlight lang="xml"><platform name="android">
         <!--
         <!--
             ldpi    : 36x36 px
             ldpi    : 36x36 px
سطر 53: سطر 58:
         <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 Android icon guide]  
* [https://www.google.com/design/spec/style/icons.html دليل أيقونات أندرويد]
[http://developer.android.com/guide/practices/screens_support.html Android - Supporting multiple screens]  
* [http://developer.android.com/guide/practices/screens_support.html أندرويد - دعم عدة شاشات]


== Browser ==  
==منصة Browser==
 
لا تشتغل الأيقونات على منصة Browser.
لا تشتغل الأيقونات على المنصة Browser.  
==منصة iOS==
 
<syntaxhighlight lang="xml"><platform name="ios">
== iOS ==  
<syntaxhighlight><platform name="ios">
         <!-- iOS 8.0+ -->
         <!-- iOS 8.0+ -->
         <!-- iPhone 6 Plus  -->
         <!-- iPhone 6 Plus  -->
سطر 94: سطر 97:
         <!-- 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 App Icons on iPad and iPhone]  
* [https://developer.apple.com/library/content/qa/qa1686/_index.html أيقونات التطبيقات على آيباد وآيفون]


== الويندوز ==  
==ويندوز==
 
على ويندوز، الأسلوب الموصى به لتحديد أيقونات التطبيق هو استخدام الخاصية <code>target</code>.<syntaxhighlight lang="xml"><platform name="windows">
على الويندوز، الأسلوب الموصى به لتحديد أيقونات التطبيق هو استخدام الخاصية <code>target</code>.  
<syntaxhighlight><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" />
سطر 110: سطر 111:
         <icon src="res/windows/Square310x310Logo.png" target="Square310x310Logo" />
         <icon src="res/windows/Square310x310Logo.png" target="Square310x310Logo" />
         <icon src="res/windows/Wide310x150Logo.png" target="Wide310x150Logo" />
         <icon src="res/windows/Wide310x150Logo.png" target="Wide310x150Logo" />
     </platform>‎</syntaxhighlight>  
     </platform>‎</syntaxhighlight>تمثل الخاصية <code>src</code> مسار الأيقونة المراد إضافتها.


حيث يمثل <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><icon ...‎></code> واحد، على سبيل المثال:
تحدد الخاصية <code>target</code> الاسم الأساسي للأيقونات الناتجة. لكل ملف أيقونة، يُحدد اسم ملف المقصد (destination filename) الخاص به بالتعبير <code>target + '.' + MRT_qualifiers + extension(src)</code>. لكي تُعرض الأيقونات بشكل صحيح في التطبيق، يجب أن تكون قيم <code>target</code> واحدة من أسماء ملفات الأيقونات المحددة في ملف <code>.appxmanifest</code> الخاص بالتطبيق.
<syntaxhighlight lang="xml">
 
<icon src="res/windows/AppListIcon.png" target="Square44x44Logo" /‎>،
لتلخيص ما سبق، يمكننا باستخدام الخاصية <code>target</code> أن:  
</syntaxhighlight>وهو ما يعادل الأسطر التالية:<syntaxhighlight lang="xml">
* تحديد مجموعة من الأيقونات لتناسب مختلف قياسات الأجهزة باستخدام عنصر <code><icon ...></code> واحد، على سبيل المثال: <code>xml
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" />
<icon src="res/windows/AppListIcon.png" target="Square44x44Logo" /></code>، وهو ما يعادل الأسطر التالية: <code>xml
</syntaxhighlight>
<icon src="res/windows/Square44x44Logo.scale-100.png" width="44" height="44" />
*تعريف أيقونات لأجل قياسات أخرى غير القياسين <code>scale-100</code> و <code>scale-240</code> (وأي من مرشحات MRT الأخرى)
<icon src="res/windows/Square44x44Logo.scale-150.png" width="66" height="66" />
من الممكن أيضًا تعريف الأيقونات باستخدام الخاصيتين <code>width</code> و <code>height</code>، لكن ذلك غير مستحسن:<syntaxhighlight lang="xml"><platform name="windows">
<icon src="res/windows/Square44x44Logo.scale-200.png" width="88" height="88" />
<icon src="res/windows/Square44x44Logo.scale-240.png" width="106" height="106" /></code>  
* تعريف أيقونات لأجل قياسات أخرى غير القياسين <code>scale-100</code> و <code>scale-240</code> (وأي من مرشحات MRT الأخرى)  
 
من الممكن أيضًا تعريف الأيقونات باستخدام الخاصيتين <code>width</code> و <code>height</code>، لكنه غير مستحسن:  
<syntaxhighlight><platform name="windows">
         <icon src="res/windows/logo.png" width="150" height="150" />
         <icon src="res/windows/logo.png" width="150" height="150" />
         <icon src="res/windows/smalllogo.png" width="30" height="30" />
         <icon src="res/windows/smalllogo.png" width="30" height="30" />
سطر 143: سطر 138:
         <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  Windows 10 platform guidelines for icons]  
* [https://msdn.microsoft.com/en-us/library/windows/apps/mt412102.aspx منصة ويندوز 10 - دليل الأيقونات]
[https://msdn.microsoft.com/en-us/library/windows/apps/xaml/hh781198.aspx  Windows 8.1 tiles and icons sizes]
* [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 قسم تخصيص الأيقونات في التوثيق الرسمي لكوردوفا.]
*[https://cordova.apache.org/docs/en/latest/config_ref/images.html قسم تخصيص الأيقونات في التوثيق الرسمي لكوردوفا.]

مراجعة 21:19، 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>‎

انظر أيضا:

مصادر

مجلوبة من «https://wiki.hsoub.com/index.php?title=Cordova/images&oldid=23974»