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

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

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

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

علاوه‌بر استفاده از میانای برنامه‌سازی کاربردی پلاتفرم SplashScreen، می‌توانید از کتابخانه سازگاری SplashScreen نیز استفاده کنید که میانای برنامه‌سازی کاربردی SplashScreen را دربرمی‌گیرد.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

شکل ۵. نمونه AVD.

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

  • فایل پروژه Adobe After Effects پویانمایی.
  • فایل XML نهایی صادرشده AVD.
  • نمونه GIF پویانمایی.

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

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

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

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

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

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

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

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

شروع کنید

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

شیک

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

کاتلین

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

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

می‌توانید مشخصه‌های زیر را در طرح زمینه 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 برای نشان دادن مدت پویانمایی نماد صفحه اسپلش استفاده کنید. تنظیم این مورد تأثیری بر زمان واقعی نمایش صفحه اسپلش ندارد، اما می‌توانید آن را هنگام سفارشی‌سازی پویانمایی خروج از صفحه اسپلش بااستفاده از 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 و بالاتر نمایش می‌دهد یا نه. مقدار پیش‌فرض ۰ است که اگر فعالیت راه‌اندازی splashScreenStyle را روی SPLASH_SCREEN_STYLE_ICON تنظیم کند، نماد را در صفحه اسپلش نمایش می‌دهد، یا اگر فعالیت راه‌اندازی سبکی را مشخص نکند، از رفتار سیستم پیروی می‌کند. اگر ترجیح می‌دهید صفحه اسپلش خالی هرگز نمایش داده نشود و همیشه می‌خواهید نماد پویانمایی‌شده نمایش داده شود، این مقدار را روی icon_preferred تنظیم کنید.

    <item name="android:windowSplashScreenBehavior">icon_preferred</item>

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

به‌محض اینکه برنامه‌تان اولین قاب خود را ترسیم کند، صفحه اسپلش بسته می‌شود. اگر باید مقدار کمی داده بار کنید، مثلاً بار کردن تنظیمات درون‌برنامه از دیسک محلی به‌صورت ناهمگام، می‌توانید از ViewTreeObserver.OnPreDrawListener برای تعلیق برنامه برای ترسیم اولین قاب آن استفاده کنید.

اگر فعالیت شروع قبل‌از ترسیم به‌پایان برسد—برای مثال، با تنظیم نکردن نمای محتوا و به‌پایان رسیدن قبل‌از onResume—شنونده پیش‌از ترسیم لازم نیست.

کاتلین

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

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

منابع بیشتر