الفرق بين المراجعتين لصفحة: «Cordova/cordova plugin splashscreen»
لا ملخص تعديل |
لا ملخص تعديل |
||
سطر 523: | سطر 523: | ||
التفضيل "<code>SplashMaintainAspectRatio</code>" اختياري. إذا تم تعيينه إلى القيمة "<code>true</code>"، فلن يتم ضغط الحيز القابل للرسم (drawable) لشاشة البدء لكي يلائم الشاشة، ولكنه ببساطة "سيغطي" الشاشة، مثل خاصية CSS "<code>background-size:cover</code>". هذا مفيد للغاية عندما لا يكون من الممكن تشويه صور شاشة البدء بأي شكل من الأشكال، يحدث هذا على سبيل المثال عندما تحتوي الصورة على مشهد أو نص. يعمل هذا الإعداد بشكل أفضل مع الصور ذات الهوامش الكبيرة (المناطق الآمنة) التي يمكن اقتصاصها بأمان على شاشات ذات نسب أبعاد (aspect ratios) مختلفة. | التفضيل "<code>SplashMaintainAspectRatio</code>" اختياري. إذا تم تعيينه إلى القيمة "<code>true</code>"، فلن يتم ضغط الحيز القابل للرسم (drawable) لشاشة البدء لكي يلائم الشاشة، ولكنه ببساطة "سيغطي" الشاشة، مثل خاصية CSS "<code>background-size:cover</code>". هذا مفيد للغاية عندما لا يكون من الممكن تشويه صور شاشة البدء بأي شكل من الأشكال، يحدث هذا على سبيل المثال عندما تحتوي الصورة على مشهد أو نص. يعمل هذا الإعداد بشكل أفضل مع الصور ذات الهوامش الكبيرة (المناطق الآمنة) التي يمكن اقتصاصها بأمان على شاشات ذات نسب أبعاد (aspect ratios) مختلفة. | ||
تعيد الإضافة تحميل | تعيد الإضافة تحميل الحيز القابل للرسم لشاشة البدء (splash drawable) كلما تغير الاتجاه، بحيث يمكنك تحديد أحياز (drawables) مختلفة للاتجاهات العمودية (<code>portrait</code>) والأفقي (<code>landscape</code>). | ||
التفضيل "SplashShowOnlyFirstTime" اختياري أيضًا، وقيمته الافتراضية هي <code>true</code>. | التفضيل "<code>SplashShowOnlyFirstTime</code>" اختياري أيضًا، وقيمته الافتراضية هي <code>true</code>. فعندما يُضبط عند القيمة <code>true</code>، لن تظهر شاشة البدء إلا عند إطلاق التطبيق. لكن إن كنت تخطط لاستخدام التابع <code>navigator.app.exitApp()</code> لإغلاق التطبيق وإظهار شاشة البدء في المرة الموالية، فيجب عليك تعيين هذه الخاصية إلى القيمة <code>false</code> (وهذا ينطبق أيضًا على إغلاق التطبيق بواسطة زر الرجوع). | ||
الخاصية "SplashScreenSpinnerColor" | الخاصية "<code>SplashScreenSpinnerColor</code>" اختيارية هي أيضًا، ويتم تجاهلها في حال عدم تعيينها. سيؤدي تعيينها إلى اسم لونٍ صالح، أو رمز لونٍ سداسعشري (HEX) إلى تغيير لون الدوّار (spinner) على أجهزة أندرويد ذات الإصدار 5.0 فما فوق. | ||
=== ملاحظات خاصة بالمتصفحات (Browsers) === | === ملاحظات خاصة بالمتصفحات (Browsers) === | ||
يمكنك استخدام التفضيلات التالية في الملف <code>config.xml</code> | يمكنك استخدام التفضيلات التالية في الملف <code>[[Cordova/config ref|config.xml]]</code>: | ||
<syntaxhighlight lang="xml"><platform name="browser"> | <syntaxhighlight lang="xml"><platform name="browser"> | ||
<preference name="SplashScreen" value="/images/browser/splashscreen.jpg" /> <!-- | <preference name="SplashScreen" value="/images/browser/splashscreen.jpg" /> | ||
<preference name="AutoHideSplashScreen" value="true" /> <!-- | <!-- "/img/logo.png" القيمة الافتراضية هي --> | ||
<preference name="AutoHideSplashScreen" value="true" /> | |||
<!-- "true" القيمة الافتراضية هي --> | |||
<preference name="SplashScreenDelay" value="3000" /> <!-- defaults to "3000" --> | <preference name="SplashScreenDelay" value="3000" /> <!-- defaults to "3000" --> | ||
<preference name="SplashScreenBackgroundColor" value="green" /> <!-- | <preference name="SplashScreenBackgroundColor" value="green" /> | ||
<preference name="ShowSplashScreen" value="false" /> <!-- | <!-- "#464646" القيمة الافتراضية هي --> | ||
<preference name="SplashScreenWidth" value="600" /> <!-- | <preference name="ShowSplashScreen" value="false" /> | ||
<preference name="SplashScreenHeight" value="300" /> <!-- | <!-- "true" القيمة الافتراضية هي --> | ||
<preference name="SplashScreenWidth" value="600" /> | |||
<!-- "170" القيمة الافتراضية هي --> | |||
<preference name="SplashScreenHeight" value="300" /> | |||
<!-- "200" القيمة الافتراضية هي --> | |||
</platform></syntaxhighlight> | </platform></syntaxhighlight> | ||
'''ملاحظة''': يجب أن تكون قيمة <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) | * <code>SplashScreenSpinnerColor</code>: (سلسلة نصية، القيمة الافتراضية تساوي نكهة اللون النظامية [system accent color]) يمكن إعطاء هذا الخيار تجزئةً (hash)، أو صيغة لونية ثلاثية (rgb)، أو اسم لون بصيغة CSS. | ||
<syntaxhighlight lang="xml"><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) | *<code>SplashScreenBackgroundColor</code>: (سلسلة نصية، القيمة الافتراضية تساوي <code>#464646</code>) يأخذ هذا الخيار قيمة لونية وفق الصيغة السداسعشرية (hex notation) | ||
<syntaxhighlight lang="xml"><preference name="SplashScreenBackgroundColor" value="0xFFFFFFFF"/></syntaxhighlight> | <syntaxhighlight lang="xml"><preference name="SplashScreenBackgroundColor" value="0xFFFFFFFF"/></syntaxhighlight> | ||
== التوابع == | == التوابع == | ||
*splashscreen.show | *<code>splashscreen.show</code> | ||
*splashscreen.hide | *<code>splashscreen.hide</code> | ||
==splashscreen.hide== | ==<code>splashscreen.hide</code>== | ||
يخفي هذا التابع شاشة البدء. | |||
<syntaxhighlight lang=" | <syntaxhighlight lang="javascript">navigator.splashscreen.hide();</syntaxhighlight> | ||
=== ملاحظات خاصة بمنصة iOS === | === ملاحظات خاصة بمنصة iOS === | ||
يجب أن تكون قيمة الإعداد <code> | يجب أن تكون قيمة الإعداد <code>AutoHideSplashScreen</code> في الملف <code>config.xml</code> مساوية للقيمة <code>false</code>. لتأخير إخفاء شاشة البدء لمدة ثانيتين، أضف مؤقتًا في معالج الحدث <code>[[Cordova/events#deviceready|deviceready]]</code>، كما ما يلي: | ||
<syntaxhighlight lang=" | <syntaxhighlight lang="javascript">setTimeout(function() { | ||
navigator.splashscreen.hide(); | navigator.splashscreen.hide(); | ||
}, 2000);</syntaxhighlight> | }, 2000);</syntaxhighlight> | ||
==splashscreen.show== | ==<code>splashscreen.show</code>== | ||
يعرض هذا التابع شاشة البدء. | |||
<syntaxhighlight lang=" | <syntaxhighlight lang="javascript">navigator.splashscreen.show();</syntaxhighlight> | ||
لا يمكن للتطبيق استدعاء التابع <code>navigator.splashscreen.show()</code> حتى يبدأ التطبيق، وبعد إطلاق الحدث <code>deviceready</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> لإظهار شاشة البدء عند إطلاق التطبيق. | |||
== انظر أيضا== | |||
*إضافة <nowiki/>[[Cordova/cordova plugin device|حالة الجهاز]] | |||
*إضافة [[Cordova/cordova plugin screen orientation|اتجاه الشاشة]] | |||
*[[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 في توثيق كوردوفا الرسمي.] |
مراجعة 11:43، 23 ديسمبر 2018
هذه الإضافة ضرورية للعمل على شاشات البدء (splash screens). إذ تعرض هذه الإضافة أو تخفي شاشة البدء أثناء إطلاق التطبيق.
التثبيت
يمكن تثبيت هذه الإضافة عبر الأمر التالي:
// npm hosted (new) id
cordova plugin add cordova-plugin-splashscreen
// يمكنك أيضا تثبيتها من هذا المستودع
cordova plugin add https://github.com/apache/cordova-plugin-splashscreen.git
المنصات المدعومة
- أندرويد
- iOS
- ويندوز (الإصدار 4.4.0 من
cordova-windows
أو مابعده) - Browser
ملاحظة: لا تتطلب شاشة البدء الموسعة (Extended splashscreen) تثبيت هذه الإضافة على منصة ويندوز (على عكس منصتي أندرويد و iOS) إن لم تكن بحاجة لاستخدام الواجهة البرمجية للإضافة، أي إخفاء وعرض شاشة البدء برمجيًا.
معلومات خاصة بمنصة iOS
هناك آليتان لعرض شاشة البدء على منصة iOS:
- آلية صور البدء القديمة (Legacy launch images): في هذه الآلية يُحدّد حجم الصور ليتلاءم بشكل تام مع حجم شاشة الجهاز. لا تدعم هذه الآلية الدقة الأصلية لجهاز iPad Pro 12.9، أو تعدد المهام (multitasking) للشاشات المتعددة (split-screen) أو التمريرية (slide-over).
- آلية صُور البدء اللوحية (Launch storyboard images): في هذه الآلية يُحدد حجم الصور استنادًا إلى المقياس (scale) والمقاس (idiom) وأصناف الحجم. تدعم هذه الآلية جميع الأجهزة، ويمكن استخدامها مع تعدد المهام متعدد الشاشات أو التمريري.
بدأت Apple تبتعد عن استخدام آلية صور البدء القديمة. إذ لا يوجد دعم رسمي لصور البدء ذات دقة أصلية (native-resolution) لجهاز iPad Pro 12.9، أو صور بدءٍ تعمل مع تعدد المهام متعدد الشاشات (split-screen) أو التمريري (slide-over). إذا لم يكن تطبيقك بحاجة إلى دعم هذه السياقات، فيمكنك الاستمرار في استخدام آلية صور البدء القديمة.
الطريقة المفضلة لتوفير صور البدء هي استخدام آلية صور البدء اللوحية. فبالنسبة لمطوّري التطبيقات الأصلية، صورة البدء اللوحية المثالية هي نسخة فاغرة (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) المشروع. تحدد سِمتا العرض والارتفاع صُور البدء التي ستُعرض على الأجهزة على النحو التالي:
العرض | الارتفاع | الجهاز (الاتجاه) |
---|---|---|
320 | 480 | جميع أجهزة iPhone و iPod غير الشبكية (non-retina) |
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 غير الشبكية (non-retina) (الوضع العمودي) |
1024 | 768 | جميع أجهزة iPad غير الشبكية (الوضع الأفقي) |
1536 | 2048 | جميع أجهزة iPad الشبكية (الوضع العمودي) |
2048 | 1536 | جميع أجهزة iPad الشبكية (الوضع الأفقي) |
ملاحظة: من المهم للغاية أن تُطابق الصورةُ المصدرية الحجم المحدد في السمتين width
و height
. وإلا فقد يفشل الجهاز في عرضها بالشكل الصحيح، أو قد لا يعرضها بالبتة.
صور البدء اللوحية (Launch storyboard images)
من أجل دعم معاملات الشكل (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)، والمقاسات (idioms)، وخصائص صنف الحجم (size class)، من أجل استخدام صور البدء اللوحية على نحو فعال. من بين الصور التي تم توفيرها لاستخدامها كصورة بدء لوحية، ستختار منصة iOS الصورة الأكثر ملاءمةً للجهاز ولإطار العرض، ثم ستعرض تلك الصورة. من الممكن استخدام صورة بدء واحدةٍ فقط، ولكن من الممكن أيضًا تحديد صورة البدء التي ستُعرض استنادًا إلى عدة معايير. عند محاولة التحديد الدقيق لصورة البدء، يمكن تجاهل السمات غير المُستهدفة، أو التي لا يدعمها التطبيق.
ملاحظة: إن كنت تستخدم صور اللبدء اللوحية، فلا داعي لتضمين صور البدء القديمة. وإن فعلت ذلك، فستُنسخ الصور القديمة، ولكن لن يتم استخدامها.
المقياس (scale) | الأجهزة |
---|---|
1x
|
جميع الأجهزة غير الشبكية (non-retina devices) |
2x
|
معظم الأجهزة الشبكية (retina devices) |
3x
|
iPhone 6+/6s+,7s+ |
بشكل عام، من المهم أن توفّر الصور المكبرة مرتين (2x)، وثلاث مرات (3x). في الوقت الحالي، لا تدعم كوردوفا إلا الأجهزة الشبكية (retina devices)، لذلك لا حاجة لتوفير الصور العادية 1x.
المقاسات (Idioms)
المقاس (idiom) | الأجهزة |
---|---|
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
|
الوضع الأفقي landscape (واسع) |
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
(وليس الملف الموجود في 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-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">
<!-- هناك آليتان لعرض صور البدء
-- 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" />
تفضيلات
الملف 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
، فسيحدث ما يلي:
- 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
"، فلن يتم ضغط الحيز القابل للرسم (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" /> <!-- defaults to "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.show
splashscreen.hide
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()
لإظهار شاشة البدء عند إطلاق التطبيق.
انظر أيضا
- إضافة حالة الجهاز
- إضافة اتجاه الشاشة
- دليل تطوير الإضافات في كوردوفا