إضافة شاشة بداية

الكلمات الرئيسية: شاشة البداية

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

اطّلِع على تعليمات التنفيذ المفصّلة في هذه الصفحة للتعرّف على كيفية إضافة شاشة البداية باستخدام مكتبة SplashScreen كي تستوفي الشاشة إرشادات التصميم.

إضافة التبعيات

أضِف التبعية التالية إلى ملف build.gradle في وحدة تطبيقك:

Groovy

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

Kotlin

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

تأكَّد من استخدام الإصدار 1.0.1 أو إصدار أحدث للحصول على سمات Wear OS التلقائية.

إضافة مظهر

أنشئ مظهرًا لشاشة البداية في res/values/styles.xml. يعتمد العنصر الرئيسي على شكل الرمز:

  • إذا كان الرمز دائريًا، استخدِم Theme.SplashScreen.
  • إذا كان الرمز مختلف الشكل، استخدِم Theme.SplashScreen.IconBackground.

استخدِم windowSplashScreenBackground لملء الخلفية بالأسود. اضبط قيم postSplashScreenTheme على المظهر الذي يجب أن يستخدمه النشاط وwindowSplashScreenAnimatedIcon على عنصر قابل للرسم أو عنصر قابل للرسم متحرك:

<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>

أما السمات الأخرى، فهي اختيارية.

إنشاء عنصر قابل للرسم للمظهر

تتطلّب مظاهر شاشة البداية عنصرًا قابلاً للرسم لإضافته إلى سمة 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")
        }
    }
}

مصادر إضافية

مزيد من المعلومات حول شاشات البداية بشكل عام وكيفية استخدامها في تطبيقك