מסכי פתיחה

חשוב: אם הטמעתם מסך פתיחה בהתאמה אישית ב-Android מגרסה 11 ומטה, אתם צריכים להעביר את האפליקציה לספריית התאימות SplashScreen כדי לוודא שהיא תוצג כמו שצריך ב-Android מגרסה 12 ומעלה. הוראות מפורטות זמינות במאמר העברת ההטמעה הקיימת של מסך הפתיחה ל-Android 12.

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

איור 1. מסך פתיחה.

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

כדי להתאים אישית את מסך הפתיחה של האפליקציה, משתמשים בספריית התאימות של Jetpack SplashScreen. הוא כולל את ה-API של הפלטפורמה SplashScreen ופועל עם כל ComponentActivity, כולל פעילויות שמגדירות את ממשק המשתמש שלהן באמצעות Compose באמצעות setContent.

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

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

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

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

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

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

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

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

איור 2. רכיבים של מסך פתיחה שאפשר להתאים אישית.

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

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

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

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

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

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

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

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

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

איור 3. מידות הסמל של מסך הפתיחה לרקעים אחידים ושקופים, בהתאמה.

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

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

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

איור 4. רצף ההשקה.

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

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

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

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

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

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

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

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

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

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

מקורות מידע בנושא מסכי פתיחה

איור 5. דוגמה ל-AVD.

מורידים את ערכת ההתחלה לדוגמה, שמדגימה איך ליצור אנימציה, לעצב אותה ולייצא אותה ל-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.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 כדי להחליף את הסמל במרכז החלון ההתחלתי.

   באפליקציות שמטרגטות ל-Android 12 (רמת API ‏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 כדי לציין אם האפליקציה תמיד תציג את הסמל במסך הפתיחה ב-Android מגרסה 13 ואילך. ערך ברירת המחדל הוא 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()
    }
}
SplashScreenSnippets.kt

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

אפשר להתאים אישית את האנימציה של מסך הפתיחה באמצעות 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()
    }
}
SplashScreenSnippets.kt

בתחילת הקריאה החוזרת הזו, מתחיל הפריט הגרפי הווקטורי שניתן לשרטוט ומונפש במסך הפתיחה. בהתאם למשך הזמן של הפעלת האפליקציה, יכול להיות שהאנימציה של הרכיב הניתן לשרטוט תהיה באמצע. משתמשים ב-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)
SplashScreenSnippets.kt

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

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