تخصيص الأيقونات في كوردوفا

من موسوعة حسوب
اذهب إلى التنقل اذهب إلى البحث

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

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

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

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

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

توجد بعض الخاصيات التي يمكن استعمالها مع العنصر <icon> وهي:

الخاصية الوصف
src مطلوب

موقع الصورة نسبةً إلى مجلد المشروع.

platform اختيارية.

المنصة المستهدفة.

width اختيارية.

عرض الأيقونة بالبكسل (px).

height اختيارية.

ارتفاع الأيقونة بالبكسل.

target اختيارية (ويندوز).

اسم ملف الهدف (destination filename) لملف الصورة وجميع الأهداف متعددة الألوان (MRT) التي ترافقها.

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

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

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

منصة أندرويد

على منصة أندرويد، بدلاً من استخدام صورة واحدة كأيقونة، يمكنك استخدام صورتين (خلفية ومقدمة) لإنشاء أيقونة متكيفة.

الخاصية الوصف
background مطلوبة في الأيقونات المتكيفة

موقع الصورة (png أو vector) نسبةً إلى مجلد المشروع. أو مرجع اللون.

foreground مطلوبة في الأيقونات المتكيفة

موقع الصورة (png أو vector) نسبةً إلى مجلد المشروع. أو مرجع اللون.

density مطلوبة

تحدد كثافة الأيقونة

الأيقونات المتكيفة Adaptive Icons

لاستخدام الأيقونات المتكيفة، يجب تحديد الخاصيات background و foreground بدلاً من الخاصية src. إذ لا تُستخدَم الخاصية src في الأيقونات المتكيفة.

مثال على أيقونات متكيفة يستخدم الصور:

<platform name="android">
  <icon background="res/icon/android/ldpi-background.png" density="ldpi" foreground="res/icon/android/ldpi-foreground.png" />
  <icon background="res/icon/android/mdpi-background.png" density="mdpi" foreground="res/icon/android/mdpi-foreground.png" />
  <icon background="res/icon/android/hdpi-background.png" density="hdpi" foreground="res/icon/android/hdpi-foreground.png" />
  <icon background="res/icon/android/xhdpi-background.png" density="xhdpi" foreground="res/icon/android/xhdpi-foreground.png" />
  <icon background="res/icon/android/xxhdpi-background.png" density="xxhdpi" foreground="res/icon/android/xxhdpi-foreground.png" />
  <icon background="res/icon/android/xxxhdpi-background.png" density="xxxhdpi" foreground="res/icon/android/xxxhdpi-foreground.png" />
</platform>

ملاحظة: في هذا المثال، ستُستخدَم الصورة الأمامية كأيقونة احتياطية في أجهزة أندرويد التي لا تدعم الأيقونات المتكيفة. يمكن تجاوز الأيقونة الاحتياطية عن طريق تعيين الخاصية src.

مثال على أيقونات متكيفة يستخدم المتجهات: 

<platform name="android">
  <icon background="res/icon/android/ldpi-background.xml" density="ldpi" foreground="res/icon/android/ldpi-foreground.xml" src="res/android/ldpi.png" />
  <icon background="res/icon/android/mdpi-background.xml" density="mdpi" foreground="res/icon/android/mdpi-foreground.xml" src="res/android/mdpi.png" />
  <icon background="res/icon/android/hdpi-background.xml" density="hdpi" foreground="res/icon/android/hdpi-foreground.xml" src="res/android/hdpi.png" />
  <icon background="res/icon/android/xhdpi-background.xml" density="xhdpi" foreground="res/icon/android/xhdpi-foreground.xml" src="res/android/xhdpi.png" />
  <icon background="res/icon/android/xxhdpi-background.xml" density="xxhdpi" foreground="res/icon/android/xxhdpi-foreground.xml" src="res/android/xxhdpi.png" />
  <icon background="res/icon/android/xxxhdpi-background.xml" density="xxxhdpi" foreground="res/icon/android/xxxhdpi-foreground.xml" src="res/android/xxxhdpi.png" />
</platform>

ملاحظة: في هذا المثال، يجب تحديد الخاصية src عند تعريف الخاصية foreground عبر متجهة أو لون.انظر أيضا:

منصة 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=29892"