splash screen что это
Полное руководство по Splash Screen на Android
Перевод статьи Elvis Chidera «The (Complete) Android Splash Screen Guide». Но для начала немного истории о проблеме Splash Screen на Android.
Два вида Splash Screen
Google в гайдлайнах Material Design представляет две концепции Splash Screen (или Launch Screen):
Placeholder UI — концепция для приложений, которые загружаются довольно быстро и не требуют показа перед запуском логотипов, красивых анимаций и прочих украшений. Суть в том, что во время холодного старта основной фон приложения, строка состояния, фон для панели инструментов уже раскрашиваются в цвета приложения, но до полной загрузки без контента. Такой подход, по мнению дизайнеров Google, позволяет более плавно с точки зрения пользователя переходить от момента запуска приложения к работе с ним.
Branded launch screen — собственно и есть то, что большинство разработчиков (по крайней мере Android-разработчиков), именуют Splash Screen. Это некоторый логотип, изображение, реже анимация, которые пользователь на короткое время видит во время старта приложения.
Теперь, прежде чем перейдем к переводу статьи Элвиса, которая рассказывает о Branded launch screen, немного о грустном в лагере поклонников Placeholder UI.
Placeholder не работает даже у приложений от Google
Не смотря на собственные гайдлайны, Google не смог реализовать подход Placeholder UI в собственных приложениях. Я навскидку выбрал три популярных приложения от Google, где по логике должен быть Placeholder UI, но он не работает. Показан переход от холодного старта к рабочему состоянию приложения:
Как видим, во время холодного старта загружается только фон приложения, панель инструментов и строка состояния — либо под цвет фона, либо случайного цвета (как в примере с Play Market).
Причины этому следующие:
О подходе Placeholder UI все. Переходим к переводу статьи Элвиса.
Как работать с Branded launch screen
В прошлом в Android не рекомендовалось делать Splash Screen в приложениях. Не было смысла заставлять пользователя ждать n секунд, чтобы показать заставку. И несомненно, что никто не запускает приложение ради заставки (об этом ниже).
Предоставление пользователю контента должно быть вашим приоритетом №1
Когда в Material Design появился раздел под названием Launch Screen (Splash Screen), кто-то из команды Android опубликовал пост о том, как сделать Splash Screen правильно.
В этом посте я рассмотрю четыре основных способа реализации Splash Screen на Android:
Используя Launcher Theme
В этом примере, я предполагаю, что главная тема вашего приложения называется AppTheme, но если это не так, просто во всех местах замените AppTheme на имя главной темы вашего приложения.
При этом мы наследуем все остальные атрибуты главной темы AppTheme, используя ее название, как префикс для названия нашей темы Launcher.
Пропишите тему для Splash Screen в файле манифеста в вашей стартовой Activity:
Теперь нужно вернуть главную тему в стартовую Activity (если, конечно, мы не хотим, чтобы Splash Screen радовал нас и во время работы приложения)
Самый простой способ сделать это — это вызвать setTheme(R.style.AppTheme) до super.onCreate() и setContentView() :
Все. Вы можете узнать подробнее об этом подходе здесь.
Плюсы:
Минусы:
Я встречал три довольно распространенные жалобы на этот подход:
Я думаю, что следует избегать таких вещей, как долгий Splash Screen, как ProgressDialog, которые заставляют пользователя просто смотреть на экран и не дают ему выполнить никакое действие.
Если ваше приложение подключается к сети, предположите, что все, что должно пойти не так, пойдет не так. Таким образом вы сможете создавать приложения для миллионов людей, которые все еще используют нестабильные соединения 2G и 3G
Splash Screen в отдельной Activity c использованием Launcher Theme
Этот способ базируется на первом способе. Он требует отдельной Activity для Splash Screen. Первые два шага пропускаем, они аналогичны первому способу.
Плюсы:
Минусы:
Используя таймеры
Это старый добрый подход. Надо просто создать отдельную для Splash Screen Activity, которая будет показываться x секунд. Затем открыть подходящую Activity. Используя такой подход, вы получаете больше гибкости, потому что можете добавить анимацию, кастомные view или любые другие элементы, которые вы можете поместить в макет Activity. Вот минимальная реализация такого подхода:
Плюсы:
Минусы:
Используя умные таймеры.
Этот подход базируется на третьем способе. Но вместо постоянной задержки, вы запускаете Splash Screen или нет, основываясь на том, первый это запуск или нет. Вот пример, который использует SharedPreferences :
Плюсы:
Минусы:
Это все о Splash Screen. Если я что-то упустил, напишите в комментариях.
Следует заметить, что на Хабре уже была статья (перевод), где речь шла о Splash Screen. Однако затронутый там подход (соответствует второму способу в этой статье), как мы могли убедиться, не самый оптимальный для большинства случаев. Ну и последнее, в Android Oreo якобы добавлено Splash Screen API, что позволит разработчикам легко добавлять Splash Screen в свои приложения, но на данный момент в официальной документации по этому поводу никакой информации нет.
Делаем экран загрузки Android приложения правильно
Splash Screen (прим.: тут и далее — экран загрузки) просто отнимает ваше время, верно? Как Android разработчик, когда я вижу экран загрузки, я тут же представляю как некоторые плохие разработчики добавляют трехсекундную задержку в коде.
Я должен смотреть на какое-то изображение в течении нескольких секунд, и до тех пор я не могу использовать приложение. И я должен это делать каждый раз после запуска приложения. Я знаю какое приложение я запустил. Я знаю что оно делает. Просто позвольте мне использовать его!
Что рекомендует Google
Вы будете удивлены, узнав что сторонники Google используют Splash Screen. Это описано прямо вот тут, в спецификации к Material Design.
Так было не всегда. Google был против Splash Screen, и даже назвал его анти-паттерном.
Правильный Splash Screen
Я считаю, что Google не противоречит сам себе. Старый совет и новые рекомендации хорошо сочетаются. (Тем не менее, все-таки не очень хорошая идея использовать экран загрузки который отнимает время пользователя. Пожалуйста, не делайте так)
Однако, Android приложениям требуется некоторое количество времени для запуска, особенно при холодном запуске. Существует задержка которую вы не можете избежать. Вместо того чтобы показывать пустой экран, почему бы не показать пользователю что-то хорошее? Именно за этот подход Google и выступает. Не стоит тратить время пользователя, но не показывайте ему пустой, ненастроенный раздел приложения, когда он запускает его впервые.
Если вы посмотрите на последние обновления Google приложений, вы увидите подобный способ использования экрана загрузки. Например, взгляните на приложение YouTube:
Количество времени, которые вы тратите на просмотр Splash Screen, точно соответствует количеству времени, которое требуется приложению для запуска. При холодном запуске, это означает что Splash Screen будет виден дольше. А если приложение уже закэшировано, заставка исчезнет почти сразу.
Реализация Splash Screen
Реализация Splash Screen правильным способом немного отличается от того что вы можете себе приставить. Представление Splash Screen, который вы видите, должно быть готово немедленно, даже прежде чем вы можете раздуть (прим.: inflate) файл макета в вашей Splash Activity (прим.: Activity — активность, деятельность).
Поэтому мы не будем использовать файл макета. Вместо этого мы укажем фон нашего Splash Screen в фоне темы своей Activity. Для этого, сначала необходимо создать XML drawable в res/drawable.
Здесь я задал цвет фона и изображение.
Дальше, вы должны установить этот drawable в качестве фона для темы вашего Splash Screen Activity. Перейдите в файл styles.xml и добавьте новую тему для Splash Screen Activity:
В вашей новой SplashTheme установите в качестве фона ваш XML drawable. И установите эту тему в своей Splash Screen Activity в вашем AndroidManifest.xml:
И, наконец, ваш класс SplashActivity должен перенаправить вас в ваше основное Activity:
Обратите внимание, что вы не настраивает вид для SplashActivity. Представление берется непосредственно из темы. Когда вы задаете вид вашей Splash Screen Activity через тему, он доступен немедленно.
Если у вас есть файл макета для вашей Splash Activity, он будет показан только после того как ваше приложение будет полностью инициализировано, а это что очень поздно. Ведь мы хотим чтобы Splash Screen отображался только небольшой промежуток времени, до того как приложение будет инициализировано.
Делаем это правильно
Как только шаги выше завершены, вы получите Splash Screen реализованный правильным путем:
Вооруженные этим знанием, заставьте ваш Splash Screen работать правильно. Не тратьте время пользователей попусту, но дайте им то, на что им будет приятно смотреть пока они ждут.
Делаем вездесущий Splash Screen на iOS
Я расскажу о реализации анимации перехода со сплэш скрина на другие экраны приложения. Задача возникла в рамках глобального ребрендинга, который не мог обойтись без изменения заставки и внешнего вида продукта.
Для многих разработчиков, участвующих в крупных проектах, решение задач, связанных с созданием красивой анимации, становится глотком свежего воздуха в мире багов, сложных фичей и хот-фиксов. Такие задачи относительно просты в реализации, а результат радует глаз и выглядит очень впечатляюще! Но бывают случаи, когда стандартные подходы не применимы, и тогда нужно придумывать всевозможные обходные решения.
На первый взгляд, в задаче обновления сплэш скрина самым сложным кажется создание анимации, а остальное — «рутинная работа». Классическая ситуация: сначала показываем один экран, а потом с кастомным переходом открываем следующий — всё просто!
В рамках анимации нужно сделать на сплэш скрине отверстие, в котором отображается содержимое следующего экрана, то есть мы точно должны знать, какой view показывается под сплэшом. После запуска Юлы открывается лента, поэтому было бы логично привязаться ко view соответствующего контроллера.
Подготовка сплэш скрина
Тут всё просто: imageView с градиентным фоном и imageView с логотипом.
Как известно, этот экран анимировать нельзя, поэтому нужно создать еще один, визуально идентичный, чтобы переход между ними был незаметен. В Main.storyboard добавим ViewController :
Теперь нам нужен презентер, который будет отвечать за логику показа и скрытия слэш скрина. Запишем протокол для него и сразу создадим класс:
Возможно, вам покажется странным, что создание splashViewController и splashWindow вынесено в отдельные функции, но позже это пригодится.
Мы еще не начали писать логику анимации, а в SplashPresenter уже много кода. Поэтому я предлагаю создать сущность, которая будет заниматься непосредственно анимацией (плюс это разделение ответственностей):
Добавим в SplashPresenter :
и поправим у него методы present и dismiss :
Всё, самая скучная часть позади, наконец-то можно приступить к анимации!
Анимация появления
Начнем с анимации появления сплэш скрина, она несложная:
С учетом этого, в SplashAnimator реализуем метод animateAppearance() :
Сам объект удаляем из памяти после скрытия сплэша.
Ура, можно запускать!
Анимация скрытия
К сожалению (или к счастью), с анимацией скрытия 10 строчек кода не справятся. Нужно сделать сквозное отверстие, которое будет еще вращаться и увеличиваться! Если вы подумали, что «это можно сделать маской», то вы совершенно правы!
Проверим, что получилось?
Знаю, сейчас это выглядит не очень впечатляюще, но всё впереди, идем дальше! Особо внимательные могли заметить, что во время анимации логотип становится прозрачным не мгновенно, а в течение некоторого времени. Для этого в mainWindow поверх всех subviews добавим imageView с логотипом, который фэйдом будет скрываться.
Итак, у нас есть отверстие в виде логотипа, а под отверстием сам логотип.
а в методе viewDidLoad() добавим:
Еще нужно пробросить этот объект через конструктор в SplashAnimator (аналогично foregroundSplashWindow ) и добавить туда свойства:
Чтобы вместо черного фона мы видели всё тот же сплэш скрин, прямо перед скрытием foregroundSplashWindow нужно показать backgroundSplashWindow :
Убедимся, что план удался:
Как вы могли заметить, угол поворота рассчитывается исходя из размеров экрана, чтобы Юла на всех девайсах крутилась до верхнего левого угла.
Анимация масштабирования логотипа:
Стоит обратить внимание на finalScale : конечный масштаб также рассчитывается в зависимости от размеров экрана (пропорционально высоте). То есть при высоте экрана 667 поинтов (iPhone 6) Юла должна увеличиться в 18 раз.
Но сначала она немного уменьшается (в соответствии со вторыми элементами в массивах scales и keyTimes ). То есть в момент времени 0.2 * duration (где duration — общая продолжительность анимации масштабирования) масштаб Юлы будет равен 0,85.
Мы уже на финишной! В методе animateDisappearance запускаем все анимации:
1) Масштабирование главного окна ( mainWindow ).
2) Вращение, масштабирование, исчезновение логотипа ( maskBackgroundView ).
3) Вращение, масштабирование «отверстия» ( mask ).
4) Исчезновение текста ( textImageView ).
Заключение
Таким образом, на выходе у нас получился компонент, не зависящий от контекста запуска приложения (будь то диплинк, push-уведомление, обычный старт или что-то другое). Анимация сработает корректно в любом случае!
Хитрости разработчика под iOS. Splash Screen
Вступление
В ходе разработки приложений под iOS у меня накопились некоторые хитрости, которыми я хотел бы поделиться с Вами.
Сразу предупрежу, что я стараюсь шагать в ногу со временем, поэтому примеры будут под iOS >=5.0 и использовать Storyboard и ARC, но ничего не мешает их портировать на 4.*.
Если вы давно разрабатываете под iOS — для вас бОльшая часть сказанного мною будет очевидной, но при этом я хотел бы, чтобы вы присоединились к обсуждению и рассказали, как вы реализуете подобное.
Заинтересовавшимся — прошу под кат (Пост содержит скриншоты областей Interface Builder-а, поэтому предупреждаю о траффике).
Splash screen
По умолчанию, iOS предоставляет механизм отображения картинки загрузки приложения в виде указания png-файлов под определённые разрешения, этим сейчас никого не удивишь. Но iOS славится своими transition-ами, анимациями и прочим, это смотрится прикольно и благодаря API Core Animation делается совсем не сложно.
Мне всегда нравился стартовый экран у Skype.app, когда логотип приложения после загрузки уходил вверх, а на экране появлялись элементы ввода. Красиво и легко.
Используя Storyboard, задача становится тривиальной:
Допустим, у нас есть некоторый экран, на который мы попадаем при старте приложения:
А наш Default.png выглядит примерно так:
Если сейчас запустить приложение, то сначала мы увидим Default.png, а потом сразу же попадём на стартовый экран. Выглядит не очень, согласитесь? Чтобы исправить это, мы создадим ещё один экран, начальное состояние которого будет идентично по виду нашему Default.png и будет содержать outlet UIImageView. сделаем его стартовым и укажем базовый класс, например, SplashScreenViewController:
View очень простой, фон + UIImageView с логотипом по центру. Он будет связан с SplashScreenViewController посредством аутлета с именем imageView.
Теперь создадим Segue от только что созданного экрана к стартовому экрану.
Для тех, кто только изучает Storyboard, или просто забыл, напоминаю, что чтобы создать Segue не по событию, а просто как связь, вы должны начать тянуть его от StatusBar-а исходного ViewController-а и вызывать его вручную (как — покажу дальше в коде):
Код для этого примера будет выглядеть примерно так:
Теперь если мы запустим наше приложение, то сначала мы увидим логотип с Default.png, потом (незаметно для пользователя) экран сменится на наш SplashScreen, проиграет анимация движения логотипа вверх, после чего так же незаметно экран сменится на стартовый.
Я сам данной платформой занимаюсь относительно недавно и порой мне не хватает таких вот уроков, и я уверен, что найдутся те, кому это так же будет полезно, так что не судите строго, если для вас он оказался бесполезным;)
UPD:
Добавил видеодемонстрацию эффекта в эмуляторе
Заставка
Запуск приложения Android занимает некоторое время, особенно при первом запуске приложения на устройстве. На экране-заставке может отображаться ход выполнения, или для обозначения фирменной символики.
Обзор
Запуск приложения Android занимает некоторое время, особенно во время первого запуска приложения на устройстве (иногда это называется холодный запуском). На экране-заставке может отображаться ход выполнения для пользователя или сведения о фирменной символике для обнаружения и продвижения приложения.
В этом руководством рассматривается один прием для реализации экрана-заставки в приложении Android. В нем рассматриваются следующие шаги.
Создание изображаемого ресурса для экрана-заставки.
Определение новой темы, которая будет отображать рисуемый ресурс.
Добавление нового действия в приложение, которое будет использоваться в качестве экрана-заставки, определенного темой, созданной на предыдущем шаге.
Требования
Весь код и XML в этом разделе можно найти в примере проекта SplashScreen для этого руководством.
Реализация экрана-заставки
Самый быстрый способ отображения экрана-заставки — создать пользовательскую тему и применить ее к действию, которое покажет экран-заставку. Когда действие отображается, оно загружает тему и применяет рисуемый ресурс (на который ссылается тема) к фону действия. Такой подход позволяет избежать необходимости создавать файл макета.
Экран-заставка реализуется как действие, которое отображает нарисованную марку, выполняет инициализацию и запускает все задачи. После начальной загрузки приложения действие экрана-заставки запускает основное действие и удаляет себя из стека приложения.
Создание рисунка для экрана-заставки
На экране-заставке будет отображаться XML, отображаемый в фоновом режиме для действия заставки. Для вывода изображения необходимо использовать точечный рисунок (например, PNG или JPG).
Пример приложения определяет нарисованный, вызываемый splash_screen.xml. Для этого можно использовать список слоев для центрирования изображения экрана-заставки в приложении, как показано в следующем коде XML:
layer-list В данном случае изображение-заставка выравнивается по цвету фона, заданному @color/splash_background ресурсом. Образец приложения определяет этот цвет в файле Resources/Values/colors.xml :
Дополнительные сведения об Drawable объектах см. в документации Google на устройстве Android.
Реализация темы
Чтобы создать пользовательскую тему для действия на экране-заставку, измените (или добавьте) значения файла/styles.xml и создайте новый style элемент для заставки. Пример файла значений и style.xml показан ниже с style именем мисеме. Splash:
Мисеме. Splash является весьма Spartan – он объявляет фон окна, явно удаляет строку заголовка из окна и объявляет, что он находится в полноэкранном режиме. Если вы хотите создать экран-заставку, который эмулирует пользовательский интерфейс приложения до того, как действие будет расровнить первый макет, можно использовать windowContentOverlay вместо windowBackground в определении стиля. В этом случае необходимо также изменить splash_screen.xml нарисованной, чтобы она отображала ЭМУЛЯЦИЮ пользовательского интерфейса.
Создание действия-заставки
Теперь нам требуется новое действие для запуска Android, которое имеет образ заставки и выполняет любые задачи запуска. Следующий код является примером полной реализации экрана-заставки:
Важно установить NoHistory=true атрибут таким образом, чтобы действие было удалено из стека назад. Чтобы кнопка «назад» не отменила процесс запуска, можно также переопределить OnBackPressed и сделать это не так:
Альбомный режим
Экран-заставка, реализованный на предыдущих шагах, будет правильно отображаться в книжном и альбомном режиме. Однако в некоторых случаях необходимо иметь отдельные экраны-заставки для книжных и альбомных режимов (например, если изображение-заставка находится в полноэкранном режиме).
Чтобы добавить экран-заставку для альбомного режима, выполните следующие действия.
В папке Resources/Draw (ресурсы и нарисованная ) добавьте альбомную версию изображения экрана-заставки, которую вы хотите использовать. В этом примере splash_logo_land.png является альбомной версией эмблемы, которая использовалась в приведенных выше примерах (она использует белую букву вместо синего).
В папке Resources/Draw (ресурсы и нарисованная ) создайте альбомную версию layer-list рисунка, которая была определена ранее (например, splash_screen_land.xml). В этом файле задайте путь к точечному рисунку для альбомной версии изображения экрана-заставки. В следующем примере splash_screen_land.xml использует splash_logo_land.png:
Создайте папку » Resources/Values-Land «, если она еще не существует.
Добавьте файлы colors.xml и style.xml в значения-Land (они могут быть скопированы и изменены из существующих значений/colors.xml и файлов значений и style.xml ).
Выполните сборку и запустите приложение еще раз. Переворачивайте устройство в альбомный режим, пока экран-заставка все еще отображается. Экран-заставка изменится на альбомную версию:
Обратите внимание, что использование экранной заставки с альбомным режимом не всегда обеспечивает удобство работы. По умолчанию Android запускает приложение в книжной ориентации и переходит в альбомный режим, даже если устройство уже находится в альбомном режиме. В результате, если приложение запускается, когда устройство находится в альбомной ориентации, устройство ненадолго отображает портретный экран-заставку, а затем анимируется поворот с книжной страницы на альбомный экран-заставку. К сожалению, этот начальный переход на книжную ориентацию происходит даже при ScreenOrientation = Android.Content.PM.ScreenOrientation.Landscape указании флагов действия Splash. Лучший способ обойти это ограничение — создать одно изображение экрана-заставки, которое правильно визуализируется как в книжной, так и альбомной ориентации.
Сводка
В этом руководством обсуждался один из способов реализации экрана-заставки в приложении Xamarin. Android. а именно, применение пользовательской темы к действию запуска.