إضافة شاشة البدء في كوردوفا
هذه الإضافة مطلوبة للعمل على شاشات البداية (splash screens). تعرض هذه الإضافة أو تخفي شاشة البدء أثناء إطلاق التطبيق.
الإبلاغ عن مشكلات في هذه الإضافة على Apache Cordova issue tracker
التثبيت
// npm hosted (new) id
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
المنصات المدعومة
- أندرويد
- iOS
- ويندوز (الإصدار
cordova-windows
> = 4.4.0 مطلوب) - Browser
Note
: لا تتطلب ميزة شاشة البدء الموسعة (Extended splashscreen) تثبيت هذه الإضافة على منصة ويندوز (على عكس منصتي أندرويد و iOS) إن لم تكن بحاجة لاستخدام الواجهة البرمجية للإضافة، أي الإخفاء والعرض برمجيًا.
معلومات خاصة بمنصة iOS
هناك آليتان لعرض شاشة البدء على منصة iOS:
- صورة البدء القديمة (Legacy launch images): يُحدّد حجم الصور ليتلاءم تمامًا مع حجم شاشة الجهاز. لا يدعم الدقة الأصلية لجهاز iPad Pro 12.9 أو الشاشات المتعددة أو التمريرية (slide-over) متعددة المهام.
- صُور البدء اللوحية (Launch storyboard images): يُحدد حجم الصور استنادًا إلى المقياس والعبارات (idiom) وأصناف الحجم. تدعم هذه الآلية جميع الأجهزة، ويمكن استخدامه مع تعدد المهام متعدد الشاشات (split-screen) أو التمريري (slide-over).
بدأت Apple تبتعد عن آلية آلية صور البدء القديمة. لا يوجد دعم رسمي لتقديم صورة بدء ذات دقة أصلية لجهاز iPad Pro 12.9، أو لتوفير صور بدءٍ تعمل مع تعدد المهام متعدد الشاشات (split-screen) أو التمريري (slide-over). إذا لم يكن تطبيقك بحاجة إلى دعم هذه السياقات، فيمكنك الاستمرار في استخدام آلية صور البدء القديمة.
الطريقة المفضلة لتوفير صور البدء هي استخدام صور لوحية للبدء. بالنسبة إلى مطوّري التطبيقات الأصلية، صورة البدء اللوحية المثالية هي مساحة مُتاحة في واجهة المستخدم الخاصة بالتطبيق عند الإطلاق. بالنسبة إلى مطوّري التطبيقات غير الأصلية، والذين لا يرغبون في تعلم 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
؛ يتم استخدام أسماء الملفات لأنها تطابق ما سيتم استخدامه عند تجميع المشروع. تحدد سِمتا العرض والارتفاع صُور البدء التي سيتم عرضها على الأجهزة على النحو التالي:
العرض
الارتفاع
الجهاز (الاتجاه)
320
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 الشبكية (وضع أفقي)
ملاحظة: من المهم للغاية أن تطابق الصورة المصدر الحجم المحدد في السمتين width
و height
. وإلا فقد يفشل الجهاز في عرضها بالشكل الصحيح، أو قد لا يعرضها بالبتة.
صور البدء اللوحية (Launch storyboard images)
من أجل دعم المعايير الحديثة وتعدد المهام التمريري (slide-over) أو متعدد الشاشات، عليك استخدام صور البدء اللوحية. تتشابه هذه الصور مع صور البدء القديمة، ولكن هناك اختلافات جوهرية:
- الصور ليست مخصوصة بجهاز معين.
- يُغيّر حجم الصور لملء إطار العرض المتاح (مع الحفاظ على نسبة الأبعاد [aspect ratio]).
- سيتم اقتصاص الحواف الخارجية للصور، وسيختلف قدر الاقتصاص بناءً على نوع الجهاز وإطار العرض.
- ليست هناك حاجة لتوفير صورة لكل جهاز، وإطار عرضٍ، واتجاه (orientation)؛ سنختار منصة iOS أنسب صورة تلقائيًا.
تصميم صور البدء اللوحية
أول شيء ينبغي أن تنتبه له عند تصميم صورة بدء لوحية هو إدراك أنّ حواف الصورة ستُقتصّ بشكل شبه مؤكد. لذلك، يجب ألا تضع أيّ معلومات مهمة بالقرب من حواف الصور المتاحة كصور بدء لوحية. المركز فقط هو المنطقة الآمنة، وهذا كله يضمن تقريبًا أنّ اتباع نصيحة Apple بتقديم واجهة مستخدم فاغرةٍ (unpopulated) لن يعمل بشكل جيد.
بدلاً من ذلك، النصائح التالية ستساعدك على إنشاء صورة بدء تعمل على عدد كبير من العوامل الشكلية (form factors)، وإطارات العرض، والاتجاهات:
- يجب أن تُوضع الرسومات المهمة (الشعارات، الرموز، العناوين) في المركز. المنطقة الآمنة المحيطة ستختلف، لذا عليك التحقق من أنّ الرسومات المهمة لن تُقتص . أو بالأحرى، لا تعتمد على الرسومات المهمة كصور بدء.
- يمكنك ضبط موضع هذه الرسومات وحجمها بدقة، ولكن ليس بنفس الدقة التي لديك في صور البدء القديمة.
- استخدم لونًا تحتيًا (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. العبارات (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 any com any portrait any com landscape (wide) com com landscape (narrow)
للاطلاع على القائمة الكاملة لأصناف الحجم المرتبطة بمختلف الأجهزة وإطارات العرض، راجع هذه الصفحة http://www.sizeclasses.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) معين، فيجب عليك إنشاء ست صور، على النحو التالي:
التكبير
المقاس
العرض
الارتفاع
الحجم
اسم الملف
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 للصور الأخرى المكافئة لهذا الحجم والمقاس.
ملاحظة: إن كانت التكبير بثلاثة أضعاف (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" />
يمكننل أن نقوم بمزيد من التخصيص استنادًا إلى مقاس الجهاز، كما يبين الجدول أدناه. :
التكبير
المقاس
العرض
الارتفاع
الحجم
اسم الملف
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" />
ملاحظات خاصة ومشاكل شائعة
App on target may not reflect changes to images
بمجرد تشغيل التطبيق وفق الإعدادات المستهدفة، ستخزن منصة iOS صورة البدء مؤقتًا. لسوء الحظ، عندما تغير الصور، فلن تقوم منصة iOS بتحديث ذاكرة التخزين المؤقت، مما يعني أنك ستظل تشاهد صورة البدء القديمة. يجب عليك إما: حذف التطبيق، أو إعادة ضبط المحتوى والإعدادات (جهاز محاكاة).Simulator may not show expected images when launched from CLI
عندما تنشر بيئةُ العمل Xcode تطبيقا إلى محاكي معين، فلن ينسخ إلا الأصول (assets) التي تتطابق مع خصائص المحاكي. على سبيل المثال، إذا حاولت تشغيل التطبيق على جهاز محاكاة iPhone 6s Plus، فلن تُنسخ إلا صور البدء @3x. عند القيام بالتصريف (compiling) من واجهة سطر الأوامر، فبحسب الإعدادات الافتراضية، سيتم افتراض أنّ الجهاز المستخدم هو iPhone 5s، مما يعني أنه لن تُنسخ إلا صور البدء من النوع @2x. ما لم تكن صور البدء مختلفة بشكل ملحوظ، فمن المحتمل ألا يكون الفرق مُلاحظًا، ولكنّ هذا يعني أنّ الطريقة الوحيدة للتحقق من هذا هو الاختبار على جهاز فعلي.anyany must be provided for other variations to be used
إذا لم توفر نسخةanyany
من صورة البدء لمقياسٍ محدد (scale) ومقاسٍ معين (idiom)، فسيتم تجاهل الأشكال الأخرى (مثلanycom
وcomany
وcomcom
).
معلومات خاصة بـمنصة ويندوز
يمكن تعريف صور شاشة البدء باستخدام مفهوم MRT.
إذا قمت بتحديد الخاصية src = "res / windows / splashscreen.png"، فسيتم نسخ الملفات التالية إلى مجلد الصور الخاص بالتطبيق:
res/windows/splashscreen.png
| res/windows/splashscreen.scale-100.png
، res/windows/splashscreen.scale-125.png
، وما إلى ذلك
الصيغ التالية مدعومة:
المقياس، ٪
المشروع
العرض
الطول
اسم الملف
100
- ويندوز
620 300
splashscreen.png
= 4
125
- ويندوز
775
375
splashscreen.scale-125.png
150
- ويندوز
930
450
splashscreen.scale-150.png
200
- ويندوز
1240
600
splashscreen.scale-200.png
400
- ويندوز
2480
1200
splashscreen.scale-400.png
140
- ويندوز
868
420
splashscreen.scale-140.png
180
- ويندوز
1116
540
splashscreen.scale-180.png
100
ويندوز فون 8.1
480
800
splashscreenphone.png
= 4
140
ويندوز فون 8.1
672
1120
splashscreenphone.scale-140.png
240
ويندوز فون 8.1
1152
1920
splashscreenphone.scale-240.png
Note
: ينبغي ألا يتجاوز حجم شاشات البدء للمشاريع في منصة Windows 10 200 كيلو بايت.
Note
: التنسيقات المدعومة هي .png
و .jpg
و .jpeg
. خلط الامتدادات في الهدف غير مدعوم. أي يمكنك الحصول على splashscreen.jpg
و splashscreenphone.png
ولكن ليس splashscreen.scale-100.png
، splashscreen.scale-400.jpg
.
Note
: قد تحتاج إلى إعادة فتح Visual Studio solution بعد تغيير الصور، وتنفيذ الأمر cordova prepare
لتصبح التغييرات نافذة المفعول.
مثال خاص بالإعدادات
في الملف الجذري config.xml
(وليس الملف الموجود في platforms
)، أضف عناصر الإعدادات المُوضحة أدناه.
يرجى ملاحظة أن قيمة السمة "src" تُحسب نسبةً إلى المجلد الجذري (root directory) للمشروع، وليس إلى المجلد www (انظر Directory structure
أدناه). يمكنك تسمية الصورة المصدرية بما تريد. يتم تحديد الاسم الداخلي في التطبيق من قبل كوردوفا.
بنية المجلد
projectRoot
hooks
platforms
plugins
www
css
img
js
res
screen
android
ios
windows
<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" />
تفضيلات
الملف 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"/>
Windows Quirk
: يجب عليك تعطيل شاشة البدء عند تحديث كامل المستند ديناميكيًا (مع موجه التطبيقات أحادية الصفحة [SPA router] ) لتجنب التأثير على واجهة المستخدم، وعناصر التحكم.
تذكر أنّ عليك أيضًا الإشارة إلى WinJS/base.js
مباشرةً في صفحة HTML،في هذه الحالة لتجنب المشاكل المتعلقة بسياق التنشيط (CB-11658).
iOS Quirk
: لتعطيل شاشة البدء على منصة 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
:
- 00: 00 - تظهر شاشة البدء
- 00: 02 - يبدأ الخفوت
- 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"، فلن يتم ضغط حيز شاشة البدء ليلائم الشاشة، ولكنها ببساطة "ستغطي" الشاشة، مثل خاصية 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" /> <!-- defaults to "/img/logo.png" -->
<preference name="AutoHideSplashScreen" value="true" /> <!-- defaults to "true" -->
<preference name="SplashScreenDelay" value="3000" /> <!-- defaults to "3000" -->
<preference name="SplashScreenBackgroundColor" value="green" /> <!-- defaults to "#464646" -->
<preference name="ShowSplashScreen" value="false" /> <!-- defaults to "true" -->
<preference name="SplashScreenWidth" value="600" /> <!-- defaults to "170" -->
<preference name="SplashScreenHeight" value="300" /> <!-- defaults to "200" -->
</platform>
Note
: يجب أن تكون قيمة 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.show
- splashscreen.hide
splashscreen.hide
إخفاء شاشة البدء.
navigator.splashscreen.hide();
ملاحظات خاصة بمنصة iOS
يجب أن تكون قيمة الإعداد config.xml
في الملف AutoHideSplashScreen
مساوية للقيمة false
. لتأخير إخفاء شاشة البدء لمدة ثانيتين، أضف مؤقتًا مثل ما يلي في معالج الحدث deviceready
:
setTimeout(function() {
navigator.splashscreen.hide();
}, 2000);
splashscreen.show
عرض شاشة البدء.
navigator.splashscreen.show();
لا يمكن للتطبيق استدعاء التابع navigator.splashscreen.show()
حتى يبدأ التطبيق، وبعد إطلاق الحدث deviceready
. ولكن نظرًا لأنه من المفترض أن تظهر شاشة البدء قبل بدء تشغيل التطبيق، فإن ذلك يخالف الغرض الأساسي من شاشات البدء. سيؤدي إدراج بعض الإعدادات في الملف config.xml
تلقائيًا إلى إظهار (show
) شاشة البدء بعد إطلاق التطبيق، وقبل بدء تشغيله بالكامل وتلقيه الحدث deviceready
. لهذا السبب، من المستبعد أن تحتاج إلى استدعاء التابع navigator.splashscreen.show()
لإظهار شاشة البدء عند إطلاق التطبيق.