Проектування та налаштування сплеш-екрана для iOS та Android
Перше, що бачить користувач після тапу на іконку — Launch Screen. Він існує не для краси, а щоб прикрити час ініціалізації додатку ілюзією миттєвого запуску. Apple та Google прямо фіксують у гайдлайнах: Launch Screen має виглядати як «знімок» першого екрану додатку. Ми, як інженери з 10+ річним досвідом у мобільній розробці, знаємо, як зробити так, щоб цей екран працював правильно на всіх пристроях, не викликав затримок і не призводив до відхилення в сторах. За статистикою, до 20% відхилень в App Store пов'язані з неправильним налаштуванням сплеша — економія на цьому етапі призводить до значних витрат на доопрацювання.
Типова ситуація: розробник додає красиве зображення в Launch Screen, але на реальному пристрої воно відображається зі спотворенням через неправильні розміри або кешування. Або ж анімація, яка мала з'явитися відразу після ініціалізації, «блимає» чорним екраном. Ми вирішуємо такі проблеми на етапі проектування, підбираючи оптимальний підхід під платформу та фреймворк, економлячи до 30% часу тестування.
Проблеми, які ми вирішуємо
Кешування Launch Screen на iOS. iOS кешує сплеш, і після зміни storyboard стара версія може відображатися кілька днів. Правильний підхід — видаляти додаток і встановлювати заново, або скидати кеш через меню Debug в Xcode. Ми автоматизуємо цей процес у CI, скорочуючи час очікування на 2-3 години.
Фрагментація Android. До Android 12 сплеш робили через тему з windowBackground. На Android 12+ з'явився SplashScreen API, але старий код не забезпечує плавний перехід на нових версіях. Бібліотека androidx.core:core-splashscreen вирішує це для Android 6+, але її потрібно правильно налаштувати з адаптивною іконкою 240×240 dp. Неправильне налаштування призводить до чорного екрану на 10% пристроїв.
Комбінований сплеш у крос-платформових додатках. В React Native та Flutter кореневий сплеш через нативні компоненти, а потім — анімований екран на рівні фреймворку. Якщо налаштування не синхронізувати, виникає «блимання» при зміні екранів, що знижує користувацький рейтинг на 0.3 бала.
Як ми це робимо
Розглянемо типовий кейс: замовник хоче анімований сплеш з логотипом в iOS та Android. Після обговорення обираємо шлях: нативний Launch Screen (статичний) + Lottie-анімація на першому екрані після ініціалізації. Розбираємо по платформах.
iOS: LaunchScreen.storyboard vs Info.plist
Раніше Launch Screen задавався через LaunchScreen.storyboard. Зараз Xcode App Store вимагає UILaunchScreen в Info.plist для нових додатків. Обидва підходи підтримуються, але storyboard дає більше гнучкості для розміщення логотипу. Важливо: починаючи з iOS 14, можна використовувати Auto Layout, але краще обмежитися статичним контентом.
Допустимі елементи в Launch Screen на iOS: статичний логотип, фоновий колір, просте зображення. Заборонені анімації (це причина відхилення за Guideline 2.3.7), відео, інтерактивні елементи. Текст також не рекомендується — немає механізму локалізації. Розміри зображень: потрібні варіанти @1x, @2x, @3x. Для Asset Catalog в Xcode — PDF-вектор або PNG-набір.
Apple рекомендує в Human Interface Guidelines використовувати Launch Screen як знімок першого екрану додатку.
Важливий нюанс: якщо логотип включає прозорість, переконайтеся, що фон сплеша збігається з кольором першого екрану — інакше буде різкий перепад. На iPad додатково налаштуйте ландшафтну орієнтацію в info.plist.
Android: SplashScreen API vs legacy
Раніше на Android сплеш реалізовувався через Theme з windowBackground. З появою Android 12 з'явився SplashScreen API — системний, з анімацією іконки. Google наполегливо рекомендує мігрувати, і для нових додатків таргет API 31+ це вже стандарт.
Через SplashScreen API: задаємо windowSplashScreenBackground (колір фону), windowSplashScreenAnimatedIcon (анімована іконка, Animated Vector Drawable, не більше 1000ms), windowSplashScreenIconBackgroundColor. Іконка — адаптивна, 240×240 dp. Бібліотека androidx.core:core-splashscreen дозволяє використовувати SplashScreen API на Android 6+, що вирішує проблему фрагментації. Приклад налаштування в themes.xml:
<style name="Theme.App.Starting" parent="Theme.SplashScreen"> <item name="windowSplashScreenBackground">@color/white</item> <item name="windowSplashScreenAnimatedIcon">@drawable/splash_icon</item> <item name="postSplashScreenTheme">@style/Theme.App</item> </style> Типова помилка: ігнорування windowSplashScreenAnimationDuration. Якщо не задати, анімація іконки може не запуститися. Ще одна: неправильні кольори в темній темі — сплеш має адаптуватися до системної теми, інакше користувач побачить білий екран на темному фоні.
React Native та Flutter
В React Native сплеш реалізується через нативні частини iOS/Android + пакет react-native-bootsplash (рекомендується над застарілим react-native-splash-screen). react-native-bootsplash генерує всі необхідні ресурси з одного PNG через CLI-команду. Плагін сам створює адаптивні іконки під Android та LaunchScreen.storyboard під iOS.
В Flutter: стандартний FlutterActivity показує нативний launch screen до першого кадру Flutter. Налаштовується через той самий LaunchScreen.storyboard на iOS та SplashScreen API на Android. flutter_native_splash — плагін, який генерує нативні ресурси під обидві платформи з одного файлу конфігурації. Після генерації потрібно видалити старі ресурси вручну, якщо змінювалася іконка.
Як уникнути проблем з кешуванням на iOS?
Слідуйте правилам App Store Review Guidelines. Використовуйте просту PNG-іконку з прозорим фоном або векторний PDF. Не намагайтеся вставити анімацію — екран показується до 200 мс, і анімація не встигне програтися, а ризик відмови високий. Для підтримки iPad додайте ландшафтну орієнтацію в info.plist. Перевірте темну тему: якщо додаток підтримує її, сплеш має мати темний фон автоматично через UIUserInterfaceStyle.
Що робити з анімацією після системного сплеша?
Анімований splash (Lottie-анімація після нативного launch screen) — це інша історія. Після того, як додаток ініціалізувався, показуємо перший екран-заглушку з Lottie-анімацією на 1–2 секунди. Технічно це вже перший екран додатку, а не системний Launch Screen. На iOS LottieAnimationView з офіційної бібліотеки Lottie, на Android LottieAnimationView з com.airbnb.android:lottie. Не забудьте викликати applicationDidBecomeActive для першої ініціалізації, щоб анімація не смикалася. Правильне налаштування зменшує навантаження на CPU на 15% порівняно з GIF.
Порівняння підходів
| Платформа | Системний сплеш | Анімований сплеш (після ініціалізації) |
|---|---|---|
| iOS | LaunchScreen.storyboard / Info.plist, тільки статика | LottieAnimationView (Lottie iOS 4.x) |
| Android (API 31+) | SplashScreen API (анімована іконка до 1000ms) | LottieAnimationView (Lottie Android) |
| Android (API <31) | Theme + windowBackground | Те ж саме |
| React Native | react-native-bootsplash (генерує нативні ресурси) | Lottie-компонент для React Native |
| Flutter | flutter_native_splash (генерує нативні ресурси) | Lottie-віджет (lottie package) |
Рекомендовані версії плагінів
| Плагін | Версія | Примітка |
|---|---|---|
| react-native-bootsplash | ^4.0 | Генерує нативні ресурси з PNG |
| flutter_native_splash | ^2.0 | Конфігурація в YAML |
| lottie-react-native | ^6.0 | Для React Native |
| lottie-flutter | ^2.0 | Для Flutter |
Перевірка сплеша на реальному пристрої
Обов'язково тестуйте на 5+ реальних пристроях з різними версіями ОС. Використовуйте TestFlight для iOS та внутрішнє тестування Google Play для Android. Перевірте відсутність чорних екранів, затримок та коректне відображення у темній темі.Процес роботи
- Аналітика — вивчаємо дизайн, визначаємо, чи потрібен анімований сплеш, обираємо підхід під платформи.
- Проектування — готуємо ресурси: іконки, Lottie-анімацію, адаптивні розміри.
- Реалізація — налаштовуємо Launch Screen / SplashScreen API, інтегруємо Lottie, тестуємо на реальних пристроях.
- Тестування — перевіряємо час запуску, відсутність чорних екранів, коректне відображення на різних версіях iOS/Android.
- Деплой — завантажуємо в App Store / Google Play, при необхідності налаштовуємо testflight або внутрішнє тестування.
Що входить у роботу
- Дизайн та підготовка всіх варіантів зображень (iOS: @1x, @2x, @3x; Android: адаптивні іконки 240×240 dp).
- Налаштування LaunchScreen.storyboard або Info.plist на iOS, SplashScreen API на Android.
- Інтеграція Lottie-анімації (якщо потрібно).
- Налаштування плагінів для React Native (react-native-bootsplash) або Flutter (flutter_native_splash).
- Перевірка відповідності гайдлайнам App Store та Google Play.
- Тестування на 5+ реальних пристроях з різними версіями ОС.
- Документація зі збірки та підтримки.
Терміни орієнтовно
- Простий сплеш (статичний, без анімації) — від 1 дня.
- Сплеш з анімацією (Lottie) — 2–3 дні.
- Крос-платформовий проект (iOS + Android, одна команда) — 2–4 дні.
Вартість розраховується індивідуально в залежності від складності дизайну, кількості платформ та необхідності інтеграції з існуючим кодом.
Отримайте консультацію — ми допоможемо уникнути типових помилок та гарантуємо відповідність вимогам сторів. Зв'яжіться з нами, щоб обговорити деталі вашого сплеша.