تخصيص الأيقونات

من موسوعة حسوب
< Cordova
مراجعة 20:43، 18 نوفمبر 2018 بواسطة محمد-بغات (نقاش | مساهمات) (أنشأ الصفحة ب'<noinclude>{{DISPLAYTITLE: تخصيص الأيقونات}}</noinclude> تصنيف: Cordova يوضح هذا القسم كيفية إعداد أيقونة التط...')
(فرق) → مراجعة أقدم | المراجعة الحالية (فرق) | مراجعة أحدث ← (فرق)

 يوضح هذا القسم كيفية إعداد أيقونة التطبيق لمختلف المنصات. يمكنك العثور على التوثيق الخاص بصور شاشة البداية (splash screen) في قسم توثيق [../reference/cordova-plugin-splashscreen/ Splashscreen plugin docs].

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

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

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

الخصائص الوصف SRC مطلوب موقع الصورة نسبة إلى مجلد المشروع المنصة اختياري المنصة المستهدفة العرض اختياري عرض الأيقونة بالبكسل (px) الارتفاع اختياري ارتفاع الأيقونة بالبكسل الكثافة اختياري


كثافة الأيقونة الهدف اختياري


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

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

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

يمكنك أيضًا أن تحدد مجموعة من الأيقونات المفصلة (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>‎

انظر أيضا

Android icon guide Android - Supporting multiple screens

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

انظر أيضا

App Icons on iPad and iPhone

الويندوز

على الويندوز، الأسلوب الموصى به لتحديد أيقونات التطبيق هو استخدام الخاصية 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 الاسم الأساسي للأيقونات الناتجة. لكل ملف أيقونة، يُحدد اسم ملف المقصد (destination filename) الخاص به بالتعبير target + '.' + MRT_qualifiers + extension(src). لكي تُعرض الأيقونات بشكل صحيح في التطبيق، يجب أن تكون قيم target واحدة من أسماء ملفات الأيقونات المحددة في ملف .appxmanifest الخاص بالتطبيق.

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

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

<icon src="res/windows/AppListIcon.png" target="Square44x44Logo" />، وهو ما يعادل الأسطر التالية: xml <icon src="res/windows/Square44x44Logo.scale-100.png" width="44" height="44" /> <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>‎

انظر أيضا:

Windows 10 platform guidelines for icons Windows 8.1 tiles and icons sizes

مصادر

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