Важно (9.07.22)

Если картинки в постах не отображаются, зайдите в блог через прокси. РКН заблокировал поддомены blogger.com на которые загружались картинки.

пятница, 7 марта 2014 г.

Добавляем Splash Screen в приложение для Android

Splash Screen используется для того чтобы не видеть черный экран при запуске приложения. Ниже вы узнаете, как легко создать такую «заставку». Примечание: это один из возможных вариантов создания Splash Screen. За тему для этой заметки благодарю Балашова Валерия.

Upd (07.03.14). Дополнение из комментариев.
Update (17.03.14). Дополнение по выравниванию картинки
Update (18.03.14 0:35). Изменяем цвет фона под прозрачной картинкой
Update (25.11.14). В XE7 встроена возможность добавления заставки. Читайте справку и мою статью Как добавить "резиновый" SplashScreen в XE7

Начнём.
Что нужно сделать:
  1. Создать картинку (splash.png), которую задеплоим в папку «res\drawable\»
  2. Создать файл стиля (style.xml), который задеплоим в папку «res\values\»
  3. Внести маленькое изменение в файл «AndroidManifest.template.xml»
Создание файлов.
Создаём картинку в Photoshop’е или в любом удобном для вас редакторе. Для примера, я сделал картинку «Powered by Delphi XE5» с разрешением 768x1024.

Создаём файл стиля в любом текстовом редакторе (я использую Notepad++) и вписываем туда:
<resources>
<style name="MyTheme.NoTitleBar.CustomBackground" parent="@android:Theme.Holo">
  <item name="android:windowBackground">@drawable/splash</item>
  <item name="android:windowNoTitle">true</item>
  <item name="android:windowFullscreen">true</item>
</style>
</resources>

Теперь необходимо задеплоить эти файлы в проект:

Жмём «Ctrl + F9» для компиляции проекта и создания файла «AndroidManifest.template.xml».

Вносим изменение в файл «AndroidManifest.template.xml».
Открываем файл «AndroidManifest.template.xml» и ищем строчку «android:theme="%theme%"» и заменяем её на строчку «android: theme = "@style/MyTheme.NoTitleBar.CustomBackground"». Сохраняем файл.

Теперь компилируем и запускаем приложение на устройстве (эмуляторе), смотрим результат.

Исходный код: Скачать с Google Drive

Update (07.03.14). Запрещаем растягивать картинку.
Делается все по инструкции, но создается еще один файл "splash_centered.xml". Деплоится так же в "res\drawable\".
Его содержимое:
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
    android:src="@drawable/splash"
    android:gravity="center"/>


После этого в файле "style.xml" строку

<item name="android:windowBackground">@drawable/splash</item>

меняем на

<item name="android:windowBackground">@drawable/splash_centered</item>

все, теперь изображение по центру и имеет оригинальные размеры.

Update (17.03.14). Дополнение, к предыдущему обновлению.
Для того чтобы управлять положением и размерами картинки нужно использовать атрибут «android:gravity». Можно указывать несколько значений для этого атрибута, для этого используйте вертикальную черту «|». Значения, которые можно указывать в этом атрибуте: http://developer.android.com/reference/android/graphics/drawable/BitmapDrawable.html#attr_android:gravity
Для примера, я выставляю вместо этого значения «android:gravity="center"» (отображаем по центру и с оригинальными размерами) вот это «android:gravity="fill"» и картинка начинает подстраиваться под размеры дисплея.

Update (18.03.14 0:35). Изменяем цвет фона под прозрачной картинкой
Как добавить другой цвет фона и прозрачную картинку. Способ работает на моём устройстве, но я не проверял на соответствие правилам Гугла.
Пример:
Не обращайте внимания на надпись и цвета, это всё сделано на скорую руку, для примера.
Картинка на видео - это надпись размеры 320x160, фон прозрачный.

Что необходимо:
Если вы выполнили предыдущие Update’ы и вам необходимо сменить цвет фона, т.к. через прозрачную картинку видно чёрный фон, то читаем дальше.

Сейчас у вас имеется 3 файла, которые вы задеплоили:
style.xml - res\values\
splash.png - res\drawable\
splash_centered.xml - res\drawable\

Чтобы изменить фон за картинкой, нам необходим ещё один файл:
color.xml – деплоим в res\values\
внутри пишем(например):
<?xml version="1.0" encoding="utf-8"?>
<resources>
   <color name="blue">#ff324adb</color>
</resources>

Описание:
«blue» - имя цвета, к нему будем обращаться из style.xml
«#ff324adb» - ff – это уровень прозрачности в шестнадцатеричной системе исчисления(макс. 255 = ff = не прозрачно); «324adb» - это цвет

Далее вносим изменения в файл style.xml:
Добавляем новую строчку: "android:background" и изменяем старую "android:windowBackground"
<resources>
<style name="MyTheme.NoTitleBar.CustomBackground" parent="@android:Theme.Holo">
  <item name="android:background">@drawable/splash_centered</item>
  <item name="android:windowBackground">@color/blue</item>
  <item name="android:windowNoTitle">true</item>
  <item name="android:windowFullscreen">true</item>
</style>
</resources>




Данная статья основана на корейской (안드로이드 테마를 이용한 Splash Window 구현) и китайской (http://www.cnblogs.com/ChinaEHR/p/3368299.html) статьях.

Автор: на
Ярлыки: , , , ,