صفحه‌های اسپلش

از Android 12، برنامه‌ها با صفحه اسپلش سیستم راه‌اندازی می‌شوند که شامل حرکت درون‌برنامه در زمان راه‌اندازی، صفحه اسپلش نمایش‌دهنده نماد برنامه، و گذار به خود برنامه است. صفحه اسپلش Window است و بنابراین Activity را پوشش می‌دهد.

شکل ۱. صفحه اسپلش.

تجربه صفحه اسپلش عناصر طراحی استاندارد را به هر راه‌اندازی برنامه می‌آورد، اما قابل‌سفارشی‌سازی نیز هست تا برنامه‌تان بتواند نمانام‌سازی منحصربه‌فرد خود را حفظ کند.

برای سفارشی‌سازی کردن صفحه اسپلش از برنامه‌تان، از کتابخانه سازگار Jetpack SplashScreen استفاده کنید. این کلاس میانای برنامه‌سازی کاربردی SplashScreen پلاتفرم را دربرمی‌گیرد و با هر ComponentActivity کار می‌کند، ازجمله فعالیت‌هایی که واسط کاربر خود را با Compose بااستفاده از setContent تنظیم می‌کنند.

نحوه عملکرد صفحه اسپلش

وقتی کاربر برنامه‌ای را راه‌اندازی می‌کند درحالی‌که فرایند برنامه درحال اجرا نیست (راه‌اندازی سرد) یا Activity ایجاد نشده است (راه‌اندازی گرم)، رویدادهای زیر رخ می‌دهد:

  1. سیستم صفحه اسپلش را بااستفاده از زمینه‌ها و پویانمایی‌هایی که شما تعریف می‌کنید نشان می‌دهد.

  2. وقتی برنامه آماده شد، صفحه اسپلش بسته می‌شود و برنامه نمایش داده می‌شود.

صفحه اسپلش هرگز درطول راه‌اندازی سریع نشان داده نمی‌شود.

عناصر و مکانیک صفحه اسپلش

عناصر صفحه اسپلش توسط فایل‌های منبع XML در فایل مانیفست Android تعریف می‌شوند. برای هر عنصر، نسخه‌های زمینه روشن و تیره وجود دارد.

عناصر قابل‌سفارشی‌سازی صفحه اسپلش شامل نماد برنامه، پس‌زمینه نماد، و پس‌زمینه پنجره است:

صفحه اسپلش با توضیحات شماره‌گذاری‌شده برای عناصر قابل‌سفارشی‌سازی آن
شکل ۲. عناصر قابل‌سفارشی‌سازی صفحه اسپلش.

عناصر زیر را که در شکل ۲ نشان داده شده است درنظر بگیرید:

۱ نماد برنامه باید ترسیمی بُرداری باشد. این نشان می‌تواند ثابت یا پویانمایی‌شده باشد. اگرچه پویانمایی‌ها می‌توانند مدت نامحدودی داشته باشند، توصیه می‌کنیم از ۱۰۰۰ میلی‌ثانیه بیشتر نشود. نماد راه‌انداز پیش‌فرض است.

۲ پس‌زمینه نماد اختیاری است و اگر به تضاد بیشتری بین نماد و پس‌زمینه پنجره نیاز دارید، مفید است. اگر از نماد تطبیق‌پذیر استفاده می‌کنید، اگر کنتراست کافی با پس‌زمینه پنجره وجود داشته باشد، پس‌زمینه آن نمایش داده می‌شود.

۳ مانند نمادهای تطبیق‌پذیر، یک‌سوم پیش‌زمینه ماسک می‌شود.

۴ پس‌زمینه پنجره از یک رنگ مات تشکیل شده است. اگر پس‌زمینه پنجره تنظیم شده باشد و رنگ ساده‌ای داشته باشد، درصورت تنظیم نشدن مشخصه، به‌طور پیش‌فرض از آن استفاده می‌شود.

ابعاد صفحه اسپلش

نماد صفحه اسپلش از همان مشخصات نمادهای تطبیق‌پذیر استفاده می‌کند، به‌صورت زیر:

  • تصویر نمانام: این تصویر باید ۲۰۰×۸۰ دی‌پی باشد.
  • نماد برنامه با پس‌زمینه نماد: این نماد باید ۲۴۰×۲۴۰ پیکسل مستقل از تراکم باشد و در دایره‌ای با قطر ۱۶۰ پیکسل مستقل از تراکم جا شود.
  • نماد برنامه بدون پس‌زمینه نماد: این نماد باید ۲۸۸×۲۸۸ پیکسل مستقل از تراکم باشد و در دایره‌ای با قطر ۱۹۲ پیکسل مستقل از تراکم جا شود.

برای مثال، اگر اندازه کامل تصویر ۳۰۰×۳۰۰ دی‌پی باشد، نماد باید در دایره‌ای با قطر ۲۰۰ دی‌پی جا شود. هرچیزی خارج از دایره نامرئی می‌شود (ماسک‌گذاری می‌شود).

ابعاد نماد صفحه اسپلش با پس‌زمینه نماد توپر و شفاف
شکل ۳. ابعاد نماد صفحه اسپلش برای پس‌زمینه‌های یکدست و شفاف، به‌ترتیب.

پویانمایی‌های صفحه اسپلش و توالی راه‌اندازی

تأخیر اضافی اغلب با راه‌اندازی برنامه در شروع سرد مرتبط است. افزودن نماد پویانمایی‌شده به صفحه اسپلش جذابیت زیبایی‌شناختی آشکاری دارد و تجربه ممتازتری ارائه می‌دهد. پژوهش کاربر نشان می‌دهد که زمان راه‌اندازی درک‌شده هنگام مشاهده پویانمایی کمتر است.

پویانمایی صفحه اسپلش در مؤلفه‌های توالی راه‌اندازی جاسازی شده است، همان‌طور که در شکل ۴ نشان داده شده است.

توالی راه‌اندازی در دوازده قاب متوالی، که با تک‌ضرب زدن روی نماد راه‌انداز شروع می‌شود و با بزرگ شدن آن، صفحه را پر می‌کند
شکل ۴. توالی راه‌اندازی.

  1. پویانمایی ورودی: این پویانمایی شامل نمای سیستم به صفحه اسپلش است. این مورد توسط سیستم کنترل می‌شود و قابل‌سفارشی‌سازی نیست.

  2. صفحه اسپلش (درطول بخش «انتظار» توالی نشان داده می‌شود): صفحه اسپلش را می‌توان سفارشی‌سازی کرد و به شما امکان می‌دهد پویانمایی نشان‌واره و نمانام‌سازی خودتان را ارائه دهید. برای اینکه به‌درستی کار کند، باید الزامات شرح‌داده‌شده در این صفحه را داشته باشد.

  3. پویانمایی خروج: این پویانمایی شامل پویانمایی‌ای است که صفحه اسپلش را پنهان می‌کند. اگر می‌خواهید آن را سفارشی‌سازی کنید، از نمای SplashScreenViewProvider و نماد آن استفاده کنید. می‌توانید هر پویانمایی‌ای را با تنظیمات تبدیل، کدری، و رنگ روی آن‌ها اجرا کنید. در این حالت، وقتی پویانمایی تمام شد، صفحه اسپلش را به‌صورت دستی بردارید.

هنگام اجرای پویانمایی نماد، راه‌اندازی برنامه به شما امکان می‌دهد در مواردی که برنامه زودتر آماده می‌شود، از دنباله رد شوید. برنامه onResume() را راه‌اندازی می‌کند یا زمان صفحه اسپلش به‌طور خودکار تمام می‌شود، بنابراین مطمئن شوید که حرکت به‌راحتی قابل رد شدن باشد. صفحه اسپلش فقط باید با onResume() رد شود وقتی برنامه ازنظر بصری پایدار است، بنابراین به نشانگرهای چرخان اضافی نیازی نیست. معرفی میانای ناقص می‌تواند برای کاربران ناخوشایند باشد و ممکن است تصوری از غیرقابل‌پیش‌بینی بودن یا عدم‌پرداخت را ایجاد کند.

الزامات پویانمایی صفحه اسپلش

صفحه اسپلش شما باید از مشخصات زیر پیروی کند:

  • رنگ پس‌زمینه پنجره تکی را بدون شفافیت تنظیم می‌کند. حالت‌های روز و شب با SplashScreen compat library پشتیبانی می‌شوند.

  • مطمئن شوید نماد پویانمایی‌شده مشخصات زیر را داشته باشد:

    • قالب: نماد باید AnimatedVectorDrawable (AVD) XML باشد.
    • ابعاد: اندازه نماد «بردار متحرک قابل‌ترسیم» باید چهار برابر اندازه نماد تطبیق‌پذیر باشد، به‌صورت زیر:
      • مساحت نماد باید ۴۳۲ dp باشد—به‌عبارت دیگر، چهار برابر مساحت ۱۰۸ dp نماد تطبیق‌پذیر پوشانده‌نشده.
      • دو سوم داخلی تصویر در نماد راه‌انداز قابل‌مشاهده است، و باید ۲۸۸ dp باشد—به‌عبارت دیگر، چهار برابر ۷۲ dp که ناحیه ماسک‌شده داخلی نماد تطبیق‌پذیر را تشکیل می‌دهد.
    • مدت: توصیه می‌کنیم در تلفن‌ها از ۱۰۰۰ میلی‌ثانیه بیشتر نشود. می‌توانید از شروع با تأخیر استفاده کنید، اما این تأخیر نباید بیشتر از ۱۶۶ میلی‌ثانیه باشد. اگر زمان راه‌اندازی برنامه بیشتر از ۱۰۰۰ میلی‌ثانیه است، از پویانمایی حلقه‌ای استفاده کنید.

  • زمان مناسبی را برای بستن صفحه اسپلش تعیین کنید، که این اتفاق زمانی می‌افتد که برنامه شما اولین قاب خود را ترسیم می‌کند. می‌توانید این مورد را همان‌طور که در بخش مربوط به نگه داشتن صفحه اسپلش روی صفحه برای مدت طولانی‌تر شرح داده شده است، بیشتر سفارشی‌سازی کنید.

منابع صفحه اسپلش

شکل ۵. نمونه دستگاه مجازی Android.

کیت شروع نمونه را بارگیری کنید که نحوه ایجاد، قالب‌بندی، و صادر کردن پویانمایی به AVD را نشان می‌دهد. این موارد عبارت‌اند از:

  • فایل پروژه Adobe After Effects پویانمایی.
  • فایل XML نهایی صادرشده از «دستگاه مجازی Android».
  • نمونه GIF پویانمایی.

با بارگیری این فایل‌ها، با شرایط خدمات Google موافقت می‌کنید.

خط‌مشی رازداری Google نحوه استفاده از داده‌ها را در این سرویس شرح می‌دهد.

سفارشی‌سازی کردن صفحه اسپلش در برنامه

به‌طور پیش‌فرض، SplashScreen از windowBackground زمینه شما استفاده می‌کند اگر windowBackground تک‌رنگ باشد. برای سفارشی‌سازی صفحه اسپلش، مشخصه‌هایی به زمینه برنامه اضافه کنید.

با انجام هریک از کارهای زیر می‌توانید صفحه اسپلش برنامه‌تان را سفارشی‌سازی کنید:

  • مشخصه‌های زمینه را برای تغییر ظاهر آن تنظیم کنید.

  • آن را برای مدت طولانی‌تری روی صفحه نگه دارید.

  • پویانمایی را برای بستن صفحه اسپلش سفارشی‌سازی کنید.

شروع کنید

کتابخانه اصلی SplashScreen صفحه اسپلش Android 12 را به همه دستگاه‌ها از API 23 می‌آورد. برای افزودن آن به پروژه‌تان، قطعه زیر را به فایل build.gradle اضافه کنید:

شیک

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

کاتلین

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

سپس یک زمینه صفحه اسپلش ایجاد کنید که از Theme.SplashScreen ارث‌بری کند، postSplashScreenTheme را روی زمینه‌ای تنظیم کنید که فعالیت بعداز آن استفاده می‌کند، زمینه صفحه اسپلش را در مانیفست خود اعمال کنید (به انتقال پیاده‌سازی صفحه اسپلش موجود به Android 12 مراجعه کنید)، و installSplashScreen() را در فعالیت شروع خود قبل‌از فراخوانی super.onCreate() فراخوانی کنید، همان‌طور که در مثال‌های بخش‌های زیر نشان داده شده است.

برای تغییر ظاهر صفحه اسپلش، زمینه‌ای برای آن تنظیم کنید

می‌توانید مشخصه‌های زیر را در زمینه Activity مشخص کنید تا صفحه اسپلش را برای برنامه‌تان سفارشی‌سازی کنید. اگر ازقبل پیاده‌سازی صفحه اسپلش قدیمی دارید که از مشخصه‌هایی مثل android:windowBackground استفاده می‌کند، ارائه فایل منبع جایگزین برای Android نسخه ۱۲ و بالاتر را مدنظر قرار دهید.

  1. از windowSplashScreenBackground برای پر کردن پس‌زمینه با یک رنگ خاص استفاده کنید:

    <item name="android:windowSplashScreenBackground">@color/...</item>

  2. از windowSplashScreenAnimatedIcon برای جایگزین کردن نماد در مرکز پنجره شروع استفاده کنید.

    فقط برای برنامه‌هایی که Android 12 (سطح میانای برنامه‌سازی کاربردی ۳۲) را هدف‌یابی می‌کنند، کارهای زیر را انجام دهید:

    اگر شیء ازطریق 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 و بالاتر نمایش می‌دهد یا نه. مقدار پیش‌فرض ۰ است که اگر فعالیت راه‌اندازی 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()
    }
}

سفارشی‌سازی پویانمایی برای بستن صفحه اسپلش

می‌توانید پویانمایی صفحه اسپلش را با 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()
    }
}

با شروع این فراخوانی، ترسیمی بُرداری پویانمایی‌شده در صفحه اسپلش شروع می‌شود. بسته به مدت‌زمان راه‌اندازی برنامه، drawable ممکن است در وسط پویانمایی خود باشد. از 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)

منابع بیشتر