شاشات البداية

بدءًا من الإصدار Android 12، يتم تشغيل التطبيقات من خلال شاشة بداية للنظام تتضمّن مؤثرات حركية عند بدء تشغيل التطبيق، وشاشة بداية تعرض رمز التطبيق، والانتقال إلى التطبيق نفسه. شاشة البداية هي Window، وبالتالي تغطي Activity.

الشكل 1: شاشة بداية

توفّر تجربة شاشة البداية عناصر تصميم عادية لكل عملية تشغيل للتطبيق، ولكنّها قابلة للتخصيص أيضًا حتى يتمكّن تطبيقك من الحفاظ على علامته التجارية الفريدة.

لتخصيص شاشة البداية من تطبيقك، استخدِم مكتبة التوافق Jetpack SplashScreen. وتتضمّن واجهة برمجة التطبيقات SplashScreen للنظام الأساسي وتعمل مع أي ComponentActivity، بما في ذلك الأنشطة التي تضبط واجهة المستخدم الخاصة بها باستخدام Compose من خلال setContent.

طريقة عمل شاشة البداية

عندما يشغّل المستخدم تطبيقًا في حين أنّ عملية التطبيق لا تكون قيد التشغيل (تشغيل على البارد) أو لم يتم إنشاء Activity (إعادة تشغيل بطيء)، تحدث الأحداث التالية:

  1. يعرض النظام شاشة البداية باستخدام المظاهر وأي صور متحركة تحددها.

  2. عندما يصبح التطبيق جاهزًا، يتم إغلاق شاشة البداية ويظهر التطبيق.

لا تظهر شاشة البداية مطلقًا أثناء التشغيل السريع.

عناصر وآليات شاشة البداية

يتم تحديد عناصر شاشة البداية من خلال ملفات موارد XML في ملف بيان Android. يتوفّر إصداران لكل عنصر، أحدهما للمظهر الفاتح والآخر للمظهر الداكن.

تتكوّن العناصر القابلة للتخصيص في شاشة البداية من رمز التطبيق وخلفية الرمز وخلفية النافذة:

شاشة البداية مع وسائل شرح مرقّمة لعناصرها القابلة للتخصيص
الشكل 2. العناصر القابلة للتخصيص في شاشة البداية

ضع في اعتبارك العناصر التالية، الموضحة في الشكل 2:

‫1 يجب أن يكون رمز التطبيق متّجهًا قابلاً للرسم. ويمكن أن يكون ثابتًا أو متحركًا. على الرغم من أنّ الصور المتحركة يمكن أن تكون مدتها غير محدودة، ننصح بألا تتجاوز 1,000 ملي ثانية. رمز مشغّل التطبيقات هو الرمز التلقائي.

‫2 خلفية الرمز اختيارية ومفيدة إذا كنت بحاجة إلى مزيد من التباين بين الرمز وخلفية النافذة. إذا كنت تستخدم رمزًا تكيُّفيًا، فسيتم عرض خلفيته إذا كان هناك تباين كافٍ مع خلفية النافذة.

‫3 كما هو الحال مع الرموز التكيُّفية، يتم حجب ثلث المقدمة.

‫4 تتكوّن خلفية النافذة من لون واحد معتم. إذا تم ضبط خلفية النافذة وكانت بلون عادي، يتم استخدامها تلقائيًا في حال عدم ضبط السمة.

أبعاد شاشة البداية

يستخدم رمز شاشة البداية المواصفات نفسها التي تستخدمها الرموز التكيُّفية، على النحو التالي:

  • صورة تحمل علامة تجارية: يجب أن يكون حجمها 200×80 بكسل غير مرتبط بالكثافة.
  • رمز التطبيق مع خلفية الرمز: يجب أن يكون مقاسه 240×240 بكسل مستقل الكثافة وأن يتناسب مع دائرة قطرها 160 بكسل مستقل الكثافة.
  • رمز التطبيق بدون خلفية: يجب أن يكون حجمه ‎288×288 بكسل مستقل الكثافة وأن يتناسب مع دائرة قطرها 192 بكسل مستقل الكثافة.

على سبيل المثال، إذا كان الحجم الكامل للصورة هو 300×300 بكسل مستقل الكثافة، يجب أن يتناسب الرمز مع دائرة قطرها 200 بكسل مستقل الكثافة. يصبح كل شيء خارج الدائرة غير مرئي (مقنع).

أبعاد رمز شاشة البداية مع خلفيات الرموز الثابتة والشفافة
الشكل 3. أبعاد رمز شاشة البداية للخلفيات الصلبة والشفافة على التوالي.

الصور المتحركة لشاشة البداية وتسلسل التشغيل

غالبًا ما يرتبط وقت الاستجابة الإضافي بتشغيل التطبيق على البارد. تؤدي إضافة رمز متحرك إلى شاشة البداية إلى تحسين المظهر الجمالي وتوفير تجربة أكثر تميزًا. تُظهر الأبحاث في سلوكيات المستخدمين أنّ الوقت الذي يستغرقه بدء التشغيل يبدو أقل عند مشاهدة صورة متحركة.

يتم تضمين مؤثرات حركية لشاشة البداية ضمن مكوّنات تسلسل التشغيل، كما هو موضّح في الشكل 4.

تسلسل تشغيل في اثني عشر إطارًا متتاليًا، يبدأ بالنقر على رمز مشغّل التطبيقات وملء الشاشة أثناء تكبيره
الشكل 4. تسلسل الإطلاق

  1. مؤثرات الدخول الحركية: تتكوّن من طريقة عرض النظام لشاشة البداية. ويتحكّم النظام في هذا الإعداد ولا يمكن تخصيصه.

  2. شاشة البداية (تظهر أثناء جزء "الانتظار" من التسلسل): يمكن تخصيص شاشة البداية، ما يتيح لك تقديم شعارك المتحرك وعلامتك التجارية. ويجب أن يستوفي المتطلبات الموضّحة في هذه الصفحة ليعمل بشكل صحيح.

  3. نمط الحركة عند الخروج: يتكوّن من الحركة التي تخفي شاشة البداية. إذا أردت تخصيصها، استخدِم طريقة العرض SplashScreenViewProvider ورمزها. يمكنك تشغيل أي تأثيرات حركية عليها، مع إعدادات للتحويل، والشفافية، واللون. في هذه الحالة، عليك إزالة شاشة البداية يدويًا عند انتهاء الحركة.

عند تشغيل الصور المتحركة للرمز، يتيح لك تشغيل التطبيق خيار تخطّي التسلسل في الحالات التي يكون فيها التطبيق جاهزًا في وقت مبكر. يُشغّل التطبيق onResume() أو تنتهي مهلة شاشة البداية تلقائيًا، لذا تأكَّد من إمكانية تخطّي الحركة بسهولة. يجب إغلاق شاشة البداية باستخدام onResume() فقط عندما يكون التطبيق مستقرًا من الناحية المرئية، وبالتالي لا حاجة إلى استخدام مؤشرات تحميل إضافية. قد يؤدي تقديم واجهة غير مكتملة إلى إزعاج المستخدمين وقد يعطي انطباعًا بعدم القدرة على التنبؤ أو عدم الدقة.

متطلبات الصور المتحركة لشاشة البداية

يجب أن تلتزم شاشة البداية بالمواصفات التالية:

  • اضبط لون خلفية نافذة واحدة بدون شفافية. يتوفّر الوضعان "النهاري" و"الليلي" في مكتبة التوافق SplashScreen.

  • تأكَّد من أنّ الرمز المتحرّك يستوفي المواصفات التالية:

    • التنسيق: يجب أن يكون الرمز بتنسيق XML من النوع AnimatedVectorDrawable (AVD).
    • الأبعاد: يجب أن يكون حجم رمز AVD أكبر بأربع مرات من حجم الرمز التكيّفي، على النحو التالي:
      • يجب أن تكون مساحة الرمز 432 بكسل مستقل الكثافة، أي أربعة أضعاف مساحة الرمز التكيّفي غير المحجوب التي تبلغ 108 بكسل مستقل الكثافة.
      • يظهر الثلثان الداخليان من الصورة على رمز مشغّل التطبيقات، ويجب أن يكونا بدقة 288 بكسل مستقل الكثافة، أي أربعة أضعاف دقة 72 بكسل مستقل الكثافة التي تتكوّن منها المنطقة الداخلية المحجوبة من الرمز التكيّفي.
    • المدة: ننصح بألا تتجاوز المدة 1,000 ملي ثانية على الهواتف. يمكنك استخدام بدء متأخر، ولكن لا يمكن أن يكون أطول من 166 مللي ثانية. إذا كان وقت بدء تشغيل التطبيق أطول من 1000 مللي ثانية، ننصحك باستخدام صورة متحركة متكررة.

  • حدِّد وقتًا مناسبًا لإغلاق شاشة البداية، ويحدث ذلك عندما يرسم تطبيقك الإطار الأول. يمكنك تخصيص ذلك بشكل أكبر كما هو موضّح في القسم المتعلّق بإبقاء شاشة البداية على الشاشة لفترات أطول.

مراجع حول شاشة البداية

الشكل 5. مثال على متوسط مدة المشاهدة

نزِّل مثالاً على حزمة المبتدئين، الذي يوضّح كيفية إنشاء صورة متحرّكة وتنسيقها وتصديرها إلى ملف AVD. ويتضمّن ذلك ما يلي:

  • ملف مشروع Adobe After Effects للصورة المتحركة
  • ملف XML النهائي الذي تم تصديره من AVD
  • مثال على صورة GIF متحركة

يشير تنزيل هذه الملفات إلى موافقتك على بنود خدمة Google.

توضّح سياسة خصوصية Google كيفية معالجة البيانات في هذه الخدمة.

تخصيص شاشة البداية في تطبيقك

يستخدم SplashScreen تلقائيًا windowBackground المظهر إذا كان windowBackground لونًا واحدًا. لتخصيص شاشة البداية، أضِف سمات إلى مظهر التطبيق.

يمكنك تخصيص شاشة البداية في تطبيقك من خلال تنفيذ أيّ مما يلي:

  • اضبط سمات المظهر لتغيير شكله.

  • أبقِها على الشاشة لفترة أطول.

  • تخصيص الحركة لإغلاق شاشة البداية

البدء

توفّر مكتبة SplashScreen الأساسية شاشة البداية في Android 12 لجميع الأجهزة التي تعمل بالمستوى 23 من واجهة برمجة التطبيقات. لإضافتها إلى مشروعك، أضِف المقتطف التالي إلى ملف build.gradle:

أنيق

dependencies {
    implementation "androidx.core:core-splashscreen:1.2.0"
}

Kotlin

dependencies {
    implementation("androidx.core:core-splashscreen:1.2.0")
}

بعد ذلك، أنشئ مظهرًا لشاشة البداية موروثًا من Theme.SplashScreen، واضبط postSplashScreenTheme على المظهر الذي يستخدمه النشاط بعد ذلك، وطبِّق مظهر شاشة البداية في ملف البيان (راجِع نقل عملية تنفيذ شاشة البداية الحالية إلى Android 12)، واستدعِ installSplashScreen() في نشاط البدء قبل استدعاء super.onCreate()، كما هو موضّح في الأمثلة في الأقسام التالية.

ضبط مظهر شاشة البداية لتغيير شكلها

يمكنك تحديد السمات التالية في مظهر Activity لتخصيص شاشة البداية لتطبيقك. إذا كان لديك بالفعل تنفيذ قديم لشاشة البداية يستخدم سمات مثل android:windowBackground، ننصحك بتقديم ملف موارد بديل لنظام التشغيل Android 12 والإصدارات الأحدث.

  1. استخدِم windowSplashScreenBackground لملء الخلفية بلون واحد محدّد:

    <item name="android:windowSplashScreenBackground">@color/...</item>

  2. استخدِم windowSplashScreenAnimatedIcon لاستبدال الرمز في وسط نافذة البدء.

    بالنسبة إلى التطبيقات التي تستهدف الإصدار 12 من Android (المستوى 32 لواجهة برمجة التطبيقات) فقط، اتّبِع الخطوات التالية:

    إذا كان العنصر قابلاً للتحريك والرسم من خلال AnimationDrawable وAnimatedVectorDrawable، اضبط windowSplashScreenAnimationDuration على تشغيل الحركة أثناء عرض نافذة البدء. هذا ليس مطلوبًا في Android 13، لأنّ المدة يتم استنتاجها مباشرةً من AnimatedVectorDrawable.

    <item name="android:windowSplashScreenAnimatedIcon">@drawable/...</item>

  3. استخدِم windowSplashScreenAnimationDuration للإشارة إلى مدة حركة رمز شاشة البداية. لا يؤثر ضبط هذه السمة في الوقت الفعلي الذي تظهر فيه شاشة البداية، ولكن يمكنك استردادها عند تخصيص تأثيرات الخروج المتحركة لشاشة البداية باستخدام SplashScreenViewProvider.iconAnimationDurationMillis. لمزيد من التفاصيل، يُرجى الاطّلاع على القسم التالي حول إبقاء شاشة البداية على الشاشة لفترات أطول.

    <item name="android:windowSplashScreenAnimationDuration">1000</item>

  4. استخدِم windowSplashScreenIconBackgroundColor لضبط خلفية وراء رمز شاشة البداية. ويكون ذلك مفيدًا إذا لم يكن هناك تباين كافٍ بين خلفية النافذة والرمز.

    <item name="android:windowSplashScreenIconBackgroundColor">@color/...</item>

  5. يمكنك استخدام windowSplashScreenBrandingImage لضبط صورة يتم عرضها في أسفل شاشة البداية. ومع ذلك، توصي إرشادات التصميم بعدم استخدام صورة العلامة التجارية.

    <item name="android:windowSplashScreenBrandingImage">@drawable/...</item>

  6. يمكنك استخدام windowSplashScreenBehavior لتحديد ما إذا كان تطبيقك يعرض دائمًا الرمز على شاشة البداية في الإصدار 13 من Android والإصدارات الأحدث. القيمة التلقائية هي 0، ما يؤدي إلى عرض الرمز على شاشة البداية إذا ضبط نشاط التشغيل splashScreenStyle على SPLASH_SCREEN_STYLE_ICON، أو يتّبع سلوك النظام إذا لم يحدّد نشاط التشغيل نمطًا. إذا كنت تفضّل عدم عرض شاشة بداية فارغة مطلقًا وتريد دائمًا عرض الرمز المتحرّك، اضبط هذه القيمة على icon_preferred.

    <item name="android:windowSplashScreenBehavior">icon_preferred</item>

إبقاء شاشة البداية على الشاشة لفترات أطول

يتم إغلاق شاشة البداية فور ظهور الإطار الأول من تطبيقك. إذا كنت بحاجة إلى تحميل كمية صغيرة من البيانات، مثل تحميل الإعدادات داخل التطبيق من قرص محلي بشكل غير متزامن، استخدِم setKeepOnScreenCondition لإبقاء شاشة البداية على الشاشة حتى تصبح البيانات جاهزة. يتم تقييم الشرط قبل رسم كل إطار، لذا يجب أن يكون سريعًا لتجنُّب حظر واجهة المستخدم.

إذا انتهى نشاط البدء قبل الرسم، على سبيل المثال، من خلال عدم ضبط عرض المحتوى والانتهاء قبل onResume، لن تحتاج إلى ضبط شرط.

override fun onCreate(savedInstanceState: Bundle?) {
    // Install the splash screen before calling super.onCreate().
    val splashScreen = installSplashScreen()
    super.onCreate(savedInstanceState)

    // Keep the splash screen on-screen until the initial data is ready.
    // The condition is checked each time the app is about to draw a frame.
    splashScreen.setKeepOnScreenCondition { !viewModel.isReady.value }

    setContent {
        MyApp()
    }
}

تخصيص الرسوم المتحركة لإغلاق شاشة البداية

يمكنك تخصيص حركة شاشة البداية بشكل أكبر باستخدام setOnExitAnimationListener. يتلقّى المستمع SplashScreenViewProvider الذي يمنحك عرض شاشة البداية لتحريكه. استخدِم remove() عند انتهاء الحركة.

override fun onCreate(savedInstanceState: Bundle?) {
    val splashScreen = installSplashScreen()
    super.onCreate(savedInstanceState)

    // Add a callback that's called when the splash screen is animating to the
    // app content.
    splashScreen.setOnExitAnimationListener { splashScreenViewProvider ->
        val splashScreenView = splashScreenViewProvider.view
        // Create your custom animation.
        val slideUp = ObjectAnimator.ofFloat(
            splashScreenView,
            View.TRANSLATION_Y,
            0f,
            -splashScreenView.height.toFloat()
        )
        slideUp.interpolator = AnticipateInterpolator()
        slideUp.duration = 200L

        // Call SplashScreenViewProvider.remove at the end of your custom
        // animation.
        slideUp.doOnEnd { splashScreenViewProvider.remove() }

        // Run your animation.
        slideUp.start()
    }

    setContent {
        MyApp()
    }
}

عند بدء عملية الاستدعاء هذه، يبدأ تشغيل المتّجه المتحرّك القابل للرسم على شاشة البداية. استنادًا إلى مدة تشغيل التطبيق، قد يكون العنصر القابل للرسم في منتصف حركته. استخدِم SplashScreenViewProvider.iconAnimationStartMillis لمعرفة وقت بدء الصورة المتحركة. يمكنك حساب المدة المتبقية من الرسوم المتحركة للأيقونة على النحو التالي:

// Get the duration of the animated vector drawable.
val animationDuration = splashScreenViewProvider.iconAnimationDurationMillis
// Get the start time of the animation, in milliseconds since the epoch.
val animationStart = splashScreenViewProvider.iconAnimationStartMillis
// Calculate the remaining duration of the animation.
val remainingDuration =
    (animationDuration - (System.currentTimeMillis() - animationStart))
        .coerceAtLeast(0L)

مراجع إضافية