نمایشگرهای آب پاش

مهم: اگر صفحه نمایش سفارشی را در Android 11 یا پایین تر اجرا کرده اید، برنامه خود را به SplashScreen API منتقل کنید تا مطمئن شوید که در Android 12 و بالاتر به درستی نمایش داده می شود. برای دستورالعمل‌ها، به انتقال پیاده‌سازی Splash Screen موجود خود به Android 12 مراجعه کنید.

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

شکل 1. یک صفحه نمایش اسپلش.

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

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

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

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

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

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

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

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

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

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

شکل 2. عناصر قابل تنظیم صفحه نمایش اسپلش.

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

1 نماد برنامه باید بصورت برداری قابل ترسیم باشد. می تواند ثابت یا متحرک باشد. اگرچه انیمیشن ها می توانند مدت زمان نامحدودی داشته باشند، توصیه می کنیم از 1000 میلی ثانیه تجاوز نکنید. نماد راه‌انداز پیش‌فرض است.

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

3 همانند نمادهای تطبیقی، یک سوم پیش زمینه پوشانده شده است.

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

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

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

• تصویر مارک: این باید 200×80 dp باشد.
• نماد برنامه با پس‌زمینه نماد: باید 240×240 dp باشد و در دایره‌ای به قطر 160 dp قرار گیرد.
• نماد برنامه بدون پس‌زمینه نماد: باید 288×288 dp باشد و در دایره‌ای به قطر 192 dp قرار گیرد.

به عنوان مثال، اگر اندازه کامل یک تصویر 300×300 dp باشد، نماد باید در دایره ای با قطر 200 dp قرار گیرد. همه چیز خارج از دایره نامرئی (نقاب) می شود.

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

انیمیشن های صفحه نمایش چلپ چلوپ و دنباله راه اندازی

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

همانطور که در شکل 4 نشان داده شده است، یک انیمیشن Slash Screen در اجزای دنباله راه اندازی تعبیه شده است.

شکل 4. دنباله راه اندازی.

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

2. صفحه چلپ چلوپ (نشان داده شده در بخش "انتظار" دنباله): صفحه نمایش چلپ چلوپ را می توان سفارشی کرد و به شما امکان می دهد انیمیشن لوگو و برند خود را تهیه کنید. برای اینکه به درستی کار کند باید الزامات توضیح داده شده در این صفحه را برآورده کند.

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

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

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

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

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

• مطمئن شوید که نماد متحرک دارای مشخصات زیر است:

  • قالب: نماد باید یک XML AnimatedVectorDrawable (AVD) باشد.
  • ابعاد: یک نماد AVD باید چهار برابر اندازه یک نماد تطبیقی ​​باشد، به شرح زیر:
    • ناحیه نماد باید 432 dp باشد - به عبارت دیگر، چهار برابر مساحت 108 dp یک نماد تطبیقی ​​بدون ماسک.
    • دو سوم داخلی تصویر روی نماد راه‌انداز قابل مشاهده است و باید 288 dp باشد - به عبارت دیگر، چهار برابر dp 72 که ناحیه پوشانده شده داخلی یک نماد تطبیقی ​​را تشکیل می‌دهد.
  • مدت زمان: توصیه می کنیم در تلفن ها از 1000 میلی ثانیه تجاوز نکنید. می توانید از شروع تاخیری استفاده کنید، اما این نمی تواند بیشتر از 166 میلی ثانیه باشد. اگر زمان راه‌اندازی برنامه بیشتر از 1000 میلی‌ثانیه است، یک انیمیشن حلقه‌ای را در نظر بگیرید.

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

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

شکل 5. مثال AVD.

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

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

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

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

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

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

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

• ویژگی های تم را برای تغییر ظاهر آن تنظیم کنید.

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

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

شروع کنید

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

شیار

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

کاتلین

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

یک موضوع برای صفحه نمایش اسپلش تنظیم کنید تا ظاهر آن را تغییر دهد

می توانید ویژگی های زیر را در طرح زمینه 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 برای نشان دادن مدت زمان پویانمایی نماد صفحه نمایش اسپلش استفاده کنید. تنظیم این مورد هیچ تاثیری بر زمان واقعی نشان دادن صفحه چلپ چلوپ ندارد، اما می‌توانید آن را هنگام سفارشی‌سازی انیمیشن خروج از صفحه نمایش با استفاده از 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 استفاده کنید تا مشخص کنید که آیا برنامه شما همیشه نماد را روی صفحه نمایش در اندروید 13 و بالاتر نمایش می‌دهد یا خیر. مقدار پیش‌فرض 0 است، که اگر فعالیت راه‌اندازی، 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();
    });
}

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

منابع اضافی

• اجرای Splash Screen موجود خود را به Android 12 و بالاتر منتقل کنید
• اکنون در برنامه اندروید ، که اجرای دنیای واقعی یک صفحه نمایش اسپلش را نشان می دهد