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

من موسوعة حسوب
مرئينص الويكي
أنشأ الصفحة ب'<noinclude>{{DISPLAYTITLE:إضافة شاشة البدء في كوردوفا}}</noinclude> تصنيف: Cordova تصنيف: Plugin هذه الإضافة م...'
 
تحديث
 
(12 مراجعة متوسطة بواسطة مستخدمين اثنين آخرين غير معروضة)
سطر 1: سطر 1:
<noinclude>{{DISPLAYTITLE:إضافة شاشة البدء في كوردوفا}}</noinclude>
<noinclude>{{DISPLAYTITLE:إضافة شاشة البدء في كوردوفا}}</noinclude>
[[تصنيف: Cordova]]
[[تصنيف: Cordova]]
[[تصنيف: Plugin]]
[[تصنيف: Cordova Plugin]]
هذه الإضافة مطلوبة للعمل على شاشات البداية (splash screens). تعرض هذه الإضافة أو تخفي شاشة البدء أثناء إطلاق التطبيق.  
تستعمل هذه الإضافة (cordova-plugin-splashscreen) لإنشاء شاشات البدء (splash screens)، إذ تعرض أو تخفي شاشة البدء أثناء فتح التطبيق.
 
== التثبيت ==
الإبلاغ عن مشكلات في هذه الإضافة على [https://issues.apache.org/jira/issues/?jql=project%20%3D%20CB%20AND%20status%20in%20%28Open%2C%20%22In%20Progress%22%2C%20Reopened%29%20AND%20resolution%20%3D%20Unresolved%20AND%20component%20%3D%20%22Plugin%20Splashscreen%22%20ORDER%20BY%20priority%20DESC%2C%20summary%20ASC%2C%20updatedDate%20DESC Apache Cordova issue tracker]
يمكن تثبيت هذه الإضافة عبر الأمر التالي:<syntaxhighlight lang="shell"># npm hosted (new) id
 
== التثبيت ==  
<syntaxhighlight lang="javascript">// npm hosted (new) id
cordova plugin add cordova-plugin-splashscreen
cordova plugin add cordova-plugin-splashscreen
// you may also install directly from this repo
# يمكنك أيضا تثبيتها من هذا المستودع
cordova plugin add https://github.com/apache/cordova-plugin-splashscreen.git‎</syntaxhighlight>  
cordova plugin add https://github.com/apache/cordova-plugin-splashscreen.git‎</syntaxhighlight>  


== المنصات المدعومة ==  
== المنصات المدعومة ==  
*أندرويد  
*[[Cordova/platforms android|أندرويد]]
*iOS  
*[[Cordova/platforms ios|iOS]]
* ويندوز (الإصدار <code>cordova-windows</code>> = 4.4.0 مطلوب)  
* [[Cordova/platforms windows|ويندوز]] (الإصدار 4.4.0 من <code>cordova-windows</code> أو مابعده)  
*Browser  
*Browser  


<code>Note</code>: لا تتطلب ميزة شاشة البدء الموسعة (Extended splashscreen) تثبيت هذه الإضافة على منصة ويندوز (على عكس منصتي أندرويد و iOS) إن لم تكن بحاجة لاستخدام الواجهة البرمجية للإضافة، أي الإخفاء والعرض برمجيًا.  
'''ملاحظة''': لا تتطلب شاشة البدء الموسعة (Extended splashscreen) تثبيت هذه الإضافة على منصة ويندوز (على عكس منصتي أندرويد و iOS) إن لم تكن بحاجة لاستخدام الواجهة البرمجية للإضافة، أي إخفاء وعرض شاشة البدء برمجيًا.  
=== معلومات خاصة بمنصة iOS ===  
== مثال توضيحي خاص بالإعدادات==
 
في الملف الجذري <code>[[Cordova/config ref|config.xml]]</code> (وليس الملف الموجود في <code>platforms</code>)، أضف عناصر الإعدادات المُوضحة أدناه.
 
يرجى ملاحظة أنّ قيمة الخاصية "<code>src</code>" تُحسب نسبةً إلى المجلد الجذري (root directory) للمشروع، وليس إلى المجلد <code>www</code> (انظر بنية المجلد أدناه). يمكنك تسمية الصورة المصدرية بما تريد، إذ يتم تحديد الاسم الداخلي في التطبيق من قبل كوردوفا.
 
بنية المجلد هي كالتالي: 
<syntaxhighlight lang="xml">projectRoot
    hooks
    platforms
    plugins
    www
        css
        img
        js
    res
        screen
            android
            ios
            windows</syntaxhighlight>
<syntaxhighlight lang="xml"><platform name="android">
    <!-- بإمكانك استخدام أي كثافة موجودةٍ في مشروع أندرويد -->
    <splash src="res/screen/android/splash-land-hdpi.png" density="land-hdpi"/>
    <splash src="res/screen/android/splash-land-ldpi.png" density="land-ldpi"/>
    <splash src="res/screen/android/splash-land-mdpi.png" density="land-mdpi"/>
    <splash src="res/screen/android/splash-land-xhdpi.png" density="land-xhdpi"/>
    <splash src="res/screen/android/splash-land-xxhdpi.png" density="land-xxhdpi"/>


    <splash src="res/screen/android/splash-port-hdpi.png" density="port-hdpi"/>
    <splash src="res/screen/android/splash-port-ldpi.png" density="port-ldpi"/>
    <splash src="res/screen/android/splash-port-mdpi.png" density="port-mdpi"/>
    <splash src="res/screen/android/splash-port-xhdpi.png" density="port-xhdpi"/>
    <splash src="res/screen/android/splash-port-xxhdpi.png" density="port-xxhdpi"/>
</platform>
<platform name="ios">
    <!-- هناك آليتان لعرض صور البدء
      -- iPad Pro 12.9 الطريقة القديمة: والتي تدعم كافة الأجهزة باستثناء
      -- ملاحظة: تُحدد الصور بالعرض والارتفاع
      -- السمات التالية مدعومة -->
    <splash src="res/screen/ios/Default~iphone.png" width="320" height="480"/>
    <splash src="res/screen/ios/Default@2x~iphone.png" width="640" height="960"/>
    <splash src="res/screen/ios/Default-Portrait~ipad.png" width="768" height="1024"/>
    <splash src="res/screen/ios/Default-Portrait@2x~ipad.png" width="1536" height="2048"/>
    <splash src="res/screen/ios/Default-Landscape~ipad.png" width="1024" height="768"/>
    <splash src="res/screen/ios/Default-Landscape@2x~ipad.png" width="2048" height="1536"/>
    <splash src="res/screen/ios/Default-568h@2x~iphone.png" width="640" height="1136"/>
    <splash src="res/screen/ios/Default-667h.png" width="750" height="1334"/>
    <splash src="res/screen/ios/Default-736h.png" width="1242" height="2208"/>
    <splash src="res/screen/ios/Default-Landscape-736h.png" width="2208" height="1242"/>
    <!-- الطريقة اللوحية، تدعمها كل الأجهزة:
      -- ملاحظة: إن استخدمت الطريقة اللوحية، ستنُسخ الصور القديمة، لكن ستُتَجاهل
      -- ملاحظة: الصور تُحدد بالمقياس والمقاس وخصائص الحجم
      -- الخاصيات التالية مُقترحة استنادًا إلى العوامل الشكلية للجهاز الحالي -->
    <splash src="res/screen/ios/Default@2x~universal~anyany.png" />
    <splash src="res/screen/ios/Default@2x~universal~comany.png" />
    <splash src="res/screen/ios/Default@2x~universal~comcom.png" />
    <splash src="res/screen/ios/Default@3x~universal~anyany.png" />
    <splash src="res/screen/ios/Default@3x~universal~anycom.png" />
    <splash src="res/screen/ios/Default@3x~universal~comany.png" />
</platform>
<!-- MRT إعدادات تستخدم المفهوم
  -- يُنصح بها، راجع فقرة "معلومات خاصة بويندوز" لمزيد من التفاصيل -->
<platform name="windows">
    <splash src="res/screen/windows/splashscreen.png" target="SplashScreen"/>
    <splash src="res/screen/windows/splashscreenphone.png" target="SplashScreenPhone"/>
</platform>
<!-- إعدادات تستخدم حجم الصورة -->
<!--<platform name="windows">
    <splash src="res/screen/windows/splashscreen.png" width="620" height="300"/>
    <splash src="res/screen/windows/splashscreenphone.png" width="1152" height="1920"/>
</platform>-->
<preference name="SplashScreenDelay" value="10000" />‎</syntaxhighlight>
== معلومات خاصة بمنصة iOS ==
هناك آليتان لعرض شاشة البدء على منصة iOS:  
هناك آليتان لعرض شاشة البدء على منصة iOS:  
* صورة البدء القديمة (Legacy launch images): يُحدّد حجم الصور ليتلاءم تمامًا مع حجم شاشة الجهاز. لا يدعم الدقة الأصلية لجهاز iPad Pro 12.9 أو الشاشات المتعددة أو التمريرية (slide-over) متعددة المهام.  
* آلية صور البدء القديمة (Legacy launch images): في هذه الآلية، يُحدّد حجم الصور ليتلاءم بشكل تام مع حجم شاشة الجهاز. لا تدعم هذه الآلية الدقة الأصلية لجهاز iPad Pro 12.9، أو تعدد المهام (multitasking) للشاشات المتعددة (split-screen) أو التمريرية (slide-over).
* صُور البدء اللوحية (Launch storyboard images): يُحدد حجم الصور استنادًا إلى المقياس والعبارات (idiom) وأصناف الحجم. تدعم هذه الآلية جميع الأجهزة، ويمكن استخدامه مع تعدد المهام متعدد الشاشات (split-screen) أو التمريري (slide-over).  
* آلية صُوَر البدء اللوحية (Launch storyboard images): في هذه الآلية، يُحدد حجم الصور استنادًا إلى المقياس (scale) والمقاس (idiom) وأصناف الحجم (size classes). تدعم هذه الآلية جميع الأجهزة، ويمكن استخدامها مع تعدد المهام التمريري أو الشاشات المتعددة.


بدأت Apple تبتعد عن آلية آلية صور البدء القديمة. لا يوجد دعم رسمي لتقديم صورة بدء ذات دقة أصلية لجهاز iPad Pro 12.9، أو لتوفير صور بدءٍ تعمل مع تعدد المهام متعدد الشاشات (split-screen) أو التمريري (slide-over). إذا لم يكن تطبيقك بحاجة إلى دعم هذه السياقات، فيمكنك الاستمرار في استخدام آلية صور البدء القديمة.  
بدأت Apple تبتعد عن استخدام آلية صور البدء القديمة، إذ لا يوجد دعم رسمي لصور البدء ذات الدقة الأصلية (native-resolution) على جهاز iPad Pro 12.9، أو صور بدءٍ تعمل مع تعدد المهام التمريري (slide-over) أو تعدد الشاشات (split-screen). إذا لم يكن تطبيقك بحاجة إلى دعم هذه السياقات، فيمكنك الاستمرار في استخدام آلية صور البدء القديمة.  


الطريقة المفضلة لتوفير صور البدء هي استخدام صور لوحية للبدء. بالنسبة إلى مطوّري التطبيقات الأصلية، صورة البدء اللوحية المثالية هي مساحة مُتاحة في واجهة المستخدم الخاصة بالتطبيق عند الإطلاق. بالنسبة إلى مطوّري التطبيقات غير الأصلية، والذين لا يرغبون في تعلم Interface Builder، فإنّ هذه الإضافة تحاكي طريقة صورة البدء القديمة.  
الطريقة المفضلة لتوفير صور البدء هي استخدام آلية صور البدء اللوحية. فبالنسبة لمطوّري التطبيقات الأصلية، صورة البدء اللوحية تمثل نسخةً شاغرةً (unpopulated) من واجهة المستخدم الخاصة بالتطبيق عند فتحه. أما بالنسبة إلى مطوّري التطبيقات غير الأصلية، والذين لا يرغبون في تعلم بناء الواجهة (Interface Builder)، فإنّ هذه الإضافة تحاكي آلية صُور البدء القديمة.  
==== آلية صور البدء القديمة ====  
=== آلية صور البدء القديمة ===  


إذا اخترت استخدام آلية صور البدء القديمة، فعليك إضافة ما يلي إلى الملف <code>config.xml</code>:  
إذا اخترت استخدام آلية صور البدء القديمة، فعليك إضافة ما يلي إلى الملف <code>[[Cordova/config ref|config.xml]]</code>:  
<syntaxhighlight lang="javascript"><splash src="res/screen/ios/Default~iphone.png" width="320" height="480"/>
<syntaxhighlight lang="xml">   <splash src="res/screen/ios/Default~iphone.png" width="320" height="480"/>
     <splash src="res/screen/ios/Default@2x~iphone.png" width="640" height="960"/>
     <splash src="res/screen/ios/Default@2x~iphone.png" width="640" height="960"/>
     <splash src="res/screen/ios/Default-Portrait~ipad.png" width="768" height="1024"/>
     <splash src="res/screen/ios/Default-Portrait~ipad.png" width="768" height="1024"/>
سطر 39: سطر 109:
     <splash src="res/screen/ios/Default-568h@2x~iphone.png" width="640" height="1136"/>
     <splash src="res/screen/ios/Default-568h@2x~iphone.png" width="640" height="1136"/>
     <splash src="res/screen/ios/Default-667h.png" width="750" height="1334"/>
     <splash src="res/screen/ios/Default-667h.png" width="750" height="1334"/>
     <splash src="res/screen/ios/Default-736h.png" width="1242" height="2208"/>‎</syntaxhighlight>  
     <splash src="res/screen/ios/Default-736h.png" width="1242" height="2208"/>
</syntaxhighlight>
 
من الناحية الفنية، يمكنك وضع أيّ اسم ملف تريد في الخاصية <code>src</code>؛ تُستخدم أسماء الملفات لأنها تطابق ما سيتم استخدامه عند تصريف (compiling) المشروع. تحدد خاصيتا العرض (width) والارتفاع (height) صُور البدء التي ستُعرض على الأجهزة على النحو التالي:
{| class="wikitable"
!العرض
!الارتفاع
!الجهاز (الاتجاه)
|-
|<code>320</code>
|<code>480</code>
|جميع أجهزة iPhone و iPod غير الشبكية (non-retina)
|-
|<code>640</code>
|<code>960</code>
|iPhone 4/4s (الوضع العمودي portrait)
|-
|<code>640</code>
|<code>1136</code>
|iPhone 5/5s/SE (الوضع العمودي)
|-
|<code>750</code>
|<code>1334</code>
|iPhone 6/6s/7 (الوضع العمودي)
|-
|<code>1242</code>
|<code>2208</code>
|iPhone 6+/6s+/7+‎ (الوضع العمودي)
|-
|<code>2208</code>
|<code>1242</code>
|iPhone 6+/6s+/7+‎ (الوضع الأفقي landscape)
|-
|<code>768</code>
|<code>1024</code>
|جميع أجهزة iPad غير الشبكية (non-retina) (الوضع العمودي)
|-
|<code>1024</code>
|<code>768</code>
|جميع أجهزة iPad غير الشبكية (الوضع الأفقي)
|-
|<code>1536</code>
|<code>2048</code>
|جميع أجهزة iPad الشبكية (الوضع العمودي)
|-
|<code>2048</code>
|<code>1536</code>
|جميع أجهزة iPad الشبكية (الوضع الأفقي)
|}
'''ملاحظة''': من المهم للغاية أن تُطابق الصورةُ المصدرية الحجم المحدد في الخاصيتين <code>width</code> و <code>height</code>. وإلا فقد يفشل الجهاز في عرضها بالشكل الصحيح، أو قد لا يعرضها مطلقًا.
 
=== صور البدء اللوحية ===


من الناحية الفنية، يمكنك وضع أيّ اسم ملف تريد في الخاصية <code>src</code>؛ يتم استخدام أسماء الملفات لأنها تطابق ما سيتم استخدامه عند تجميع المشروع. تحدد سِمتا العرض والارتفاع صُور البدء التي سيتم عرضها على الأجهزة على النحو التالي:
لأجل دعم المعاملات الشكلية (form factors) الحديثة، وتعدد المهام التمريري (slide-over) أو تعدد الشاشات (split-screen)، فعليك استخدام صور البدء اللوحية. تتشابه هذه الصور مع صور البدء القديمة، ولكن بينهما بعض الاختلافات الجوهرية:
العرض
* الصور ليست مخصوصة بجهاز معين.
الارتفاع
* يُغيّر حجم الصور لملء إطار العرض (viewport) المتاح (مع الحفاظ على نسبة الأبعاد [aspect ratio]).
الجهاز (الاتجاه)
* سيتم اقتصاص الحواف الخارجية للصور، وسيختلف قدر الاقتصاص بناءً على نوع الجهاز وإطار العرض.
320
* ليست هناك حاجة لتوفير صورةٍ، وإطار عرضٍ، واتجاه (orientation) لكل جهاز؛ فستختار منصة iOS أنسب صورة تلقائيًا.
480
جميع أجهزة iPhone و iPod غير الشبكية
640
960
iPhone 4 / 4s (وضع عمودية)  
640
1136
iPhone 5 / 5s / SE (وضع عمودي)  
750
1334
iPhone 6 / 6s / 7 (وضع عمودي)  
1242
2208
iPhone 6 + / 6s + / 7 + (وضع عمودي)  
2208
1242
iPhone 6 + / 6s + / 7 + (وضع أفقي)
768
1024
جميع أجهزة iPad غير الشبكية (وضع عمودي)
1024
768
جميع أجهزة iPad غير الشبكية (وضع أفقي)
1536
2048
جميع أجهزة iPad الشبكية (وضع عمودي)
2048
1536
جميع أجهزة iPad الشبكية (وضع أفقي)  


ملاحظة: من المهم للغاية أن تطابق الصورة المصدر الحجم المحدد في السمتين <code>width</code> و <code>height</code>. وإلا فقد يفشل الجهاز في عرضها بالشكل الصحيح، أو قد لا يعرضها بالبتة.
==== تصميم صور البدء اللوحية ====
==== صور البدء اللوحية (Launch storyboard images) ====  
أول شيء ينبغي أن تنتبه له عند تصميم صورة بدءٍ لوحيةٍ هو إدراك أنّ حواف الصورة ستُقتصّ لا محالة. لذلك، يجب ألا تضع أيّ معلومات مهمة بالقرب من حواف الصور التي تريد اعتمادها كصور بدء لوحية. وتذكر أنّ مركز الصورة هو المنطقة الآمنة الوحيدة، لكنّ كل هذا لن يضمن لك أنّ اتباع نصيحة Apple بتقديم واجهة مستخدم فاغرةٍ (unpopulated) سيعمل بصورة جيدة.


من أجل دعم المعايير الحديثة وتعدد المهام التمريري (slide-over) أو متعدد الشاشات، عليك استخدام صور البدء اللوحية. تتشابه هذه الصور مع صور البدء القديمة، ولكن هناك اختلافات جوهرية:
بدلاً من ذلك، النصائح التالية ستساعدك على إنشاء صورة بدءٍ تعمل على عدد كبير من العوامل الشكلية (form factors)، وإطارات العرض، والاتجاهات:
* الصور ليست مخصوصة بجهاز معين.  
* يجب أن تُوضع الرسومات المهمة (الشعارات، الرموز، العناوين) في المركز. المنطقة الآمنة المحيطة ستختلف بحسب العوامل، لذا عليك التحقق من أنّ الرسومات المهمة لن تُقتص. أو بالأحرى، لا تعتمد على الرسومات المهمة كصور بدء.
* يُغيّر حجم الصور لملء إطار العرض المتاح (مع الحفاظ على نسبة الأبعاد [aspect ratio]).
** يمكنك ضبط موضع هذه الرسومات وحجمها بدقة، ولكن ليس لديك نفس دقة التحكم كما في صور البدء القديمة.
* سيتم اقتصاص الحواف الخارجية للصور، وسيختلف قدر الاقتصاص بناءً على نوع الجهاز وإطار العرض.  
* استخدم لونًا تحتيًا (color wash) بسيطًا. إن كنت تستخدم لونين، فستحتاج إلى أحد اللونين لملء النصف العلوي من الصورة، والآخر لملء النصف السفلي. إن كنت تستخدم لونًا متدرجًا (gradient)، فسترغب على الأرجح في أن ينطبق منتصف تدرج الخطوط مع مركز الصورة.
* ليست هناك حاجة لتوفير صورة لكل جهاز، وإطار عرضٍ، واتجاه (orientation)؛ سنختار منصة iOS أنسب صورة تلقائيًا.  
* ليس عليك أن تحدد عدد البكسلات (pixel) بدقة - لأنّ الصور ستُحجّم (scaled)، كما أنّه من المُستبعد أن تتطابق الصور بشكل كامل مع شبكة البكسل (pixel grid). فنظرًا لكون جميع الأجهزة التي تستخدم منصة iOS تستخدم شاشاتٍ شبكيةٍ (retina)، فسيلاحظ المستخدمون ذلك على أي حال.
تصميم صور البدء اللوحية


أول شيء ينبغي أن تنتبه له عند تصميم صورة بدء لوحية هو إدراك أنّ حواف الصورة ستُقتصّ بشكل شبه مؤكد. لذلك، يجب ألا تضع أيّ معلومات مهمة بالقرب من حواف الصور المتاحة كصور بدء لوحية. المركز فقط هو المنطقة الآمنة، وهذا كله يضمن تقريبًا أنّ اتباع نصيحة Apple بتقديم واجهة مستخدم فاغرةٍ (unpopulated) لن يعمل بشكل جيد.  
من المهم أن تكون مُلمًّا بمفهوم المقياس (scale)، والمقاس (idiom)، وخصائص صنف الحجم (size class)، إن أردت استخدام صور البدء اللوحية على نحوٍ فعال.  


بدلاً من ذلك، النصائح التالية ستساعدك على إنشاء صورة بدء تعمل على عدد كبير من العوامل الشكلية (form factors)، وإطارات العرض، والاتجاهات:
من بين الصور التي تم توفيرها لاستخدامها كصورة بدء لوحية، ستختار منصة iOS الصورة الأكثر ملاءمةً للجهاز ولإطار العرض، ثم ستعرض تلك الصورة. من الممكن استخدام صورة بدء واحدةٍ فقط، ولكن من الممكن أيضًا اختيار صورة البدء التي ستُعرض استنادًا إلى عددٍ من المعايير. عند محاولة التحديد الدقيق لآليات اختيار صورة البدء، يمكن تجاهل الخاصيات غير المُستهدفة، أو التي لا يدعمها التطبيق.
* يجب أن تُوضع الرسومات المهمة (الشعارات، الرموز، العناوين) في المركز. المنطقة الآمنة المحيطة ستختلف، لذا عليك التحقق من أنّ الرسومات المهمة لن تُقتص . أو بالأحرى، لا تعتمد على الرسومات المهمة كصور بدء.
* يمكنك ضبط موضع هذه الرسومات وحجمها بدقة، ولكن ليس بنفس الدقة التي لديك في صور البدء القديمة.
* استخدم لونًا تحتيًا (color wash) بسيطًا. إن كنت تستخدم لونين، فستحتاج إلى أحد اللونين لملء النصف العلوي من الصورة، والآخر لملء النصف السفلي. إن كنت تستخدم لونًا متدرجًا (gradient)، فسترغب على الأرجح في أن يتطابق منتصف تدرج الخطوط مع مركز الصورة.
* ليس عليك أن تحدد عدد البكسلات بدقة - لأنه سيتم تحجيم الصور، كما أنّه من المُستبعد أن تتطابق الصور بشكل كامل مع شبكة البكسل (pixel grid). نظرًا لأن جميع الأجهزة التي تعمل بمنصة iOS تستخدم شاشات retina، فسيلاحظ المستخدمون ذلك على أي حال.  


من المهم أن نفهم مفهوم التحجيم (scale)، والعبارات (idioms)، وخصائص صنف الحجم من أجل استخدام صور البدء اللوحية على نحو فعال. من بين الصور التي تم توفيرها لاستخدامها كصورة بدء لوحية، ستختار منصة iOS الصورة الأكثر ملاءمةً للجهاز ولإطار العرض، ثم ستعرض تلك الصورة. من الممكن توفير صورة بدء واحدة فقط، ولكن من الممكن أيضًا ضبط صورة البدء المعروضة استنادًا إلى عدة معايير. عند محاولة الضبط الدقيق لصورة البدء، يمكن تجاهل السمات غير المُستهدفة، أو التي لا يدعمها التطبيق.
'''ملاحظة''': إن كنت تستخدم صور البدء اللوحية، فلا داعي لتضمين صور البدء القديمة. وإن فعلت ذلك، فستُنسخ الصور القديمة، ولكن لن يتم استخدامها.  
ملاحظة: إن كنت تستخدم صور اللبدء اللوحية، فلا داعي لتضمين صور البدء القديمة. وإذا قمت بذلك، فستُنسخ الصور القديمة، ولكن لن يتم استخدامها.  
الحجم
الحجم
الأجهزة
1x
جميع الأجهزة غير الشبكية (non-retina devices)
2x
معظم أجهزة الشبكية (retina devices)
3x
iPhone 6+/6s+,7s+‎


بشكل عام، سترغب في توفير صور المكبرة مرتين (2x) وثلاث مرات (3x). لا تدعم كوردوفا حالياً إلا الأجهزة الشبكية (retina)، لذلك لا حاجة لتوفير الصور غير المُكبرة 1x.  
==== المقياس (Scale) ====
العبارات (Idioms)
{| class="wikitable"
العبارات
!المقياس
الأجهزة
!الأجهزة
ipad
|-
جميع أجهزة iPad
|<code>1x</code>
iphone
|جميع الأجهزة غير الشبكية (non-retina devices)
جميع أجهزة iPhone و iPod Touch
|-
universal
|<code>2x</code>
جميع الاجهزة
|معظم الأجهزة الشبكية (retina devices)
|-
|<code>3x</code>
|iPhone 6+/6s+,7s+‎
|}
بشكل عام، من المهم أن توفّر الصور ذات المقياسين <code>2x</code> و <code>3x</code>. في الوقت الحالي، لا تدعم كوردوفا إلا الأجهزة الشبكية (retina devices)، لذلك لا حاجة لتوفير الصور ذات المقياس <code>1x</code>.


تحتاج فقط إلى توفير الصور الكونية (universal images)، ما لم تكن بحاجة إلى ضبط الإعدادات لأجل عبارات محددة للجهاز.  
==== المقاسات (Idioms) ====
أصناف الحجم (Size classes)
{| class="wikitable"
!المقاس
!الأجهزة
|-
|<code>ipad</code>
|جميع أجهزة iPad
|-
|<code>iphone</code>
|جميع أجهزة iPhone و iPod Touch
|-
|<code>universal</code>
|جميع الاجهزة
|}
لا تحتاج إلا لتوفير الصور الكونية (universal images)، إلا إن كنت تريد تحديد صورَ لمقاسات أجهزة معيّنةٍ.


هناك صنفا حجم ينطبقان على كلا محوري الشاشة. تعد إطارات العرض الضيقة (Narrow viewports) صنف الحجم المُختزل (compact)، بينما تعد بقية إطارات العرض عادية (regular). عند إعطاء الصور لبيئة العمل Xcode، يجب الاختيار بين "any & compact" و "any & regular". ولتبقى متسقًا مع الاصطلاحات الأصلية، ستتم مطابقة هذه الميزة استنادًا إلى القيمتين "any" و "compact". فيما ستتطابق <code>any</code> مع إطارات العرض ذات الحجم العادي.  
==== أصناف الحجم (Size classes) ====
هناك صنفا حجم ينطبقان على كلا محوري الشاشة هما: إطارات العرض '''الضيقة''' (Narrow viewports) التي تعد صنف الحجم المُختزل (compact)، وإطارات العرض '''العادية''' (regular) التي تعد بقية الإطارات. عند العمل على الصور في بيئة العمل Xcode، يجب الاختيار بين "<code>any & compact</code>" و "<code>any & regular</code>". ولكي تبقى متسقًا مع الاصطلاحات الأصلية، ستتم مطابقة هذه الميزة استنادًا إلى القيمتين "<code>any</code>" و "<code>compact</code>" فيما ستتطابق <code>any</code> مع إطارات العرض ذات الحجم العادي.  


ملاحظة: تستخدم هذه الميزة <code>com</code> كاختصار للأصناف "compact".  
'''ملاحظة''': تستخدم هذه الميزة <code>com</code> كاختصار للأصناف "<code>compact</code>".  


الأصناف التالية مدعومة من قِبل هذه الميزة:  
الأصناف التالية مدعومة من قِبل هذه الميزة:
العرض  
{| class="wikitable"
الارتفاع  
!العرض
الاتجاه
!الارتفاع
any  
!الاتجاه
any  
|-
any
|<code>any</code>
com  
|<code>any</code>
any  
|جميع الاتجاهات
portrait  
|-
any  
|<code>com</code>
com  
|<code>any</code>
landscape (wide)  
|الوضع العمودي (portrait)
com  
|-
com  
|<code>any</code>
landscape (narrow)  
|<code>com</code>
|الوضع الأفقي  (واسع)
|-
|<code>com</code>
|<code>com</code>
|الوضع الأفقي (ضيق)
|}للاطلاع على القائمة الكاملة لأصناف الحجم المرتبطة بمختلف الأجهزة وإطارات العرض، راجع [http://www.sizeclasses.com هذه الصفحة]. 


للاطلاع على القائمة الكاملة لأصناف الحجم المرتبطة بمختلف الأجهزة وإطارات العرض، راجع هذه الصفحة [http://www.sizeclasses.com http://www.sizeclasses.com].
==== شاشة البدء ذات الصورة الواحدة ====
شاشة البدء ذات الصورة الواحدة  
إن كانت صورة البدء التي تريدها بسيطة، فيمكنك تجنّب إنشاء الكثير من صور البدء، ويمكنك الاكتفاء بعرض صورة واحدة فقط. 


إن كانت صورة البدء بسيطة، فقد تتمكن من تجنب إنشاء الكثير من صور البدء وتقديم صورة واحدة فقط. يجب أن تلبي صورة البدء المتطلبات التالية:  
يجب أن تلبي صورة البدء المتطلبات التالية:  
* يجب أن تكون الصورة مربعة  
* يجب أن تكون الصورة مربعة
* يجب أن تكون الصورة كبيرة بما يكفي لوضعها على جهاز iPad Pro من المقاس ‎12.9 ": 2732 × 2732  
* يجب أن تكون الصورة كبيرة بما يكفي لوضعها على جهاز iPad Pro من المقاس ‎12.9 ": 2732 × 2732
* الأشياء المهمة يجب أن توضع في مركز الصورة  
* المحتويات المهمة يجب أن توضع في مركز الصورة


ضع في اعتبارك أنه سيتم اقتصاص الصورة، وربما يُقتص جزء كبيرٌ منها، تبعًا لإطار العرض المُستخدم.  
ضع في اعتبارك أنه سيتم اقتصاص الصورة، وربما يُقتص جزء كبيرٌ منها تبعًا لإطار العرض المُستخدم.  


بمجرد إنشاء الصورة، يمكنك تضمينها في مشروعك عن طريق إضافة ما يلي إلى الملف <code>config.xml</code>:  
بمجرد إنشاء الصورة، يمكنك تضمينها في مشروعك عن طريق إضافة ما يلي إلى الملف <code>[[Cordova/config ref|config.xml]]</code>:  
<syntaxhighlight lang="javascript"><splash src="res/screen/ios/Default@2x~universal~anyany.png" />‎</syntaxhighlight>  
<syntaxhighlight lang="xml"><splash src="res/screen/ios/Default@2x~universal~anyany.png" />‎</syntaxhighlight>  


توفير صورة واحدة فقط، يعني أنّ منصة iOS ستستخدمها في كل سياق.  
توفير صورة واحدة فقط، يعني أنّ منصة iOS ستستخدمها في كل السياقات.
شاشة البدء متعددة الصور


إذا لم تكفيك صورة بدء واحدة، فقد تحتاج على الأرجح إلى توفير ست صور على الأقل، أو حتى أكثر. علاوة على ذلك، ضع في اعتبارك أنه لن يكون من الممكن ضبط الصورة لأجل جهاز معين، ولكن يمكنك ضبطها لأجل صنفٍ جهازيٍ (device class)، وعامل العرض (display factor)، وحجم إطار العرض.  
==== شاشة البدء متعددة الصور ====
إن لم تكفِك صورة بدءٍ واحدة، فقد تحتاج على الأرجح إلى توفير ست صور على الأقل، أو حتى أكثر. علاوةً على ذلك، ضع في اعتبارك أنه لن يكون من الممكن ضبط الصور لأجل جهاز معين، ولكن يمكنك ضبطها فقط لأجل صنف الجهاز (device class)، والعوامل الشكلية (display factor)، وحجم إطار العرض.  


إذا لم تكن بحاجة إلى توفير صور تستهدف مقاسٍ (idiom) معين، فيجب عليك إنشاء ست صور، على النحو التالي:  
إذا لم تكن بحاجة إلى توفير صورَ تستهدف مقاسًا (idiom) معينًا، فسيكون عليك إنشاء ست صورٍ، على النحو التالي:  
التكبير
{| class="wikitable"
المقاس  
!المقياس
العرض  
(scale)
الارتفاع  
!المقاس
الحجم  
(idiom)
اسم الملف
!العرض
2x*  
!الارتفاع
universal  
!الحجم
any  
!اسم الملف
any  
|-
2732x2732  
|<code>2x*‎</code>
<code>Default@2x~universal~anyany.png</code>  
|<code>universal</code>
2x  
|<code>any</code>
universal  
|<code>any</code>
com  
|<code>2732x2732</code>
any  
|<code>Default@2x~universal~anyany.png</code>
1278x2732  
|-
<code>Default@2x~universal~comany.png</code>  
|<code>2x</code>
2x  
|<code>universal</code>
universal  
|<code>com</code>
com  
|<code>any</code>
com  
|<code>1278x2732</code>
1334x750  
|<code>Default@2x~universal~comany.png</code>
<code>Default@2x~universal~comcom.png</code>  
|-
3x*  
|<code>2x</code>
universal  
|<code>universal</code>
any  
|<code>com</code>
any  
|<code>com</code>
2208x2208  
|<code>1334x750</code>
<code>Default@3x~universal~anyany.png</code>  
|<code>Default@2x~universal~comcom.png</code>
3x  
|-
universal  
|<code>3x*‎</code>
any  
|<code>universal</code>
com  
|<code>any</code>
2208x1242  
|<code>any</code>
<code>Default@3x~universal~anycom.png</code>  
|<code>2208x2208</code>
3x  
|<code>Default@3x~universal~anyany.png</code>
universal  
|-
com  
|<code>3x</code>
any  
|<code>universal</code>
1242x2208  
|<code>any</code>
<code>Default@3x~universal~comany.png</code>  
|<code>com</code>
|<code>2208x1242</code>
|<code>Default@3x~universal~anycom.png</code>
|-
|<code>3x</code>
|<code>universal</code>
|<code>com</code>
|<code>any</code>
|<code>1242x2208</code>
|<code>Default@3x~universal~comany.png</code>
|}
<nowiki>*</nowiki> هذه الصورة مطلوبة لكي تستخدم منصة iOS الصور الأخرى المكافئة لهذا المقياس (scale) والمقاس (idiom).


* هذه الصورة مطلوبة من أجل استخدام منصة iOS للصور الأخرى المكافئة لهذا الحجم والمقاس.
'''ملاحظة''': إن كانت الصور ذات المقياس <code>3x</code> لا تكفيك، فهذا لأنّه لا يوجد حاليًا إلا صنفٌ واحدٌ فقط من الأجهزة لديها الكثافة <code>3x</code>، وهي iPhone 6+/6s+/7+‎.  
ملاحظة: إن كانت التكبير بثلاثة أضعاف (3x) لا يكفيك، فهذا لأن هناك صنفًا واحدًا فقط من الأجهزة لديه الكثافة 3x، وهو iPhone 6+/6s+/7+‎.  


يمكننا التعبير عما ورد أعلاه في الملف <code>config.xml</code> بالصيغ التالية:  
يمكننا التعبير عما ورد أعلاه في الملف <code>config.xml</code> بالصيغ التالية:  
<syntaxhighlight lang="javascript"><splash src="res/screen/ios/Default@2x~universal~anyany.png" />
<syntaxhighlight lang="xml">   <splash src="res/screen/ios/Default@2x~universal~anyany.png" />
     <splash src="res/screen/ios/Default@2x~universal~comany.png" />
     <splash src="res/screen/ios/Default@2x~universal~comany.png" />
     <splash src="res/screen/ios/Default@2x~universal~comcom.png" />
     <splash src="res/screen/ios/Default@2x~universal~comcom.png" />
     <splash src="res/screen/ios/Default@3x~universal~anyany.png" />
     <splash src="res/screen/ios/Default@3x~universal~anyany.png" />
     <splash src="res/screen/ios/Default@3x~universal~anycom.png" />
     <splash src="res/screen/ios/Default@3x~universal~anycom.png" />
     <splash src="res/screen/ios/Default@3x~universal~comany.png" />‎</syntaxhighlight>
     <splash src="res/screen/ios/Default@3x~universal~comany.png" /></syntaxhighlight>  
 
يمكننل أن نقوم بمزيد من التخصيص استنادًا إلى مقاس الجهاز، كما يبين الجدول أدناه. :
التكبير
المقاس
العرض
الارتفاع
الحجم
اسم الملف
2x*‎
iphone
any
any
1334x1334
<code>Default@2x~iphone~anyany.png</code>
2x
iphone
com
any
750x1334
<code>Default@2x~iphone~comany.png</code>
2x
iphone
com
com
1334x750
<code>Default@2x~iphone~comcom.png</code>
3x*
iphone
any
any
2208x2208
<code>Default@3x~iphone~anyany.png</code>
3x
iphone
any
com
2208x1242
<code>Default@3x~iphone~anycom.png</code>
3x
iphone
com
any
1242x2208
<code>Default@3x~iphone~comany.png</code>
2x*
ipad
any
any
2732x2732
<code>Default@2x~ipad~anyany.png</code>
2x
ipad
com
any
1278x2732
<code>Default@2x~ipad~comany.png</code>  


* هذه الصورة مطلوبة لكي تستخدم منصة iOS الصور الأخرى داخل هذا المقاس (idiom) والتكبير (scale).  
يمكننا أن نقوم بمزيد من التخصيص استنادًا إلى مقاس الجهاز، كما يبين الجدول أدناه:
{| class="wikitable"
!المقياس
(scale)
!المقاس
(idiom)
!العرض
!الارتفاع
!الحجم
!اسم الملف
|-
|<code>2x*‎</code>
|<code>iphone</code>
|<code>any</code>
|<code>any</code>
|<code>1334x1334</code>
|<code>Default@2x~iphone~anyany.png</code>
|-
|<code>2x</code>
|<code>iphone</code>
|<code>com</code>
|<code>any</code>
|<code>750x1334</code>
|<code>Default@2x~iphone~comany.png</code>
|-
|<code>2x</code>
|<code>iphone</code>
|<code>com</code>
|<code>com</code>
|<code>1334x750</code>
|<code>Default@2x~iphone~comcom.png</code>
|-
|<code>3x*‎</code>
|<code>iphone</code>
|<code>any</code>
|<code>any</code>
|<code>2208x2208</code>
|<code>Default@3x~iphone~anyany.png</code>
|-
|<code>3x</code>
|<code>iphone</code>
|<code>any</code>
|<code>com</code>
|<code>2208x1242</code>
|<code>Default@3x~iphone~anycom.png</code>
|-
|<code>3x</code>
|<code>iphone</code>
|<code>com</code>
|<code>any</code>
|<code>1242x2208</code>
|<code>Default@3x~iphone~comany.png</code>
|-
|<code>2x*‎</code>
|<code>ipad</code>
|<code>any</code>
|<code>any</code>
|<code>2732x2732</code>
|<code>Default@2x~ipad~anyany.png</code>
|-
|<code>2x</code>
|<code>ipad</code>
|<code>com</code>
|<code>any</code>
|<code>1278x2732</code>
|<code>Default@2x~ipad~comany.png</code>
|}
<nowiki>*</nowiki> هذه الصورة مطلوبة لكي تستخدم منصة iOS الصور الأخرى المكافئة لهذا المقاس (idiom) والمقياس (scale).


ما ورد أعلاه سيبدو كما يلي في الملف <code>config.xml</code>:  
ما ورد أعلاه سيبدو كما يلي في الملف <code>[[Cordova/config ref|config.xml]]</code>:  
<syntaxhighlight lang="javascript"><splash src="res/screen/ios/Default@2x~iphone~anyany.png" />
<syntaxhighlight lang="xml">   <splash src="res/screen/ios/Default@2x~iphone~anyany.png" />
     <splash src="res/screen/ios/Default@2x~iphone~comany.png" />
     <splash src="res/screen/ios/Default@2x~iphone~comany.png" />
     <splash src="res/screen/ios/Default@2x~iphone~comcom.png" />
     <splash src="res/screen/ios/Default@2x~iphone~comcom.png" />
سطر 280: سطر 403:
     <splash src="res/screen/ios/Default@3x~iphone~comany.png" />
     <splash src="res/screen/ios/Default@3x~iphone~comany.png" />
     <splash src="res/screen/ios/Default@2x~ipad~anyany.png" />
     <splash src="res/screen/ios/Default@2x~ipad~anyany.png" />
     <splash src="res/screen/ios/Default@2x~ipad~comany.png" />‎</syntaxhighlight>  
     <splash src="res/screen/ios/Default@2x~ipad~comany.png" />
ملاحظات خاصة ومشاكل شائعة
</syntaxhighlight>
* <code>App on target may not reflect changes to images</code> بمجرد تشغيل التطبيق وفق الإعدادات المستهدفة، ستخزن منصة iOS صورة البدء مؤقتًا. لسوء الحظ، عندما تغير الصور، فلن تقوم منصة iOS بتحديث ذاكرة التخزين المؤقت، مما يعني أنك ستظل تشاهد صورة البدء القديمة. يجب عليك إما: حذف التطبيق، أو إعادة ضبط المحتوى والإعدادات (جهاز محاكاة).
* <code>Simulator may not show expected images when launched from CLI</code> عندما تنشر بيئةُ العمل Xcode تطبيقا إلى محاكي معين، فلن ينسخ إلا الأصول (assets) التي تتطابق مع خصائص المحاكي. على سبيل المثال، إذا حاولت تشغيل التطبيق على جهاز محاكاة iPhone 6s Plus، فلن تُنسخ إلا صور البدء ‎@3x‎. عند القيام بالتصريف (compiling) من [[Cordova/cli|واجهة سطر الأوامر]]، فبحسب الإعدادات الافتراضية، سيتم افتراض أنّ الجهاز المستخدم هو iPhone 5s، مما يعني أنه لن تُنسخ إلا صور البدء من النوع ‎@2x. ما لم تكن صور البدء مختلفة بشكل ملحوظ، فمن المحتمل ألا يكون الفرق مُلاحظًا، ولكنّ هذا يعني أنّ الطريقة الوحيدة للتحقق من هذا هو الاختبار على جهاز فعلي.
* <code>anyany  must be provided for other variations to be used</code> إذا لم توفر نسخة <code>anyany</code> من صورة البدء لمقياسٍ محدد (scale) ومقاسٍ معين (idiom)، فسيتم تجاهل الأشكال الأخرى (مثل <code>anycom</code> و <code>comany</code> و <code>comcom</code>).


== معلومات خاصة بـمنصة ويندوز ==  
==== ملاحظات خاصة ومشاكل شائعة ====
*'''التطبيقات التي تعمل على الجهاز الهدف (أي المقاسات والعوامل الشكلية وأصناف الأحجام والمقاييس المستهدفة) قد لا تعكس التعديلات على الصور''': بمجرد تشغيل التطبيق في الجهاز الهدف، ستُخزّن منصة iOS صورة البدء مؤقتًا. لسوء الحظ، عندما تُغيَّر الصور، فلن تحدِّث منصة iOS ذاكرة التخزين المؤقت، مما يعني أنّك ستظل تشاهد صورة البدء القديمة. يجب عليك إما: حذف التطبيق، أو إعادة ضبط المحتوى والإعدادات (محاكي).
*'''قد لا تُظهِر المحاكيات الصورة المُتوقعة عند تشغيل التطبيق من [[Cordova/cli|واجهة سطر الأوامر]]:''' عندما تنشر (deploys) بيئةُ العمل Xcode تطبيقًا إلى محاكي معين، فلن تنسخ إلا الأصول (assets) التي تتطابق مع خصائص المحاكي. على سبيل المثال، إذا حاولت تشغيل التطبيق على محاكي iPhone 6s Plus، فلن تُنسخ إلا صور البدء ذات المقياس <code>‎@3x</code>‎. عند القيام بالتصريف (compiling) من [[Cordova/cli|واجهة سطر الأوامر]]، فالإضافة إلى الإعدادات الافتراضية، سيتم افتراض أنّ الجهاز المستخدم هو iPhone 5s، مما يعني أنه لن تُنسَخ إلا صور البدء من المقياس ‎<code>@2x</code>. وما لم تكن صور البدء مختلفة بشكل ملحوظ، فمن المحتمل ألا يكون الفرق مُلاحظًا، لكنّ الطريقة الوحيدة للتحقق من هذا هو الاختبار على جهاز فعلي.
*'''ينبغي توفير الأبعاد <code>anyany</code> لاستخدامها في الحالات الأخرى:''' إذا لم توفر نُسخةٌ من النوع <code>anyany</code> من صورة البدء لأجل مقياسٍ (scale) ومقاسٍ (idiom) محددين، فسيتم تجاهل الحالات الأخرى (مثل <code>anycom</code> و <code>comany</code> و <code>comcom</code>).


يمكن تعريف صور شاشة البدء باستخدام مفهوم [https://cordova.apache.org/docs/en/dev/config_ref/images.html#windows MRT].
== معلومات خاصة بمنصة ويندوز ==  
إذا قمت بتحديد الخاصية src = "res / windows / splashscreen.png"‎، فسيتم نسخ الملفات التالية إلى مجلد الصور الخاص بالتطبيق:
<code>res/windows/splashscreen.png</code> | <code>res/windows/splashscreen.scale-100.png</code>، <code>res/windows/splashscreen.scale-125.png</code>، وما إلى ذلك
الصيغ التالية مدعومة:
المقياس، ٪
المشروع
العرض
الطول
اسم الملف
100
*ويندوز  
620
300
*<code>splashscreen.png</code> = 4
125
*ويندوز
775
375
<code>splashscreen.scale-125.png</code>
150
*ويندوز
930
450
<code>splashscreen.scale-150.png</code>
200
*ويندوز
1240
600
<code>splashscreen.scale-200.png</code>
400
*ويندوز
2480
1200
<code>splashscreen.scale-400.png</code>
140
*ويندوز
868
420
<code>splashscreen.scale-140.png</code>
180
*ويندوز
1116
540
<code>splashscreen.scale-180.png</code>
100
ويندوز فون 8.1
480
800
*<code>splashscreenphone.png</code> = 4
140
ويندوز فون 8.1
672
1120
<code>splashscreenphone.scale-140.png</code>
240
ويندوز فون 8.1
1152
1920
<code>splashscreenphone.scale-240.png</code>


<code>Note</code>: ينبغي ألا يتجاوز حجم شاشات البدء للمشاريع في منصة Windows 10 ‏ 200‏ كيلو بايت.
يمكن تعريف صور شاشة البدء باستخدام مفهوم [https://cordova.apache.org/docs/en/dev/config_ref/images.html#windows MRT].  
<code>Note</code>: التنسيقات المدعومة هي <code>.png</code> و <code>.jpg</code> و <code>.jpeg</code>. خلط الامتدادات في الهدف غير مدعوم. أي يمكنك الحصول على <code>splashscreen.jpg</code> و <code>splashscreenphone.png</code> ولكن ليس <code>splashscreen.scale-100.png</code>، <code>splashscreen.scale-400.jpg</code>.
<code>Note</code>: قد تحتاج إلى إعادة فتح Visual Studio solution بعد تغيير الصور، وتنفيذ الأمر <code>cordova prepare</code> لتصبح التغييرات نافذة المفعول.  


== مثال خاص بالإعدادات==
إذا قمت بتحديد الخاصية <code>src = "res / windows / splashscreen.png"</code>‎، فسيتم نسخ الملفات التالية إلى مجلد الصور الخاص بالتطبيق: <code>res/windows/splashscreen.png</code> | <code>res/windows/splashscreen.scale-100.pn</code>، <code>res/windows/splashscreen.scale-125.png</code>، ...إلخ.


في الملف الجذري <code>config.xml</code> (وليس الملف الموجود في <code>platforms</code>)، أضف عناصر الإعدادات المُوضحة أدناه.  
الصيغ التالية مدعومة: 
{| class="wikitable"
!المقياس (%)
!المشروع
!العرض
!الارتفاع
!اسم الملف
|-
|<code>100</code>
|ويندوز 10/8.1
|<code>620</code>
|<code>300</code>
|<code>splashscreen.png \‎</code>
|-
|<code>125</code>
|ويندوز 10
|<code>775</code>
|<code>375</code>
|<code>splashscreen.scale-125.png</code>
|-
|<code>150</code>
|ويندوز 10
|<code>930</code>
|<code>450</code>
|<code>splashscreen.scale-150.png</code>
|-
|<code>200</code>
|ويندوز 10
|<code>1240</code>
|<code>600</code>
|<code>splashscreen.scale-200.png</code>
|-
|<code>400</code>
|ويندوز 10
|<code>2482</code>
|<code>1200</code>
|<code>splashscreen.scale-400.png</code>
|-
|<code>140</code>
|ويندوز 8.1
|<code>420</code>
|<code>868</code>
|<code>splashscreen.scale-140.png</code>
|-
|<code>180</code>
|ويندوز 8.1
|<code>1116</code>
|<code>540</code>
|<code>splashscreen.scale-180.png</code>
|-
|<code>100</code>
|ويندوز فون 8.1
|<code>480</code>
|<code>800</code>
|<code>splashscreenphone.png \‎</code>
|-
|<code>140</code>
|ويندوز فون 8.1
|<code>672</code>
|<code>1120</code>
|<code>splashscreenphone.scale-140.png</code>
|-
|<code>240</code>
|ويندوز فون 8.1
|<code>1152</code>
|<code>1920</code>
|<code>splashscreenphone.scale-240.png</code>
|}
'''ملاحظة''': ينبغي ألا يتجاوز حجم شاشات البدء الخاصة بالمشاريع في منصة Windows 10 الحجم‏ 200‏ كيلو بايت.


يرجى ملاحظة أن قيمة السمة "src" تُحسب نسبةً إلى المجلد الجذري (root directory) للمشروع، وليس إلى المجلد www (انظر <code>Directory structure</code> أدناه). يمكنك تسمية الصورة المصدرية بما تريد. يتم تحديد الاسم الداخلي في التطبيق من قبل كوردوفا.  
'''ملاحظة''': الصيغ المدعومة هي ‎<code>.png</code> و ‎<code>.jpg</code> و ‎<code>.jpeg</code>. خَلْط هذه الامتدادات في هدفٍ معينٍ غيرُ مدعوم. أي يمكنك الحصول على <code>splashscreen.jpg</code> و <code>splashscreenphone.png</code> ولكن ليس <code>splashscreen.scale-100.png</code> و <code>splashscreen.scale-400.jpg</code>.


بنية المجلد
'''ملاحظة‎''': قد تحتاج إلى إعادة فتح Visual Studio solution بعد تغيير الصور، وتنفيذ الأمر <code>[[Cordova/cli#.D8.A7.D9.84.D8.A3.D9.85.D8.B1 cordova prepare|cordova prepare]]</code> لتصبح التغييرات نافذة المفعول.
<syntaxhighlight lang="javascript">projectRoot
 
    hooks
== تفضيلات ==
    platforms
 
    plugins
=== الملف <code>Config.xml</code> ===  
    www
* <code>AutoHideSplashScreen</code>: (قيمة منطقية؛ القيمة الافتراضية هي <code>true</code>). يحدد هذا الخيار ما إذا كنت تريد إخفاء شاشة البدء تلقائيًا أم لا. ستُخفَى شاشة البدء بعد المدة الزمنية المحددة في الخاصية <code>SplashScreenDelay</code>.  
        css
<syntaxhighlight lang="xml"><preference name="AutoHideSplashScreen" value="true" />‎</syntaxhighlight>  
        img
* <code>SplashScreenDelay</code>: (عددٌ؛ القيمة الافتراضية هي <code>3000</code>). المدة الزمنية بالميلي ثانية قبل إخفاء شاشة البدء تلقائيًا.  
        js
<syntaxhighlight lang="xml"><preference name="SplashScreenDelay" value="3000" />‎</syntaxhighlight>  
    res
        screen
            android
            ios
            windows‎</syntaxhighlight>
<syntaxhighlight lang="javascript"><platform name="android">
    <!-- you can use any density that exists in the Android project -->
    <splash src="res/screen/android/splash-land-hdpi.png" density="land-hdpi"/>
    <splash src="res/screen/android/splash-land-ldpi.png" density="land-ldpi"/>
    <splash src="res/screen/android/splash-land-mdpi.png" density="land-mdpi"/>
    <splash src="res/screen/android/splash-land-xhdpi.png" density="land-xhdpi"/>
    <splash src="res/screen/android/splash-port-hdpi.png" density="port-hdpi"/>
    <splash src="res/screen/android/splash-port-ldpi.png" density="port-ldpi"/>
    <splash src="res/screen/android/splash-port-mdpi.png" density="port-mdpi"/>
    <splash src="res/screen/android/splash-port-xhdpi.png" density="port-xhdpi"/>
</platform>
<platform name="ios">
    <!-- There are two mechanisms for showing launch images.
      -- Legacy method (supports all devices except iPad Pro 12.9):
      -- Note: Images are determined by width and height. The following are supported -->
    <splash src="res/screen/ios/Default~iphone.png" width="320" height="480"/>
    <splash src="res/screen/ios/Default@2x~iphone.png" width="640" height="960"/>
    <splash src="res/screen/ios/Default-Portrait~ipad.png" width="768" height="1024"/>
    <splash src="res/screen/ios/Default-Portrait@2x~ipad.png" width="1536" height="2048"/>
    <splash src="res/screen/ios/Default-Landscape~ipad.png" width="1024" height="768"/>
    <splash src="res/screen/ios/Default-Landscape@2x~ipad.png" width="2048" height="1536"/>
    <splash src="res/screen/ios/Default-568h@2x~iphone.png" width="640" height="1136"/>
    <splash src="res/screen/ios/Default-667h.png" width="750" height="1334"/>
    <splash src="res/screen/ios/Default-736h.png" width="1242" height="2208"/>
    <splash src="res/screen/ios/Default-Landscape-736h.png" width="2208" height="1242"/>
    <!-- Storyboard method (supports all devices):
      -- Important: If you use the storyboard method, legacy images are
      -- copied but ignored.
      -- Note: images are determined by scale, idiom, and size traits. The following
      -- are suggested based on current device form factors -->
    <splash src="res/screen/ios/Default@2x~universal~anyany.png" />
    <splash src="res/screen/ios/Default@2x~universal~comany.png" />
    <splash src="res/screen/ios/Default@2x~universal~comcom.png" />
    <splash src="res/screen/ios/Default@3x~universal~anyany.png" />
    <splash src="res/screen/ios/Default@3x~universal~anycom.png" />
    <splash src="res/screen/ios/Default@3x~universal~comany.png" />
</platform>
<!-- Configuration using MRT concept (Recommended, see "Windows-specific information" section for details): -->
<platform name="windows">
    <splash src="res/screen/windows/splashscreen.png" target="SplashScreen"/>
    <splash src="res/screen/windows/splashscreenphone.png" target="SplashScreenPhone"/>
</platform>
<!-- Configuration using image size: -->
<!--<platform name="windows">
    <splash src="res/screen/windows/splashscreen.png" width="620" height="300"/>
    <splash src="res/screen/windows/splashscreenphone.png" width="1152" height="1920"/>
</platform>-->
<preference name="SplashScreenDelay" value="10000" />‎</syntaxhighlight>  


== تفضيلات ==
من المهم أن تعلم أنّ هذه القيمة كانت تُحسب بالثواني فيما مضى، وليس بالميلي ثواني، لذلك فالقيم الأقل من <code>30</code> ستُعامل على أنها ثواني. (يمكنك اعتبار هذا ترقيعًا مُهملًا، والذي سيختفي في إصدارٍ مستقبلي.)  
== الملف Config.xml ==
* <code>AutoHideSplashScreen</code> (قيمة منطقية، االقيمة الافتراضية هي <code>true</code>). يشير إلى ما إن كنت تريد إخفاء شاشة البدء تلقائيًا أم لا. ستُخفى شاشة البدء بعد المدة الزمنية المحددة في الخاصية <code>SplashScreenDelay</code>.  
<syntaxhighlight lang="javascript"><preference name="AutoHideSplashScreen" value="true" />‎</syntaxhighlight>
* <code>SplashScreenDelay</code> (عدد، االقيمة الافتراضية هي 3000). المدة الزمنية بالميليثانية قبل إخفاء شاشة البدء تلقائيًا.
<syntaxhighlight lang="javascript"><preference name="SplashScreenDelay" value="3000" />‎</syntaxhighlight>


لاحظ أيضًا أن هذه القيمة كانت تُحسب بالثواني، وليس بالميليثواني، لذلك فالقيم الأقل من 30 ستُعامل على أنها ثواني. (يمكنك اعتبار هذا ترقيعًا مُهملًا، والذي سيختفي في إصدارٍ مستقبلية. )
لتعطيل شاشة البدء، أضف التفضيلات التالية إلى الملف <code>[[Cordova/config ref|config.xml]]</code>:
<syntaxhighlight lang="xml"><preference name="SplashScreenDelay" value="0"/>‎</syntaxhighlight>


لتعطيل شاشة البدء، أضف التفضيلات التالية إلى الملف <code>config.xml</code>:
'''ملاحظة خاصة بويندوز:''' يجب عليك تعطيل شاشة البدء عند تحديث كامل المستند (document body) ديناميكيًا (مثلًا، بواسطة موجه التطبيقات أحادية الصفحة [SPA router] ) وذلك لتجنب التأثير على واجهة المستخدم وعناصر التحكم.  
<syntaxhighlight lang="javascript"><preference name="SplashScreenDelay" value="0"/>‎</syntaxhighlight>


<code>Windows Quirk</code>: يجب عليك تعطيل شاشة البدء عند تحديث كامل المستند ديناميكيًا (مع موجه التطبيقات أحادية الصفحة [SPA router] ) لتجنب التأثير على واجهة المستخدم، وعناصر التحكم.
تذكر أنّ عليك في هذه الحالة أيضًا الإشارة إلى الملف <code>WinJS/base.js</code> مباشرةً في صفحة HTML، لتجنب المشاكل المتعلقة بسياق التنشيط (activation context)‏ ([https://issues.apache.org/jira/browse/CB-11658 CB-11658]).  
تذكر أنّ عليك أيضًا الإشارة إلى <code>WinJS/base.js</code> مباشرةً في صفحة HTML،في هذه الحالة لتجنب المشاكل المتعلقة بسياق التنشيط ([https://issues.apache.org/jira/browse/CB-11658 CB-11658]).  


<code>iOS Quirk</code>: لتعطيل شاشة البدء على منصة <code>ios</code>، يجب عليك أيضا إضافة <code><preference name="FadeSplashScreenDuration" value="0"/></code> إلى الملف <code>config.xml</code>.  
'''ملاحظات خاصة بمنصة iOS''': لتعطيل شاشة البدء على منصة <code>ios</code>، يجب عليك أيضا إضافة الوسم ‎<code><preference name="FadeSplashScreenDuration" value="0"/>‎</code> إلى الملف <code>[[Cordova/config ref|config.xml]]</code>.  
* <code>FadeSplashScreen</code> (قيمة منطقية، القيمة الافتراضية هي <code>true</code>): اضبط هذا الخيار عند القيمة <code>false</code> لمنع شاشة البدء من الخفوت (fading in) أو السطوع (fading out) عند تغير حالة العرض الخاصة به.  
* <code>FadeSplashScreen</code>: (قيمة منطقية؛ القيمة الافتراضية هي <code>true</code>) اضبط هذا الخيار إلى القيمة <code>false</code> لمنع شاشة البدء من الخفوت (fading in) أو السطوع (fading out) عند تغير حالة العرض الخاصة بها.  
<syntaxhighlight lang="javascript"><preference name="FadeSplashScreen" value="false"/>‎</syntaxhighlight>  
<syntaxhighlight lang="xml"><preference name="FadeSplashScreen" value="false"/>‎</syntaxhighlight>  
* <code>FadeSplashScreenDuration</code> (عدد عشري، القيمة الافتراضية هي <code>500</code>): يحدد هذا الخيار عدد الميليثواني التي ستستغرقها عملية خفوت (fade effect) شاشة البدء.  
* <code>FadeSplashScreenDuration</code>: (عدد عشري؛ القيمة الافتراضية هي <code>500</code>) يحدد هذا الخيار عدد الميلي ثواني التي ستستغرقها عملية خفوت (fade effect) شاشة البدء.  
<syntaxhighlight lang="javascript"><preference name="FadeSplashScreenDuration" value="750"/>‎</syntaxhighlight>  
<syntaxhighlight lang="xml"><preference name="FadeSplashScreenDuration" value="750"/>‎</syntaxhighlight>  


ملاحظة: <code>FadeSplashScreenDuration</code> مُتضمّن في <code>SplashScreenDelay</code>، على سبيل المثال، إن كان لديك <code><preference name="SplashScreenDelay" value="3000" /></code> و <code><preference name="FadeSplashScreenDuration" value="1000"/></code> معرفين في المف <code>config.xml</code>:  
'''ملاحظة''': الخاصية <code>FadeSplashScreenDuration</code> مُتضمّنة في <code>SplashScreenDelay</code>، على سبيل المثال، إن عرّفت الخيارين ‎<code><preference name="SplashScreenDelay" value="3000" />‎</code> و ‎<code><preference name="FadeSplashScreenDuration" value="1000"/>‎</code> في الملف <code>[[Cordova/config ref|config.xml]]</code>، فسيحدث ما يلي:  
* ‎00: 00 - تظهر شاشة البدء  
# ‎00: 00 - تظهر شاشة البدء  
* ‎00: 02 - يبدأ الخفوت  
# ‎00: 02 - يبدأ الخفوت  
* ‎00: 03 - تختفي شاشة البدء  
# ‎00: 03 - تختفي شاشة البدء  


تعطيل الخفوت عبر <code><preference name="FadeSplashScreen" value="false"/></code> يعني تقنيًا أن مدة الخفوت ستساوي <code>0</code>، بحيث يبقى التأخير الكلي في هذا المثال هو 3 ثوانٍ.  
تعطيل الخفوت عبر ‎<code><preference name="FadeSplashScreen" value="false"/>‎</code> يعني تقنيًا أنّ مدة الخفوت ستساوي <code>0</code>، بحيث يبقى التأخير الكلي في هذا المثال هو 3 ثوانٍ.  


ملاحظة: ينطبق هذا فقط على بدء تشغيل التطبيق - تحتاج إلى أخذ مدة الخفوت في الاعتبار عند إظهار أو إخفاء شاشة البدء في الشيفرة البرمجية يدويًا:  
'''ملاحظة''': ينطبق هذا فقط على بدء تشغيل التطبيق، إذ ستحتاج إلى أخذ مدة الخفوت في الاعتبار عند إظهار أو إخفاء شاشة البدء يدويًا عبر الشيفرة البرمجية:  
<syntaxhighlight lang="javascript">navigator.splashscreen.show();
<syntaxhighlight lang="xml">navigator.splashscreen.show();
window.setTimeout(function () {
window.setTimeout(function () {
     navigator.splashscreen.hide();
     navigator.splashscreen.hide();
}, splashDuration - fadeDuration);‎</syntaxhighlight>  
}, splashDuration - fadeDuration);‎</syntaxhighlight>  
* <code>ShowSplashScreenSpinner</code> (قيمة منطقية، القيمة الافتراضية هي <code>true</code>): اضبط هذا الخيار عند القيمة عند القيمة <code>false</code> لإخفاء دوّار (spinner) شاشة البدء.  
* <code>ShowSplashScreenSpinner</code>: (قيمة منطقية؛ القيمة الافتراضية هي <code>true</code>) اضبط هذا الخيار إلى القيمة <code>false</code> لإخفاء دوّار (spinner) شاشة البدء.  
<syntaxhighlight lang="javascript"><preference name="ShowSplashScreenSpinner" value="false"/>‎</syntaxhighlight>  
<syntaxhighlight lang="xml"><preference name="ShowSplashScreenSpinner" value="false"/>‎</syntaxhighlight>  
===ملاحظات خاصة بمنصة أندرويد ===  
===ملاحظات خاصة بمنصة أندرويد ===  


في الملف <code>config.xml</code>، يمكنك إضافة التفضيلات التالية:  
في الملف <code>[[Cordova/config ref|config.xml]]</code>، يمكنك إضافة التفضيلات التالية:  
<syntaxhighlight lang="javascript"><preference name="SplashMaintainAspectRatio" value="true|false" />
<syntaxhighlight lang="xml"><preference name="SplashMaintainAspectRatio" value="true|false" />
<preference name="SplashShowOnlyFirstTime" value="true|false" />
<preference name="SplashShowOnlyFirstTime" value="true|false" />
<preference name="SplashScreenSpinnerColor" value="white" />‎</syntaxhighlight>  
<preference name="SplashScreenSpinnerColor" value="white" />‎</syntaxhighlight>  


التفضيل "SplashMaintainAspectRatio" اختياري. إذا تم تعيينه إلى القيمة "true"، فلن يتم ضغط حيز شاشة البدء ليلائم الشاشة، ولكنها ببساطة "ستغطي" الشاشة، مثل خاصية CSS‏ "background-size:cover"‏‏. هذا مفيد للغاية عندما لا يمكن تشويه صور شاشة البدء بأي شكل من الأشكال، على سبيل المثال عندما تحتوي على مشهد أو نص. يعمل هذا الإعداد بشكل أفضل مع الصور التي ذات الهوامش الكبيرة (المناطق الآمنة) التي يمكن اقتصاصها بأمان على شاشات ذات نسب أبعاد (aspect ratios‏‏) مختلفة.  
التفضيل "<code>SplashMaintainAspectRatio</code>" اختياري. إذا تم تعيينه إلى القيمة "<code>true</code>"، فلن يتم ضغط الحيز القابل للرسم (drawable) في شاشة البدء لكي يلائم الشاشة، ولكنه ببساطة "سيغطي" تلك الشاشة، مثل خاصية CSS‏ "<code>background-size:cover</code>"‏‏. هذا مفيد للغاية عندما لا يكون من الممكن تشويه صور شاشة البدء بأي شكل من الأشكال، يحدث هذا على سبيل المثال عندما تحتوي الصورة على مشهدٍ أو نص. يعمل هذا الإعداد بشكل أفضل مع الصور ذات الهوامش الكبيرة (المناطق الآمنة) التي يمكن اقتصاصها بأمان على شاشات ذات نسب أبعاد (aspect ratios‏‏) مختلفة.  


تعيد الإضافة تحميل حيز شاشة البدء (splash drawable) كلما تغير الاتجاه، بحيث يمكنك تحديد أحياز (drawables) مختلفة للاتجاهات العمودية (portrait) والأفقي (landscape).  
تعيد الإضافة تحميل الحيز القابل للرسم لشاشة البدء (splash drawable) كلما تغير الاتجاه، بحيث يمكنك تحديد أجزاء مختلف قابلة للرسم (drawables) للاتجاهات العمودية (<code>portrait</code>) والأفقية (<code>landscape</code>).  


التفضيل "SplashShowOnlyFirstTime" اختياري أيضًا، وقيمته الافتراضية هي <code>true</code>. عند يُضبط عند القيمة <code>true</code>، فلن تظهر شاشة البدء إلا عند إطلاق التطبيق. لكن إن كنت تخطط لاستخدام <code>navigator.app.exitApp()</code> لإغلاق التطبيق وإظهار شاشة البدء في المرة الموالية، فيجب عليك تعيين هذه الخاصية إلى القيمة <code>false</code> (وهذا ينطبق أيضًا على إغلاق التطبيق بواسطة زر الرجوع).  
التفضيل "<code>SplashShowOnlyFirstTime</code>" اختياري أيضًا، وقيمته الافتراضية هي <code>true</code>. فعندما يُضبط إلى القيمة <code>true</code>، لن تظهر شاشة البدء إلا عند إطلاق التطبيق. لكن إن كنت تخطط لاستخدام التابع <code>navigator.app.exitApp()‎</code> لإغلاق التطبيق وإظهار شاشة البدء في المرة التالية، فيجب عليك تعيين هذه الخاصية إلى القيمة <code>false</code> (وهذا ينطبق أيضًا على إغلاق التطبيق بواسطة زر الرجوع).  


الخاصية "SplashScreenSpinnerColor" اختياريًا أيضًا، ويتم تجاهلها عند عدم تعيينها. سيؤدي تعيينها إلى اسم لونٍ صالح، أو رمز لون سداسعشري (HEX) إلى تغيير لون الدوّار (spinner) على أجهزة أندرويد ذات الإصدار 5.0 فما فوق.  
الخاصية "<code>SplashScreenSpinnerColor</code>" اختيارية هي أيضًا، ويتم تجاهلها في حال عدم تعيينها. إن أعطيتها اسمَ لونٍ صالح، أو رمزَ لونٍ ست عشري (HEX)، فسيؤدي ذلك إلى تغيير لون الدوّار (spinner) على أجهزة أندرويد ذات الإصدار 5.0 فما فوق.  
=== ملاحظات خاصة بالمتصفحات (Browsers) ===  
=== ملاحظات خاصة بالمتصفحات (Browsers) ===  


يمكنك استخدام التفضيلات التالية في الملف <code>config.xml</code> الخاص بك:  
يمكنك استخدام التفضيلات التالية في الملف <code>[[Cordova/config ref|config.xml]]</code>:  
<syntaxhighlight lang="javascript"><platform name="browser">
<syntaxhighlight lang="xml"><platform name="browser">
     <preference name="SplashScreen" value="/images/browser/splashscreen.jpg" /> <!-- defaults to "/img/logo.png" -->
     <preference name="SplashScreen" value="/images/browser/splashscreen.jpg" />  
     <preference name="AutoHideSplashScreen" value="true" /> <!-- defaults to "true" -->
      <!-- "/img/logo.png" القيمة الافتراضية هي -->
     <preference name="SplashScreenDelay" value="3000" /> <!-- defaults to "3000" -->
     <preference name="AutoHideSplashScreen" value="true" />
     <preference name="SplashScreenBackgroundColor" value="green" /> <!-- defaults to "#464646" -->
      <!-- "true" القيمة الافتراضية هي -->
     <preference name="ShowSplashScreen" value="false" /> <!-- defaults to "true" -->
     <preference name="SplashScreenDelay" value="3000" />
     <preference name="SplashScreenWidth" value="600" /> <!-- defaults to "170" -->
      <!-- "3000" لقيمة الافتراضية هي -->
     <preference name="SplashScreenHeight" value="300" /> <!-- defaults to "200" -->
     <preference name="SplashScreenBackgroundColor" value="green" />
      <!-- "#464646" القيمة الافتراضية هي -->
     <preference name="ShowSplashScreen" value="false" />
      <!-- "true" القيمة الافتراضية هي -->
     <preference name="SplashScreenWidth" value="600" />
      <!-- "170" القيمة الافتراضية هي -->
     <preference name="SplashScreenHeight" value="300" />
      <!-- "200" القيمة الافتراضية هي -->
</platform>‎</syntaxhighlight>  
</platform>‎</syntaxhighlight>  


<code>Note</code>: يجب أن تكون قيمة <code>SplashScreen</code> مطلقة لكي تعمل في صفحة فرعية. تُستخدم قيمة <code>SplashScreen</code> للمتصفحات فقط. سيتم تجاهل هذه القيمة للمنصات الأخرى.  
'''ملاحظة''': يجب أن تكون قيمة <code>SplashScreen</code> مطلقةً لكي تعمل في صفحة فرعية، إذ تُستخدَم القيمة <code>SplashScreen</code> للمتصفحات فقط. وسيتم تجاهل هذه القيمة في المنصات الأخرى.  
=== ملاحظات خاصة بمنصة iOS ===  
=== ملاحظات خاصة بمنصة iOS ===  
* في منصة iOS، صور شاشة البدء (splashscreen images) تُسمى صور البدء (launch images). وهذه الصور إلزامية في منصة iOS.  
* في منصة iOS، صور شاشة البدء (splashscreen images) تُسمى صور البدء (launch images). وهذه الصور إلزامية في منصة iOS.  
=== ملاحظات خاصة بمنصة ويندوز ===  
=== ملاحظات خاصة بمنصة ويندوز ===  
* <code>SplashScreenSpinnerColor</code>: (سلسلة نصية، القيمة الافتراضية تساوي system accent color) تجزئة (hash)، أو الصياغة اللونية الثلاثية rgb، أو أسماء الألوان في CSS.  
* <code>SplashScreenSpinnerColor</code>: (سلسلة نصية؛ القيمة الافتراضية تساوي نكهة اللون النظامية [system accent color]) يمكن إعطاء هذا الخيار قيمة hash، أو صيغة لونية ثلاثية (rgb)، أو اسم لون بصيغة CSS.  
<syntaxhighlight lang="javascript"><preference name="SplashScreenSpinnerColor" value="#242424"/>
<syntaxhighlight lang="xml"><preference name="SplashScreenSpinnerColor" value="#242424"/>
<preference name="SplashScreenSpinnerColor" value="DarkRed"/>
<preference name="SplashScreenSpinnerColor" value="DarkRed"/>
<preference name="SplashScreenSpinnerColor" value="rgb(50,128,128)"/>‎</syntaxhighlight>  
<preference name="SplashScreenSpinnerColor" value="rgb(50,128,128)"/>‎</syntaxhighlight>  
*<code>SplashScreenBackgroundColor</code>: (سلسلة نصية، القيمة الافتراضية تساوي #464646) الصياغة السداسعشرية (hex notation)  
*<code>SplashScreenBackgroundColor</code>: (سلسلة نصية؛ القيمة الافتراضية تساوي ‎<code>#464646</code>) يأخذ هذا الخيار قيمة لونية وفق الصيغة الست عشرية (hex notation)  
<syntaxhighlight lang="javascript"><preference name="SplashScreenBackgroundColor" value="0xFFFFFFFF"/>‎</syntaxhighlight>  
<syntaxhighlight lang="xml"><preference name="SplashScreenBackgroundColor" value="0xFFFFFFFF"/>‎</syntaxhighlight>


== التوابع ==  
== توابع ==
*splashscreen.show
*splashscreen.hide


==splashscreen.hide==  
===<code>splashscreen.hide</code>===  


إخفاء شاشة البدء.  
يخفي هذا التابع شاشة البدء.  
<syntaxhighlight lang="javascript">navigator.splashscreen.hide();‎</syntaxhighlight>  
<syntaxhighlight lang="javascript">navigator.splashscreen.hide();‎</syntaxhighlight>  
=== ملاحظات خاصة بمنصة iOS ===  
==== ملاحظات خاصة بمنصة iOS ====  


يجب أن تكون قيمة الإعداد <code>config.xml</code> في الملف <code>AutoHideSplashScreen</code> مساوية للقيمة <code>false</code>. لتأخير إخفاء شاشة البدء لمدة ثانيتين، أضف مؤقتًا مثل ما يلي في معالج الحدث <code>deviceready</code>:  
يجب أن تكون قيمة الإعداد <code>AutoHideSplashScreen</code> في الملف <code>config.xml</code> مساوية للقيمة <code>false</code>. ولتأخير إخفاء شاشة البدء لمدة ثانيتين، أضف مؤقتًا في معالج الحدث <code>[[Cordova/events#deviceready|deviceready]]</code>، كما يلي:  
<syntaxhighlight lang="javascript">setTimeout(function() {
<syntaxhighlight lang="javascript">setTimeout(function() {
     navigator.splashscreen.hide();
     navigator.splashscreen.hide();
}, 2000);‎</syntaxhighlight>  
}, 2000);‎</syntaxhighlight>  


==splashscreen.show==  
===<code>splashscreen.show</code>===  


عرض شاشة البدء.  
يعرض هذا التابع شاشة البدء.  
<syntaxhighlight lang="javascript">navigator.splashscreen.show();‎</syntaxhighlight>  
<syntaxhighlight lang="javascript">navigator.splashscreen.show();‎</syntaxhighlight>  


لا يمكن للتطبيق استدعاء التابع <code>navigator.splashscreen.show()</code> حتى يبدأ التطبيق، وبعد إطلاق الحدث <code>deviceready</code>. ولكن نظرًا لأنه من المفترض أن تظهر شاشة البدء قبل بدء تشغيل التطبيق، فإن ذلك يخالف الغرض الأساسي من شاشات البدء. سيؤدي إدراج بعض الإعدادات في الملف <code>config.xml</code> تلقائيًا إلى إظهار (<code>show</code>) شاشة البدء بعد إطلاق التطبيق، وقبل بدء تشغيله بالكامل وتلقيه الحدث <code>deviceready</code>. لهذا السبب، من المستبعد أن تحتاج إلى استدعاء التابع <code>navigator.splashscreen.show()</code> لإظهار شاشة البدء عند إطلاق التطبيق.
لا يمكن للتطبيق استدعاء التابع <code>navigator.splashscreen.show()‎</code> حتى يبدأ التطبيق وبعد إطلاق الحدث <code>[[Cordova/events#deviceready|deviceready]]</code>. ولكن هذا يخالف الغرض الأساسي من شاشات البدء، لأنّه من المفترض أن تظهر شاشة البدء قبل بدء تشغيل التطبيق.  
 
يؤدي إدراج بعض الإعدادات في الملف <code>[[Cordova/config ref|config.xml]]</code> تلقائيًا إلى إظهار شاشة البدء بعد تشغيل التطبيق، وقبل بدء تشغيله بالكامل وتلقيه الحدث <code>[[Cordova/events#deviceready|deviceready]]</code>. لهذا السبب، من المستبعد أن تحتاج إلى استدعاء التابع <code>navigator.splashscreen.show()‎</code> لإظهار شاشة البدء إبّان بدء تشغيل التطبيق.
== انظر أيضًا==
 
*إضافة [[Cordova/cordova plugin screen orientation|اتجاه الشاشة]]
*إضافة <nowiki/>[[Cordova/cordova plugin device|حالة الجهاز]]
*[[Cordova/plugins|دليل تطوير الإضافات في كوردوفا]]
==مصادر==
==مصادر==
*[https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-splashscreen/index.html صفحة cordova-plugin-splashscreen في توثيق كوردوفا الرسمي.]
*[https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-splashscreen/index.html صفحة cordova-plugin-splashscreen في توثيق كوردوفا الرسمي.]

المراجعة الحالية بتاريخ 21:59، 3 ديسمبر 2020

تستعمل هذه الإضافة (cordova-plugin-splashscreen) لإنشاء شاشات البدء (splash screens)، إذ تعرض أو تخفي شاشة البدء أثناء فتح التطبيق.

التثبيت

يمكن تثبيت هذه الإضافة عبر الأمر التالي:

# npm hosted (new) id
cordova plugin add cordova-plugin-splashscreen
# يمكنك أيضا تثبيتها من هذا المستودع
cordova plugin add https://github.com/apache/cordova-plugin-splashscreen.git‎

المنصات المدعومة

ملاحظة: لا تتطلب شاشة البدء الموسعة (Extended splashscreen) تثبيت هذه الإضافة على منصة ويندوز (على عكس منصتي أندرويد و iOS) إن لم تكن بحاجة لاستخدام الواجهة البرمجية للإضافة، أي إخفاء وعرض شاشة البدء برمجيًا.

مثال توضيحي خاص بالإعدادات

في الملف الجذري config.xml (وليس الملف الموجود في platforms)، أضف عناصر الإعدادات المُوضحة أدناه.

يرجى ملاحظة أنّ قيمة الخاصية "src" تُحسب نسبةً إلى المجلد الجذري (root directory) للمشروع، وليس إلى المجلد www (انظر بنية المجلد أدناه). يمكنك تسمية الصورة المصدرية بما تريد، إذ يتم تحديد الاسم الداخلي في التطبيق من قبل كوردوفا.

بنية المجلد هي كالتالي: 

projectRoot
    hooks
    platforms
    plugins
    www
        css
        img
        js
    res
        screen
            android
            ios
            windows

<platform name="android">
    <!-- بإمكانك استخدام أي كثافة موجودةٍ في مشروع أندرويد -->
    <splash src="res/screen/android/splash-land-hdpi.png" density="land-hdpi"/>
    <splash src="res/screen/android/splash-land-ldpi.png" density="land-ldpi"/>
    <splash src="res/screen/android/splash-land-mdpi.png" density="land-mdpi"/>
    <splash src="res/screen/android/splash-land-xhdpi.png" density="land-xhdpi"/>
    <splash src="res/screen/android/splash-land-xxhdpi.png" density="land-xxhdpi"/>

    <splash src="res/screen/android/splash-port-hdpi.png" density="port-hdpi"/>
    <splash src="res/screen/android/splash-port-ldpi.png" density="port-ldpi"/>
    <splash src="res/screen/android/splash-port-mdpi.png" density="port-mdpi"/>
    <splash src="res/screen/android/splash-port-xhdpi.png" density="port-xhdpi"/>
    <splash src="res/screen/android/splash-port-xxhdpi.png" density="port-xxhdpi"/>
</platform>
<platform name="ios">
    <!-- هناك آليتان لعرض صور البدء
      -- iPad Pro 12.9 الطريقة القديمة: والتي تدعم كافة الأجهزة باستثناء
      -- ملاحظة: تُحدد الصور بالعرض والارتفاع
      -- السمات التالية مدعومة -->
    <splash src="res/screen/ios/Default~iphone.png" width="320" height="480"/>
    <splash src="res/screen/ios/Default@2x~iphone.png" width="640" height="960"/>
    <splash src="res/screen/ios/Default-Portrait~ipad.png" width="768" height="1024"/>
    <splash src="res/screen/ios/Default-Portrait@2x~ipad.png" width="1536" height="2048"/>
    <splash src="res/screen/ios/Default-Landscape~ipad.png" width="1024" height="768"/>
    <splash src="res/screen/ios/Default-Landscape@2x~ipad.png" width="2048" height="1536"/>
    <splash src="res/screen/ios/Default-568h@2x~iphone.png" width="640" height="1136"/>
    <splash src="res/screen/ios/Default-667h.png" width="750" height="1334"/>
    <splash src="res/screen/ios/Default-736h.png" width="1242" height="2208"/>
    <splash src="res/screen/ios/Default-Landscape-736h.png" width="2208" height="1242"/>

    <!-- الطريقة اللوحية، تدعمها كل الأجهزة: 
      -- ملاحظة: إن استخدمت الطريقة اللوحية، ستنُسخ الصور القديمة، لكن ستُتَجاهل
      -- ملاحظة: الصور تُحدد بالمقياس والمقاس وخصائص الحجم
      -- الخاصيات التالية مُقترحة استنادًا إلى العوامل الشكلية للجهاز الحالي -->
    <splash src="res/screen/ios/Default@2x~universal~anyany.png" />
    <splash src="res/screen/ios/Default@2x~universal~comany.png" />
    <splash src="res/screen/ios/Default@2x~universal~comcom.png" />
    <splash src="res/screen/ios/Default@3x~universal~anyany.png" />
    <splash src="res/screen/ios/Default@3x~universal~anycom.png" />
    <splash src="res/screen/ios/Default@3x~universal~comany.png" />
</platform>
<!-- MRT إعدادات تستخدم المفهوم 
  -- يُنصح بها، راجع فقرة "معلومات خاصة بويندوز" لمزيد من التفاصيل -->
<platform name="windows">
    <splash src="res/screen/windows/splashscreen.png" target="SplashScreen"/>
    <splash src="res/screen/windows/splashscreenphone.png" target="SplashScreenPhone"/>
</platform>
<!-- إعدادات تستخدم حجم الصورة -->
<!--<platform name="windows">
    <splash src="res/screen/windows/splashscreen.png" width="620" height="300"/>
    <splash src="res/screen/windows/splashscreenphone.png" width="1152" height="1920"/>
</platform>-->
<preference name="SplashScreenDelay" value="10000" />‎

معلومات خاصة بمنصة iOS

هناك آليتان لعرض شاشة البدء على منصة iOS:

  • آلية صور البدء القديمة (Legacy launch images): في هذه الآلية، يُحدّد حجم الصور ليتلاءم بشكل تام مع حجم شاشة الجهاز. لا تدعم هذه الآلية الدقة الأصلية لجهاز iPad Pro 12.9، أو تعدد المهام (multitasking) للشاشات المتعددة (split-screen) أو التمريرية (slide-over).
  • آلية صُوَر البدء اللوحية (Launch storyboard images): في هذه الآلية، يُحدد حجم الصور استنادًا إلى المقياس (scale) والمقاس (idiom) وأصناف الحجم (size classes). تدعم هذه الآلية جميع الأجهزة، ويمكن استخدامها مع تعدد المهام التمريري أو الشاشات المتعددة.

بدأت Apple تبتعد عن استخدام آلية صور البدء القديمة، إذ لا يوجد دعم رسمي لصور البدء ذات الدقة الأصلية (native-resolution) على جهاز iPad Pro 12.9، أو صور بدءٍ تعمل مع تعدد المهام التمريري (slide-over) أو تعدد الشاشات (split-screen). إذا لم يكن تطبيقك بحاجة إلى دعم هذه السياقات، فيمكنك الاستمرار في استخدام آلية صور البدء القديمة.

الطريقة المفضلة لتوفير صور البدء هي استخدام آلية صور البدء اللوحية. فبالنسبة لمطوّري التطبيقات الأصلية، صورة البدء اللوحية تمثل نسخةً شاغرةً (unpopulated) من واجهة المستخدم الخاصة بالتطبيق عند فتحه. أما بالنسبة إلى مطوّري التطبيقات غير الأصلية، والذين لا يرغبون في تعلم بناء الواجهة (Interface Builder)، فإنّ هذه الإضافة تحاكي آلية صُور البدء القديمة.

آلية صور البدء القديمة

إذا اخترت استخدام آلية صور البدء القديمة، فعليك إضافة ما يلي إلى الملف config.xml: 

    <splash src="res/screen/ios/Default~iphone.png" width="320" height="480"/>
    <splash src="res/screen/ios/Default@2x~iphone.png" width="640" height="960"/>
    <splash src="res/screen/ios/Default-Portrait~ipad.png" width="768" height="1024"/>
    <splash src="res/screen/ios/Default-Portrait@2x~ipad.png" width="1536" height="2048"/>
    <splash src="res/screen/ios/Default-Landscape~ipad.png" width="1024" height="768"/>
    <splash src="res/screen/ios/Default-Landscape@2x~ipad.png" width="2048" height="1536"/>
    <splash src="res/screen/ios/Default-568h@2x~iphone.png" width="640" height="1136"/>
    <splash src="res/screen/ios/Default-667h.png" width="750" height="1334"/>
    <splash src="res/screen/ios/Default-736h.png" width="1242" height="2208"/>

من الناحية الفنية، يمكنك وضع أيّ اسم ملف تريد في الخاصية src؛ تُستخدم أسماء الملفات لأنها تطابق ما سيتم استخدامه عند تصريف (compiling) المشروع. تحدد خاصيتا العرض (width) والارتفاع (height) صُور البدء التي ستُعرض على الأجهزة على النحو التالي:

العرض الارتفاع الجهاز (الاتجاه)
320 480 جميع أجهزة iPhone و iPod غير الشبكية (non-retina)
640 960 iPhone 4/4s (الوضع العمودي portrait)
640 1136 iPhone 5/5s/SE (الوضع العمودي)
750 1334 iPhone 6/6s/7 (الوضع العمودي)
1242 2208 iPhone 6+/6s+/7+‎ (الوضع العمودي)
2208 1242 iPhone 6+/6s+/7+‎ (الوضع الأفقي landscape)
768 1024 جميع أجهزة iPad غير الشبكية (non-retina) (الوضع العمودي)
1024 768 جميع أجهزة iPad غير الشبكية (الوضع الأفقي)
1536 2048 جميع أجهزة iPad الشبكية (الوضع العمودي)
2048 1536 جميع أجهزة iPad الشبكية (الوضع الأفقي)

ملاحظة: من المهم للغاية أن تُطابق الصورةُ المصدرية الحجم المحدد في الخاصيتين width و height. وإلا فقد يفشل الجهاز في عرضها بالشكل الصحيح، أو قد لا يعرضها مطلقًا.

صور البدء اللوحية

لأجل دعم المعاملات الشكلية (form factors) الحديثة، وتعدد المهام التمريري (slide-over) أو تعدد الشاشات (split-screen)، فعليك استخدام صور البدء اللوحية. تتشابه هذه الصور مع صور البدء القديمة، ولكن بينهما بعض الاختلافات الجوهرية:

  • الصور ليست مخصوصة بجهاز معين.
  • يُغيّر حجم الصور لملء إطار العرض (viewport) المتاح (مع الحفاظ على نسبة الأبعاد [aspect ratio]).
  • سيتم اقتصاص الحواف الخارجية للصور، وسيختلف قدر الاقتصاص بناءً على نوع الجهاز وإطار العرض.
  • ليست هناك حاجة لتوفير صورةٍ، وإطار عرضٍ، واتجاه (orientation) لكل جهاز؛ فستختار منصة iOS أنسب صورة تلقائيًا.

تصميم صور البدء اللوحية

أول شيء ينبغي أن تنتبه له عند تصميم صورة بدءٍ لوحيةٍ هو إدراك أنّ حواف الصورة ستُقتصّ لا محالة. لذلك، يجب ألا تضع أيّ معلومات مهمة بالقرب من حواف الصور التي تريد اعتمادها كصور بدء لوحية. وتذكر أنّ مركز الصورة هو المنطقة الآمنة الوحيدة، لكنّ كل هذا لن يضمن لك أنّ اتباع نصيحة Apple بتقديم واجهة مستخدم فاغرةٍ (unpopulated) سيعمل بصورة جيدة.

بدلاً من ذلك، النصائح التالية ستساعدك على إنشاء صورة بدءٍ تعمل على عدد كبير من العوامل الشكلية (form factors)، وإطارات العرض، والاتجاهات:

  • يجب أن تُوضع الرسومات المهمة (الشعارات، الرموز، العناوين) في المركز. المنطقة الآمنة المحيطة ستختلف بحسب العوامل، لذا عليك التحقق من أنّ الرسومات المهمة لن تُقتص. أو بالأحرى، لا تعتمد على الرسومات المهمة كصور بدء.
    • يمكنك ضبط موضع هذه الرسومات وحجمها بدقة، ولكن ليس لديك نفس دقة التحكم كما في صور البدء القديمة.
  • استخدم لونًا تحتيًا (color wash) بسيطًا. إن كنت تستخدم لونين، فستحتاج إلى أحد اللونين لملء النصف العلوي من الصورة، والآخر لملء النصف السفلي. إن كنت تستخدم لونًا متدرجًا (gradient)، فسترغب على الأرجح في أن ينطبق منتصف تدرج الخطوط مع مركز الصورة.
  • ليس عليك أن تحدد عدد البكسلات (pixel) بدقة - لأنّ الصور ستُحجّم (scaled)، كما أنّه من المُستبعد أن تتطابق الصور بشكل كامل مع شبكة البكسل (pixel grid). فنظرًا لكون جميع الأجهزة التي تستخدم منصة iOS تستخدم شاشاتٍ شبكيةٍ (retina)، فسيلاحظ المستخدمون ذلك على أي حال.

من المهم أن تكون مُلمًّا بمفهوم المقياس (scale)، والمقاس (idiom)، وخصائص صنف الحجم (size class)، إن أردت استخدام صور البدء اللوحية على نحوٍ فعال.

من بين الصور التي تم توفيرها لاستخدامها كصورة بدء لوحية، ستختار منصة iOS الصورة الأكثر ملاءمةً للجهاز ولإطار العرض، ثم ستعرض تلك الصورة. من الممكن استخدام صورة بدء واحدةٍ فقط، ولكن من الممكن أيضًا اختيار صورة البدء التي ستُعرض استنادًا إلى عددٍ من المعايير. عند محاولة التحديد الدقيق لآليات اختيار صورة البدء، يمكن تجاهل الخاصيات غير المُستهدفة، أو التي لا يدعمها التطبيق.

ملاحظة: إن كنت تستخدم صور البدء اللوحية، فلا داعي لتضمين صور البدء القديمة. وإن فعلت ذلك، فستُنسخ الصور القديمة، ولكن لن يتم استخدامها.

المقياس (Scale)

المقياس الأجهزة
1x جميع الأجهزة غير الشبكية (non-retina devices)
2x معظم الأجهزة الشبكية (retina devices)
3x iPhone 6+/6s+,7s+‎

بشكل عام، من المهم أن توفّر الصور ذات المقياسين 2x و 3x. في الوقت الحالي، لا تدعم كوردوفا إلا الأجهزة الشبكية (retina devices)، لذلك لا حاجة لتوفير الصور ذات المقياس 1x.

المقاسات (Idioms)

المقاس الأجهزة
ipad جميع أجهزة iPad
iphone جميع أجهزة iPhone و iPod Touch
universal جميع الاجهزة

لا تحتاج إلا لتوفير الصور الكونية (universal images)، إلا إن كنت تريد تحديد صورَ لمقاسات أجهزة معيّنةٍ.

أصناف الحجم (Size classes)

هناك صنفا حجم ينطبقان على كلا محوري الشاشة هما: إطارات العرض الضيقة (Narrow viewports) التي تعد صنف الحجم المُختزل (compact)، وإطارات العرض العادية (regular) التي تعد بقية الإطارات. عند العمل على الصور في بيئة العمل Xcode، يجب الاختيار بين "any & compact" و "any & regular". ولكي تبقى متسقًا مع الاصطلاحات الأصلية، ستتم مطابقة هذه الميزة استنادًا إلى القيمتين "any" و "compact" فيما ستتطابق any مع إطارات العرض ذات الحجم العادي.

ملاحظة: تستخدم هذه الميزة com كاختصار للأصناف "compact".

الأصناف التالية مدعومة من قِبل هذه الميزة:

العرض الارتفاع الاتجاه
any any جميع الاتجاهات
com any الوضع العمودي (portrait)
any com الوضع الأفقي  (واسع)
com com الوضع الأفقي (ضيق)

للاطلاع على القائمة الكاملة لأصناف الحجم المرتبطة بمختلف الأجهزة وإطارات العرض، راجع هذه الصفحة.

شاشة البدء ذات الصورة الواحدة

إن كانت صورة البدء التي تريدها بسيطة، فيمكنك تجنّب إنشاء الكثير من صور البدء، ويمكنك الاكتفاء بعرض صورة واحدة فقط.

يجب أن تلبي صورة البدء المتطلبات التالية:

  • يجب أن تكون الصورة مربعة
  • يجب أن تكون الصورة كبيرة بما يكفي لوضعها على جهاز iPad Pro من المقاس ‎12.9 ": 2732 × 2732
  • المحتويات المهمة يجب أن توضع في مركز الصورة

ضع في اعتبارك أنه سيتم اقتصاص الصورة، وربما يُقتص جزء كبيرٌ منها تبعًا لإطار العرض المُستخدم.

بمجرد إنشاء الصورة، يمكنك تضمينها في مشروعك عن طريق إضافة ما يلي إلى الملف config.xml: 

<splash src="res/screen/ios/Default@2x~universal~anyany.png" />‎

توفير صورة واحدة فقط، يعني أنّ منصة iOS ستستخدمها في كل السياقات.

شاشة البدء متعددة الصور

إن لم تكفِك صورة بدءٍ واحدة، فقد تحتاج على الأرجح إلى توفير ست صور على الأقل، أو حتى أكثر. علاوةً على ذلك، ضع في اعتبارك أنه لن يكون من الممكن ضبط الصور لأجل جهاز معين، ولكن يمكنك ضبطها فقط لأجل صنف الجهاز (device class)، والعوامل الشكلية (display factor)، وحجم إطار العرض.

إذا لم تكن بحاجة إلى توفير صورَ تستهدف مقاسًا (idiom) معينًا، فسيكون عليك إنشاء ست صورٍ، على النحو التالي:

المقياس

(scale)

المقاس

(idiom)

العرض الارتفاع الحجم اسم الملف
2x*‎ universal any any 2732x2732 Default@2x~universal~anyany.png
2x universal com any 1278x2732 Default@2x~universal~comany.png
2x universal com com 1334x750 Default@2x~universal~comcom.png
3x*‎ universal any any 2208x2208 Default@3x~universal~anyany.png
3x universal any com 2208x1242 Default@3x~universal~anycom.png
3x universal com any 1242x2208 Default@3x~universal~comany.png

* هذه الصورة مطلوبة لكي تستخدم منصة iOS الصور الأخرى المكافئة لهذا المقياس (scale) والمقاس (idiom).

ملاحظة: إن كانت الصور ذات المقياس 3x لا تكفيك، فهذا لأنّه لا يوجد حاليًا إلا صنفٌ واحدٌ فقط من الأجهزة لديها الكثافة 3x، وهي iPhone 6+/6s+/7+‎.

يمكننا التعبير عما ورد أعلاه في الملف config.xml بالصيغ التالية: 

    <splash src="res/screen/ios/Default@2x~universal~anyany.png" />
    <splash src="res/screen/ios/Default@2x~universal~comany.png" />
    <splash src="res/screen/ios/Default@2x~universal~comcom.png" />
    <splash src="res/screen/ios/Default@3x~universal~anyany.png" />
    <splash src="res/screen/ios/Default@3x~universal~anycom.png" />
    <splash src="res/screen/ios/Default@3x~universal~comany.png" />

يمكننا أن نقوم بمزيد من التخصيص استنادًا إلى مقاس الجهاز، كما يبين الجدول أدناه:

المقياس

(scale)

المقاس

(idiom)

العرض الارتفاع الحجم اسم الملف
2x*‎ iphone any any 1334x1334 Default@2x~iphone~anyany.png
2x iphone com any 750x1334 Default@2x~iphone~comany.png
2x iphone com com 1334x750 Default@2x~iphone~comcom.png
3x*‎ iphone any any 2208x2208 Default@3x~iphone~anyany.png
3x iphone any com 2208x1242 Default@3x~iphone~anycom.png
3x iphone com any 1242x2208 Default@3x~iphone~comany.png
2x*‎ ipad any any 2732x2732 Default@2x~ipad~anyany.png
2x ipad com any 1278x2732 Default@2x~ipad~comany.png

* هذه الصورة مطلوبة لكي تستخدم منصة iOS الصور الأخرى المكافئة لهذا المقاس (idiom) والمقياس (scale).

ما ورد أعلاه سيبدو كما يلي في الملف config.xml: 

    <splash src="res/screen/ios/Default@2x~iphone~anyany.png" />
    <splash src="res/screen/ios/Default@2x~iphone~comany.png" />
    <splash src="res/screen/ios/Default@2x~iphone~comcom.png" />
    <splash src="res/screen/ios/Default@3x~iphone~anyany.png" />
    <splash src="res/screen/ios/Default@3x~iphone~anycom.png" />
    <splash src="res/screen/ios/Default@3x~iphone~comany.png" />
    <splash src="res/screen/ios/Default@2x~ipad~anyany.png" />
    <splash src="res/screen/ios/Default@2x~ipad~comany.png" />

ملاحظات خاصة ومشاكل شائعة

  • التطبيقات التي تعمل على الجهاز الهدف (أي المقاسات والعوامل الشكلية وأصناف الأحجام والمقاييس المستهدفة) قد لا تعكس التعديلات على الصور: بمجرد تشغيل التطبيق في الجهاز الهدف، ستُخزّن منصة iOS صورة البدء مؤقتًا. لسوء الحظ، عندما تُغيَّر الصور، فلن تحدِّث منصة iOS ذاكرة التخزين المؤقت، مما يعني أنّك ستظل تشاهد صورة البدء القديمة. يجب عليك إما: حذف التطبيق، أو إعادة ضبط المحتوى والإعدادات (محاكي).
  • قد لا تُظهِر المحاكيات الصورة المُتوقعة عند تشغيل التطبيق من واجهة سطر الأوامر: عندما تنشر (deploys) بيئةُ العمل Xcode تطبيقًا إلى محاكي معين، فلن تنسخ إلا الأصول (assets) التي تتطابق مع خصائص المحاكي. على سبيل المثال، إذا حاولت تشغيل التطبيق على محاكي iPhone 6s Plus، فلن تُنسخ إلا صور البدء ذات المقياس ‎@3x‎. عند القيام بالتصريف (compiling) من واجهة سطر الأوامر، فالإضافة إلى الإعدادات الافتراضية، سيتم افتراض أنّ الجهاز المستخدم هو iPhone 5s، مما يعني أنه لن تُنسَخ إلا صور البدء من المقياس ‎@2x. وما لم تكن صور البدء مختلفة بشكل ملحوظ، فمن المحتمل ألا يكون الفرق مُلاحظًا، لكنّ الطريقة الوحيدة للتحقق من هذا هو الاختبار على جهاز فعلي.
  • ينبغي توفير الأبعاد anyany لاستخدامها في الحالات الأخرى: إذا لم توفر نُسخةٌ من النوع anyany من صورة البدء لأجل مقياسٍ (scale) ومقاسٍ (idiom) محددين، فسيتم تجاهل الحالات الأخرى (مثل anycom و comany و comcom).

معلومات خاصة بمنصة ويندوز

يمكن تعريف صور شاشة البدء باستخدام مفهوم MRT.

إذا قمت بتحديد الخاصية src = "res / windows / splashscreen.png"‎، فسيتم نسخ الملفات التالية إلى مجلد الصور الخاص بالتطبيق: res/windows/splashscreen.png | res/windows/splashscreen.scale-100.pn، res/windows/splashscreen.scale-125.png، ...إلخ.

الصيغ التالية مدعومة:

المقياس (%) المشروع العرض الارتفاع اسم الملف
100 ويندوز 10/8.1 620 300 splashscreen.png \‎
125 ويندوز 10 775 375 splashscreen.scale-125.png
150 ويندوز 10 930 450 splashscreen.scale-150.png
200 ويندوز 10 1240 600 splashscreen.scale-200.png
400 ويندوز 10 2482 1200 splashscreen.scale-400.png
140 ويندوز 8.1 420 868 splashscreen.scale-140.png
180 ويندوز 8.1 1116 540 splashscreen.scale-180.png
100 ويندوز فون 8.1 480 800 splashscreenphone.png \‎
140 ويندوز فون 8.1 672 1120 splashscreenphone.scale-140.png
240 ويندوز فون 8.1 1152 1920 splashscreenphone.scale-240.png

ملاحظة: ينبغي ألا يتجاوز حجم شاشات البدء الخاصة بالمشاريع في منصة Windows 10 الحجم‏ 200‏ كيلو بايت.

ملاحظة: الصيغ المدعومة هي ‎.png و ‎.jpg و ‎.jpeg. خَلْط هذه الامتدادات في هدفٍ معينٍ غيرُ مدعوم. أي يمكنك الحصول على splashscreen.jpg و splashscreenphone.png ولكن ليس splashscreen.scale-100.png و splashscreen.scale-400.jpg.

ملاحظة‎: قد تحتاج إلى إعادة فتح Visual Studio solution بعد تغيير الصور، وتنفيذ الأمر cordova prepare لتصبح التغييرات نافذة المفعول.

تفضيلات

الملف Config.xml

  • AutoHideSplashScreen: (قيمة منطقية؛ القيمة الافتراضية هي true). يحدد هذا الخيار ما إذا كنت تريد إخفاء شاشة البدء تلقائيًا أم لا. ستُخفَى شاشة البدء بعد المدة الزمنية المحددة في الخاصية SplashScreenDelay.
<preference name="AutoHideSplashScreen" value="true" />‎
  • SplashScreenDelay: (عددٌ؛ القيمة الافتراضية هي 3000). المدة الزمنية بالميلي ثانية قبل إخفاء شاشة البدء تلقائيًا.
<preference name="SplashScreenDelay" value="3000" />‎

من المهم أن تعلم أنّ هذه القيمة كانت تُحسب بالثواني فيما مضى، وليس بالميلي ثواني، لذلك فالقيم الأقل من 30 ستُعامل على أنها ثواني. (يمكنك اعتبار هذا ترقيعًا مُهملًا، والذي سيختفي في إصدارٍ مستقبلي.)

لتعطيل شاشة البدء، أضف التفضيلات التالية إلى الملف config.xml: 

<preference name="SplashScreenDelay" value="0"/>‎

ملاحظة خاصة بويندوز: يجب عليك تعطيل شاشة البدء عند تحديث كامل المستند (document body) ديناميكيًا (مثلًا، بواسطة موجه التطبيقات أحادية الصفحة [SPA router] ) وذلك لتجنب التأثير على واجهة المستخدم وعناصر التحكم.

تذكر أنّ عليك في هذه الحالة أيضًا الإشارة إلى الملف WinJS/base.js مباشرةً في صفحة HTML، لتجنب المشاكل المتعلقة بسياق التنشيط (activation context)‏ (CB-11658).

ملاحظات خاصة بمنصة iOS: لتعطيل شاشة البدء على منصة ios، يجب عليك أيضا إضافة الوسم ‎<preference name="FadeSplashScreenDuration" value="0"/>‎ إلى الملف config.xml.

  • FadeSplashScreen: (قيمة منطقية؛ القيمة الافتراضية هي true) اضبط هذا الخيار إلى القيمة false لمنع شاشة البدء من الخفوت (fading in) أو السطوع (fading out) عند تغير حالة العرض الخاصة بها.
<preference name="FadeSplashScreen" value="false"/>‎
  • FadeSplashScreenDuration: (عدد عشري؛ القيمة الافتراضية هي 500) يحدد هذا الخيار عدد الميلي ثواني التي ستستغرقها عملية خفوت (fade effect) شاشة البدء.
<preference name="FadeSplashScreenDuration" value="750"/>‎

ملاحظة: الخاصية FadeSplashScreenDuration مُتضمّنة في SplashScreenDelay، على سبيل المثال، إن عرّفت الخيارين ‎<preference name="SplashScreenDelay" value="3000" />‎ و ‎<preference name="FadeSplashScreenDuration" value="1000"/>‎ في الملف config.xml، فسيحدث ما يلي:

  1. ‎00: 00 - تظهر شاشة البدء
  2. ‎00: 02 - يبدأ الخفوت
  3. ‎00: 03 - تختفي شاشة البدء

تعطيل الخفوت عبر ‎<preference name="FadeSplashScreen" value="false"/>‎ يعني تقنيًا أنّ مدة الخفوت ستساوي 0، بحيث يبقى التأخير الكلي في هذا المثال هو 3 ثوانٍ.

ملاحظة: ينطبق هذا فقط على بدء تشغيل التطبيق، إذ ستحتاج إلى أخذ مدة الخفوت في الاعتبار عند إظهار أو إخفاء شاشة البدء يدويًا عبر الشيفرة البرمجية: 

navigator.splashscreen.show();
window.setTimeout(function () {
    navigator.splashscreen.hide();
}, splashDuration - fadeDuration);‎
  • ShowSplashScreenSpinner: (قيمة منطقية؛ القيمة الافتراضية هي true) اضبط هذا الخيار إلى القيمة false لإخفاء دوّار (spinner) شاشة البدء.
<preference name="ShowSplashScreenSpinner" value="false"/>‎

ملاحظات خاصة بمنصة أندرويد

في الملف config.xml، يمكنك إضافة التفضيلات التالية: 

<preference name="SplashMaintainAspectRatio" value="true|false" />
<preference name="SplashShowOnlyFirstTime" value="true|false" />
<preference name="SplashScreenSpinnerColor" value="white" />‎

التفضيل "SplashMaintainAspectRatio" اختياري. إذا تم تعيينه إلى القيمة "true"، فلن يتم ضغط الحيز القابل للرسم (drawable) في شاشة البدء لكي يلائم الشاشة، ولكنه ببساطة "سيغطي" تلك الشاشة، مثل خاصية CSS‏ "background-size:cover"‏‏. هذا مفيد للغاية عندما لا يكون من الممكن تشويه صور شاشة البدء بأي شكل من الأشكال، يحدث هذا على سبيل المثال عندما تحتوي الصورة على مشهدٍ أو نص. يعمل هذا الإعداد بشكل أفضل مع الصور ذات الهوامش الكبيرة (المناطق الآمنة) التي يمكن اقتصاصها بأمان على شاشات ذات نسب أبعاد (aspect ratios‏‏) مختلفة.

تعيد الإضافة تحميل الحيز القابل للرسم لشاشة البدء (splash drawable) كلما تغير الاتجاه، بحيث يمكنك تحديد أجزاء مختلف قابلة للرسم (drawables) للاتجاهات العمودية (portrait) والأفقية (landscape).

التفضيل "SplashShowOnlyFirstTime" اختياري أيضًا، وقيمته الافتراضية هي true. فعندما يُضبط إلى القيمة true، لن تظهر شاشة البدء إلا عند إطلاق التطبيق. لكن إن كنت تخطط لاستخدام التابع navigator.app.exitApp()‎ لإغلاق التطبيق وإظهار شاشة البدء في المرة التالية، فيجب عليك تعيين هذه الخاصية إلى القيمة false (وهذا ينطبق أيضًا على إغلاق التطبيق بواسطة زر الرجوع).

الخاصية "SplashScreenSpinnerColor" اختيارية هي أيضًا، ويتم تجاهلها في حال عدم تعيينها. إن أعطيتها اسمَ لونٍ صالح، أو رمزَ لونٍ ست عشري (HEX)، فسيؤدي ذلك إلى تغيير لون الدوّار (spinner) على أجهزة أندرويد ذات الإصدار 5.0 فما فوق.

ملاحظات خاصة بالمتصفحات (Browsers)

يمكنك استخدام التفضيلات التالية في الملف config.xml: 

<platform name="browser">
    <preference name="SplashScreen" value="/images/browser/splashscreen.jpg" /> 
       <!-- "/img/logo.png" القيمة الافتراضية هي -->
    <preference name="AutoHideSplashScreen" value="true" />
       <!--  "true" القيمة الافتراضية هي -->
    <preference name="SplashScreenDelay" value="3000" />
       <!-- "3000" لقيمة الافتراضية هي -->
    <preference name="SplashScreenBackgroundColor" value="green" />
       <!-- "#464646" القيمة الافتراضية هي -->
    <preference name="ShowSplashScreen" value="false" />
       <!-- "true" القيمة الافتراضية هي -->
    <preference name="SplashScreenWidth" value="600" />
       <!--  "170" القيمة الافتراضية هي -->
    <preference name="SplashScreenHeight" value="300" />
       <!-- "200" القيمة الافتراضية هي -->
</platform>‎

ملاحظة: يجب أن تكون قيمة SplashScreen مطلقةً لكي تعمل في صفحة فرعية، إذ تُستخدَم القيمة SplashScreen للمتصفحات فقط. وسيتم تجاهل هذه القيمة في المنصات الأخرى.

ملاحظات خاصة بمنصة iOS

  • في منصة iOS، صور شاشة البدء (splashscreen images) تُسمى صور البدء (launch images). وهذه الصور إلزامية في منصة iOS.

ملاحظات خاصة بمنصة ويندوز

  • SplashScreenSpinnerColor: (سلسلة نصية؛ القيمة الافتراضية تساوي نكهة اللون النظامية [system accent color]) يمكن إعطاء هذا الخيار قيمة hash، أو صيغة لونية ثلاثية (rgb)، أو اسم لون بصيغة CSS.
<preference name="SplashScreenSpinnerColor" value="#242424"/>
<preference name="SplashScreenSpinnerColor" value="DarkRed"/>
<preference name="SplashScreenSpinnerColor" value="rgb(50,128,128)"/>‎
  • SplashScreenBackgroundColor: (سلسلة نصية؛ القيمة الافتراضية تساوي ‎#464646) يأخذ هذا الخيار قيمة لونية وفق الصيغة الست عشرية (hex notation)
<preference name="SplashScreenBackgroundColor" value="0xFFFFFFFF"/>‎

توابع

splashscreen.hide

يخفي هذا التابع شاشة البدء. 

navigator.splashscreen.hide();‎

ملاحظات خاصة بمنصة iOS

يجب أن تكون قيمة الإعداد AutoHideSplashScreen في الملف config.xml مساوية للقيمة false. ولتأخير إخفاء شاشة البدء لمدة ثانيتين، أضف مؤقتًا في معالج الحدث deviceready، كما يلي: 

setTimeout(function() {
    navigator.splashscreen.hide();
}, 2000);‎

splashscreen.show

يعرض هذا التابع شاشة البدء. 

navigator.splashscreen.show();‎

لا يمكن للتطبيق استدعاء التابع navigator.splashscreen.show()‎ حتى يبدأ التطبيق وبعد إطلاق الحدث deviceready. ولكن هذا يخالف الغرض الأساسي من شاشات البدء، لأنّه من المفترض أن تظهر شاشة البدء قبل بدء تشغيل التطبيق.

يؤدي إدراج بعض الإعدادات في الملف config.xml تلقائيًا إلى إظهار شاشة البدء بعد تشغيل التطبيق، وقبل بدء تشغيله بالكامل وتلقيه الحدث deviceready. لهذا السبب، من المستبعد أن تحتاج إلى استدعاء التابع navigator.splashscreen.show()‎ لإظهار شاشة البدء إبّان بدء تشغيل التطبيق.

 انظر أيضًا

مصادر

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