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

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

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

فضلاً عن استخدام واجهة برمجة التطبيقات SplashScreen Platform API، يمكنك أيضًا استخدام SplashScreen ومكتبة متوافقة تضم واجهة برمجة تطبيقات SplashScreen.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

مراجع عن شاشات البداية

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

• ملف مشروع 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 لتحديد ما إذا كان تطبيقك يعرض دائمًا الرمز على شاشة البداية الإصدار 13 من نظام التشغيل Android والإصدارات الأحدث القيمة التلقائية هي 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، والذي يُظهر تنفيذًا حقيقيًا لشاشة البداية