מסכי פתיחה

החל מ-Android 12, ה-API של SplashScreen מאפשר לאפליקציות להפעיל עם אנימציה, כולל תנועה בתוך האפליקציה בזמן ההפעלה, מסך פתיחה שמוצג סמל האפליקציה, ומעבר אל האפליקציה עצמה. SplashScreen הוא Window וגם לכן מכסה Activity.

חוויית מסך הפתיחה כוללת רכיבי עיצוב סטנדרטיים לכל אפליקציה אבל ניתן גם להתאים אותה אישית כדי לשמור על המיתוג הייחודי של האפליקציה.

נוסף לשימוש ב-API של הפלטפורמה SplashScreen, אפשר גם להשתמש SplashScreen של ספרייה תואמת, שעטיפה את ה-API SplashScreen.

איך פועל מסך הפתיחה

כשמשתמש מפעיל אפליקציה בזמן שהתהליך שלה לא פועל (קור start) או ש-Activity לא שנוצר (התחלה חמה), מתרחשים האירועים הבאים:

1. המערכת מציגה את מסך הפתיחה באמצעות עיצובים ואנימציות שבחרת להגדיר.

2. כשהאפליקציה מוכנה, מסך הפתיחה נסגר והאפליקציה מוצגת.

מסך הפתיחה אף פעם לא מוצג התחלה חמה.

הרכיבים והמכניקה של מסך הפתיחה

הרכיבים של מסך הפתיחה מוגדרים על ידי קובצי משאבים ב-XML קובץ מניפסט של Android. לכל רכיב יש גרסה של מצב בהיר ומצב כהה.

האלמנטים הניתנים להתאמה אישית של מסך הפתיחה כוללים את סמל האפליקציה, סמל האפליקציה רקע ורקע של חלון:

נבחן את הרכיבים הבאים, שמוצגים באיור 2:

1 סמל האפליקציה חייב להיות פריט שניתן להזזה בווקטור. הוא סטטיות או מונפשות. למרות שמשך הזמן של אנימציות אינו מוגבל, מומלץ לא לחרוג מ-1,000 אלפיות השנייה. סמל מרכז האפליקציות הוא ברירת המחדל.

2 רקע הסמל הוא אופציונלי ושימושי אם נדרשת ניגודיות רבה יותר בין הסמל לרקע של החלון. אם משתמשים סמל מותאם, אם יש ניגודיות מספקת לרקע של החלון, יוצג הרקע.

3 בדומה לסמלים מותאמים, שליש התממה בחזית התמונה.

4 הרקע של החלון מורכב מרקע אחד בצבע אטום. אם רקע החלון מוגדר בצבע פשוט, ייעשה בו שימוש כברירת מחדל, אם המאפיין לא מוגדר.

מידות מסך הפתיחה

על סמל מסך הפתיחה נעשה שימוש באותם מפרטים כמו סמלים מותאמים, ככה:

• תמונה ממותגת: הגודל חייב להיות 200×80 dp.
• סמל אפליקציה עם רקע של סמל: הגודל חייב להיות בגודל 240×240 dp ולהתאים אותו לגודל מעגל בקוטר 160 dp.
• סמל אפליקציה ללא רקע של סמל: הגודל צריך להיות 288×288 dp ולהתאים את הגודל עיגול בקוטר 192dp.

לדוגמה, אם הגודל המלא של תמונה הוא 300×300 dp, הסמל צריך להתאים בתוך מעגל בקוטר של 200dp. כל מה שמחוץ למעגל פונה מוסתר (מסכה).

אנימציות במסך הפתיחה ורצף ההפעלה

זמן אחזור נוסף בדרך כלל קשור להפעלה של אפליקציה בהפעלה במצב התחלתי (cold start). הוספת סמל מונפש למסך הפתיחה היא בעלת מראה אסתטי ברור מספק חוויית פרימיום יותר. מחקר על התנהגות משתמשים מראה שמודל סטארט-אפ נתפס פחות זמן כשצופים באנימציה.

אנימציה של מסך הפתיחה מוטמעת ברכיבי רצף ההפעלה, שמוצגת באיור 4.

1. כאן מזינים אנימציה: מתצוגת המערכת למסך הפתיחה. הוא נשלט על ידי המערכת ולא ניתן להתאים אותו אישית.

2. מסך פתיחה (מוצג במהלך חלק ה'המתנה' ברצף): הפתיחה ניתן להתאים אישית את המסך, וכך לספק אנימציה של הלוגו מיתוג. המינוי עומד בדרישות. שמתוארים בדף הזה כדי לפעול בצורה תקינה.

3. יציאה מהאנימציה: האנימציה שמסתירה את מסך הפתיחה. אם רוצים להתאים אישית אותו, אפשר להשתמש SplashScreenView . אפשר להריץ עליהם כל אנימציה, עם הגדרות של טרנספורמציה, שקיפות וצבע. במקרה כזה, מסירים באופן ידני את מסך הפתיחה כאשר האנימציה הושלמה.

כאשר אנימציית הסמל, הפעלת האפליקציה מאפשרת לדלג על ברצף במקרים שבהם האפליקציה מוכנה מוקדם יותר. האפליקציה מפעילה את onResume() או שמסך הפתיחה מסתיים באופן אוטומטי, לכן חשוב לוודא שהתנועה דילגת בנוחות. אפשר לסגור את מסך הפתיחה רק באמצעות onResume() כשהאפליקציה יציבה מבחינה ויזואלית, כך שלא הדרושים. הצגת ממשק חלקי עלול להיות בעייתית עבור המשתמשים, ליצור רושם של חוסר חיזוי או חוסר ליטוש.

הדרישות לאנימציה במסך הפתיחה

מסך הפתיחה חייב לעמוד בדרישות הבאות:

• הגדרת צבע רקע של חלון יחיד ללא שקיפות. יום ולילה במצב נתמך באמצעות ספרייה תואמת SplashScreen.

• מוודאים שהסמל המונפש עומד בדרישות הבאות:

  • פורמט: הסמל חייב להיות AnimatedVectorDrawable (AVD) XML.
  • מידות: סמל AVD חייב להיות גדול פי 4 מגודלו של סמל באופן הבא:
    • אזור הסמל חייב להיות 432dp - במילים אחרות, ארבע פעמים שטח של 108 dp של סמל מותאם ללא מסכה.
    • שני השלישים הפנימי של התמונה מוצגים בסמל מרכז האפליקציות, והוא חייב להיות 288dp — במילים אחרות, ארבע פעמים מהווה את אזור המסכה הפנימי של סמל דינמי.
  • משך זמן: מומלץ שלא לחרוג מ-1,000 אלפיות השנייה בטלפונים. אפשר להשתמש התחלה מאוחרת, אבל היא לא יכולה להיות ארוכה מ-166 אלפיות השנייה. אם האפליקציה זמן ההפעלה ארוך מ-1,000 אלפיות השנייה, מומלץ לכלול אנימציה שחוזרת על עצמה.

• קביעת פרק זמן מתאים לסגירת מסך הפתיחה, משרטטים את הפריים הראשון באפליקציה. אפשר לבצע התאמה אישית נוספת, כמו שמתואר בקטע על השארת מסך הפתיחה על המסך לפרקי זמן ארוכים יותר.

משאבים למסך הפתיחה

מורידים את example Start kit, שמדגים איך ליצור, לעצב ולייצא אנימציה ל-AVD. היא כוללת:

• קובץ הפרויקט של האנימציה Adobe After Effects.
• קובץ ה-XML של ה-AVD שיוצא הסופי.
• GIF לדוגמה של האנימציה.

הורדת הקבצים האלה מבטאת את הסכמתך ל התנאים וההגבלות של Google.

במדיניות הפרטיות של Google מתואר מטפלים בנתונים במסגרת השירות הזה.

התאמה אישית של מסך הפתיחה באפליקציה

כברירת מחדל, SplashScreen משתמש ב-windowBackground של העיצוב שלך אם windowBackground הוא צבע אחד. כדי להתאים אישית את מסך הפתיחה, מוסיפים לעיצוב של האפליקציה.

אתם יכולים להתאים אישית את מסך הפתיחה של האפליקציה בכל אחת מהפעולות הבאות:

• כדי לשנות את המראה שלו, אפשר להגדיר את מאפייני העיצוב.

• צריך להשאיר אותו במסך לזמן ארוך יותר.

• מתאימים אישית את האנימציה לסגירת מסך הפתיחה.

שנתחיל?

ספריית הליבה SplashScreen מספקת את מסך הפתיחה של Android 12 לכולם מכשירים מ-API 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 כדי להחליף את הסמל במרכז חלון ההתחלה.

   באפליקציות שמטרגטות ל-Android 12 (רמת API 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 – השרטוט מראש אין צורך ב-listener.

// 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;
}

מקורות מידע נוספים

• מעבירים את ההטמעה הקיימת של מסך הפתיחה ל-Android 12 וגם גבוהה יותר
• עכשיו באפליקציה ל-Android, שמציג הטמעה של מסך פתיחה בעולם האמיתי