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

אם באפליקציה שלכם מוגדר מסך פתיחה מותאם אישית או נעשה שימוש בערכת נושא של מרכז האפליקציות, צריך להעביר את האפליקציה לספריית SplashScreen, שזמינה ב-Jetpack, כדי לוודא שהיא מוצגת בצורה תקינה בכל הגרסאות של Wear OS.

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

הוספת יחסי תלות

מוסיפים את יחסי התלות הבאים לקובץ build.gradle של מודול האפליקציה:

Groovy

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

Kotlin

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

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

הוסף עיצוב

יוצרים עיצוב למסך פתיחה ב-res/values/styles.xml. רכיב ההורה תלוי בצורת הסמל:

  • אם הסמל עגול, משתמשים ב-Theme.SplashScreen.
  • אם הסמל הוא בצורה אחרת, משתמשים ב-Theme.SplashScreen.IconBackground.

משתמשים ב-windowSplashScreenBackground כדי למלא את הרקע בצבע שחור אחד. מגדירים את הערכים של postSplashScreenTheme לנושא שבו הפעילות צריכה להשתמש, ואת הערך של windowSplashScreenAnimatedIcon ל-drawable או ל-drawable מונפש:

<resources>
    <style name="Theme.App" parent="@android:style/Theme.DeviceDefault" />

    <style name="Theme.App.Starting" parent="Theme.SplashScreen">
        <!-- Set the splash screen background to black -->
        <item name="windowSplashScreenBackground">@android:color/black</item>
        <!-- Use windowSplashScreenAnimatedIcon to add a drawable or an animated
             drawable. -->
        <item name="windowSplashScreenAnimatedIcon">@drawable/splash_screen</item>
        <!-- Set the theme of the Activity that follows your splash screen. -->
        <item name="postSplashScreenTheme">@style/Theme.App</item>
    </style>
</resources>

אם משתמשים בסמל לא עגול, צריך להגדיר צבע רקע לבן מתחת לסמל. במקרה כזה, צריך להשתמש ב-Theme.SplashScreen.IconBackground כנושא הראשי ולהגדיר את המאפיין windowSplashScreenIconBackgroundColor:

<style name="Theme.App.Starting" parent="Theme.SplashScreen.IconBackground">
    ...
    <!-- Set a white background behind the splash screen icon. -->
    <item name="windowSplashScreenIconBackgroundColor">@android:color/white</item>
</style>

שאר המאפיינים הם אופציונליים.

יצירת drawable לעיצוב

כדי להשתמש בעיצובים של מסכי פתיחה, צריך להעביר פריט גרפי וקטורי שניתן לשרטוט למאפיין windowSplashScreenAnimatedIcon. לדוגמה, אפשר ליצור אותו על ידי הוספת קובץ חדש res/drawable/splash_screen.xml ושימוש בסמל של מרכז האפליקציות ובגודל הנכון של סמל מסך הפתיחה:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:width="@dimen/splash_screen_icon_size"
        android:height="@dimen/splash_screen_icon_size"
        android:drawable="@mipmap/ic_launcher"
        android:gravity="center" />
</layer-list>

גודל הסמל של מסך הפתיחה מוגדר בקובץ res/values/dimens.xml והוא שונה בהתאם לצורה של הסמל:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- Round app icon can take all of default space -->
    <dimen name="splash_screen_icon_size">48dp</dimen>
</resources>

…או שהם לא עגולים ולכן צריך להשתמש ברקע של הסמל:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- Non-round icon with background must use reduced size to fit circle -->
    <dimen name="splash_screen_icon_size">36dp</dimen>
</resources>

ציון העיצוב

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

<manifest>
    <application android:theme="@style/Theme.App.Starting">
       <!-- or -->
       <activity android:theme="@style/Theme.App.Starting">
          <!-- ... -->
</manifest>

עדכון פעילות ההתחלה

מתקינים את מסך הפתיחה בפעילות ההתחלתית לפני שמבצעים קריאה ל-super.onCreate():

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        // Handle the splash screen transition.
        installSplashScreen()

        super.onCreate(savedInstanceState)
        setContent {
            WearApp("Wear OS app")
        }
    }
}

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

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