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

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

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

بالإضافة إلى استخدام واجهة برمجة تطبيقات نظام التشغيل SplashScreen، يمكنك أيضًا استخدام مكتبة SplashScreen compat التي تُغلِّف واجهة برمجة تطبيقات SplashScreen.

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

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

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

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

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

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

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

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

راجِع العناصر التالية الموضّحة في الشكل 2:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

موارد شاشة البداية

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

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

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

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

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

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

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

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

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

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

البدء

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

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

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

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

يمكنك تحديد السمات التالية في مظهر 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 للإشارة إلى مدة تأثير رمز شاشة البداية. لا يؤثر ضبط هذه الإعدادات في الوقت الفعلي الذي تظهر فيه شاشة البداية، ولكن يمكنك استردادها عند تخصيص الرسوم المتحركة للخروج من شاشة البداية باستخدام SplashScreenView.getIconAnimationDuration. اطّلِع على القسم التالي حول إبقاء شاشة البداية معروضة على الشاشة لفترات أطول لمزيد من التفاصيل.

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

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

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

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

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

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

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

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

يتم إغلاق شاشة البداية فور سحب تطبيقك لإطاره الأول. إذا كنت بحاجة إلى تحميل مقدار صغير من البيانات، مثل تحميل الإعدادات داخل التطبيق من قرص محلي بشكل غير متزامن، يمكنك استخدام ViewTreeObserver.OnPreDrawListener لتعليق التطبيق لرسم إطاره الأول.

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

// Create a new event for the activity.
override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    // Set the layout for the content view.
    setContentView(R.layout.main_activity)

    // Set up an OnPreDrawListener to the root view.
    val content: View = findViewById(android.R.id.content)
    content.viewTreeObserver.addOnPreDrawListener(
        object : ViewTreeObserver.OnPreDrawListener {
            override fun onPreDraw(): Boolean {
                // Check whether the initial data is ready.
                return if (viewModel.isReady) {
                    // The content is ready. Start drawing.
                    content.viewTreeObserver.removeOnPreDrawListener(this)
                    true
                } else {
                    // The content isn't ready. Suspend.
                    false
                }
            }
        }
    )
}

// Create a new event for the activity.
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    // Set the layout for the content view.
    setContentView(R.layout.main_activity);

    // Set up an OnPreDrawListener to the root view.
    final View content = findViewById(android.R.id.content);
    content.getViewTreeObserver().addOnPreDrawListener(
            new ViewTreeObserver.OnPreDrawListener() {
                @Override
                public boolean onPreDraw() {
                    // Check whether the initial data is ready.
                    if (mViewModel.isReady()) {
                        // The content is ready. Start drawing.
                        content.getViewTreeObserver().removeOnPreDrawListener(this);
                        return true;
                    } else {
                        // The content isn't ready. Suspend.
                        return false;
                    }
                }
            });
}

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

يمكنك تخصيص الصورة المتحركة لشاشة البداية من خلال Activity.getSplashScreen().

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    // ...

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

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

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

@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    // ...

    // Add a callback that's called when the splash screen is animating to the
    // app content.
    getSplashScreen().setOnExitAnimationListener(splashScreenView -> {
        final ObjectAnimator slideUp = ObjectAnimator.ofFloat(
                splashScreenView,
                View.TRANSLATION_Y,
                0f,
                -splashScreenView.getHeight()
        );
        slideUp.setInterpolator(new AnticipateInterpolator());
        slideUp.setDuration(200L);

        // Call SplashScreenView.remove at the end of your custom animation.
        slideUp.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                splashScreenView.remove();
            }
        });

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

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

// Get the duration of the animated vector drawable.
val animationDuration = splashScreenView.iconAnimationDuration
// Get the start time of the animation.
val animationStart = splashScreenView.iconAnimationStart
// Calculate the remaining duration of the animation.
val remainingDuration = if (animationDuration != null && animationStart != null) {
    (animationDuration - Duration.between(animationStart, Instant.now()))
        .toMillis()
        .coerceAtLeast(0L)
} else {
    0L
}

// Get the duration of the animated vector drawable.
Duration animationDuration = splashScreenView.getIconAnimationDuration();
// Get the start time of the animation.
Instant animationStart = splashScreenView.getIconAnimationStart();
// Calculate the remaining duration of the animation.
long remainingDuration;
if (animationDuration != null && animationStart != null) {
    remainingDuration = animationDuration.minus(
            Duration.between(animationStart, Instant.now())
    ).toMillis();
    remainingDuration = Math.max(remainingDuration, 0L);
} else {
    remainingDuration = 0L;
}

مصادر إضافية

• نقل عملية تنفيذ شاشة البداية الحالية إلى الإصدار 12 من Android والإصدارات الأحدث
• الآن في تطبيق Android، الذي يعرض تنفيذًا فعليًا لشاشة البداية