вторник, 14 октября 2014 г.

Как добавить "резиновый" SplashScreen в XE7

Как известно, в XE7 упростили возможность добавления заставки (SplashScreen) для нашего приложения. В этой заметке я расскажу как добавлять «статичную» и «резиновую» заставки. Данная заметка будет интересна тем, кто не умеет читать по-английски или просто не читает справку по студии. По большей части, эта заметка является вольным переводом справочного материала, с некоторыми добавлениями от меня.

Update (14.10.14): Добавил ссылку на архив с примером.
Update (14.10.14): Добавил дополнение к правилу №3 
Update (16.10.14) Добавил информацию о "резиновой" заставке на весь экран (FullScreen)


Общие правила для двух типов заставок.
  1. Картинки добавлять необходимо через меню «Project > Options > Application» вкладка «Artwork». Перед этим, не забудьте выбрать платформу.
  2. Добавляемые картинки должны быть строго определённого разрешения. Это «426x320», «470x320», «640x480», «960x720».
  3. Картинки должны быть в формате «png»
  4. Далее пункты разделяются….

Статичная заставка.
Мы можем задать режим отображения картинки (disabled, clamp, repeat, mirror), подробности в Android API
Можем указать «Splash gravity», как отображать картинку, если её размер меньше чем размер экрана.

Резиновая заставка.
Данный метод очень хорошо подходит в ситуации, когда вы хотите выводить логотип компании на фоне, цвет которого отличается от чёрного и без растягивания самого логотипа.

Чтобы сделать заставку, при которой ваш логотип на картинке будет всегда статичным, а всё остальное будет растягиваться необходимо, создать 9-patch изображения. Данные изображения содержат служебную информацию в четырёх дополнительных пикселях.

Изображения содержат информацию о блоках отображения картинки. Это блок масштабирования и блок контента.
  • Блок масштабирования – определяет области изображения, которые будут растягиваться.
  • Блок контента – определяет область изображения, где будет отображаться контент (в нашем случае форма, об этом чуть позже). 

Правило №0. Два пикселя (слева и сверху) – говорят о том, какая часть изображения будет растягиваться. Два пикселя (снизу и справа) – определяют область контента.
Правило №1. Всегда готовим картинки с разрешением меньше необходимого на 2 пикселя с каждой стороны. Пример: Нужно добавить 426x320, значит, создаём картинку 424x318.
Правило №2. Пиксели, определяющие блоки, закрашиваются чёрным цветом.
Правило №3. (В нашем случае.) Область контента всегда должна иметь размеры всей картинки. Иначе, в результате неправильной разметки области контента форма будет неправильно отрисовываться. Будьте внимательны с этим правилом, я уже успел попасться на нём.
Дополнение в правилу №3: Если использовать вторую утилиту (об этом ниже), то область контента - это синяя область, а растягиваемая область - это зелёная область.

Рассмотрим пример из справки. Картинка в чёрном цвете, но нам сейчас это не важно.
Из этого примера следует, что:
  1. Stretchable Area – области изображения, которые будут растягиваться. В данном случае будет растягиваться всё, кроме логотипа (пламени/огня).  
  2. Padding Box – стороны закрашены полностью, а значит область контента равна размеру изображения (Правило №3)
Как это лучше понять, возьмём каждую сторону и мысленно проведём горизонтальные и вертикальные линии от начала и конца каждой чёрной линии. Выглядеть это будет примерно так (белые линии):
Теперь посмотрим утилиты, которые специально разработаны для создания картинок с расширением «.9.png». 
  1. Встроенная утилита «draw9patch», находится тут «C:\Users\Public\Documents\Embarcadero\Studio\15.0\PlatformSDKs\adt-bundle-windows-x86-20131030\sdk\tools\lib». Позволяет открывать png картинки, вручную закрашивать нужные области и сохранять с расширением «.9.png».
  2. Утилита, написанная сторонним разработчиком, пользователем HabraHabr’а. Страничка с описанием утилиты: http://habrahabr.ru/company/alee/blog/136667/. Утилита позволяет разметить области (зелёные (растягиваемые) и синие (контент)), не закрашивая при этом вручную пиксели, всё происходит автоматически. Сохраняет картинки с расширением «.9.png».

Я использую вторую утилиту и всем советую её, т.к. очень удобно и быстро.

Значит, что мы делаем:
  1. Создаём картинки размерами на 2 пикселя меньше (по ширине и высоте) чем требует студия и сохраняем в png формате
  2. Открываем эти картинки в любой утилите или вообще всё делаем в фотошопе.
  3. Размечаем области и сохраняем с расширением «.9.png»
  4. Добавляем картинки в проект (этот шаг рассмотрен ниже, более подробно)
Добавление «.9.png» картинок в проект:
  1. Заходим в меню «Project > Options > Application»
  2. Выбираем платформу «All configurations – Android platform»
  3. Во вкладке «Artwork», прописываем пути до картинок с расширением «.9.png»
  4. Проверяем галочку «Include splash image», она должна быть установлена
  5. Собираем проект, в «Project Manager» выбираем «Android» и жмём «Build»
  6. Идём в меню «Project > Deployment», выбираем платформу «Debug configuration – Android platform»
  7. Снимаем галочку с файла «splash_image_def.xml»
  8. Далее есть два способа добавления/использования наших новых картинок
Способ №1.
Не забываем снять галочку с файла «splash_image_def.xml».
В «Deployment Manager» находим все наши картинки и меняем имя в столбце «Remote Name», с имени «splash_image.png» на «splash_image_def.9.png» для каждой картинки.
Всё, компилим проект и радуемся.

Способ №2.
Этот способ связан с созданием своего файла «splash_image_def.xml».

Не забываем снять галочку со стандартного файла «splash_image_def.xml».
Меняем имена картинок в столбце «Remote Name», с имени «splash_image.png» на «splash_image.9.png» для каждой картинки.
Создаём в любом текстовом редакторе (например: Notepad++) файл с именем «splash_image_def.xml» и содержанием:
<?xml version="1.0" encoding="utf-8"?>
<nine-patch
xmlns:android="http://schemas.android.com/apk/res/android"
android:src="@drawable/splash_image"
android:dither="true"/>

Сохраняем в папке с проектом.
Заходим в «Deployment Manager» и добавляем этот файл. В столбце «Remote Name» прописываем имя «splash_image_def.xml» и в столбце «Remote Path» прописываем путь «res\drawable\».
Всё, компилим проект и радуемся.


Update (16.10.14 17:03) Заставка на весь экран (без статус бара)
Выяснилось, что сплешскрин в Delphi XE7 сделан по способу, который я описывал для версии XE5. (XE5: Добавляем Splash Screen в приложение для Android)
Если вы хотите чтобы сплешскрин растягивался на весь экран, т.е. статус бар не было видно, то следующая инструкция для вас:
1) Создаём файл «styles.xml» и прописываем в нём
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<style name="AppTheme" parent="@android:style/Theme.NoTitleBar">
<item name="android:windowBackground">@drawable/splash_image_def</item>
<item name="android:windowNoTitle">true</item>
<item name="android:windowFullscreen">true</item>
</style>
</resources>
Сохраняем в папке/подпапке с проектом.
2) Заходим в меню «Project > Deployment», снимаем галочку со стандартного файла «styles.xml».
3) Добавляем (деплоим) наш файл «styles.xml», в столбце «Remote Path» прописываем путь «res\values\»
4) Компилим наш проект и наслаждаемся заставкой на весь экран.


Итог: Теперь вы умеете создавать резиновые заставки.

Исходный код: Скачать с Google Drive
Копия второй утилиты: Скачать с Google Drive


Материал на английском языке:
http://docwiki.embarcadero.com/RADStudio/XE7/en/Application_Options#Splash_Images

7 комментариев:

  1. Здравствуйте! А если у меня фон изображения не черный, а белый, как тут быть?Уже весь мозг изымел. Не получается. То растягивается бог знает как, то еще какая оказия.
    Я делал так. Направляющими выделял свой логотип и сохранял. Или надо оставлять так как предлагает редактор (пользовался из пункта 2). Но в таком случае растягивание происходит по всей высоте.

    ОтветитьУдалить
  2. Сейчас посмотрел Ваш проект, у Вас там белый фон на огоньке. Если можно киньте скриншот из Nine-patch editora, как Вы разметку делали. Спасибо.

    ОтветитьУдалить
    Ответы
    1. По поводу первого вопроса, про фон. Смотрите пример, там картинка с белым фоном. Но это вы уже и сами видите.
      Второй вопрос, скриншот приложу ниже, но вы и сами можете посмотреть как делал я, откройте картинки из примера, редактор сам подхватит разметку картинки.
      Скриншоты:
      https://drive.google.com/file/d/0BwEZB8sRo0DSSUp1WXBIUGpPU1k/view?usp=sharing
      https://drive.google.com/file/d/0BwEZB8sRo0DSa01wQXUwdGdiZEU/view?usp=sharing

      Удалить
    2. Спасибо за оперативный ответ, только я понять не могу, а откуда дополнительные линии берутся?
      У меня их 8, у Вас - 12...

      Удалить
  3. Все, спасибо, разобрался. Надо правую мышу жать.

    ОтветитьУдалить
  4. Добрый день...., Как вообще его отключить?

    ОтветитьУдалить
  5. Внимание, фон картинки должен быть прозрачный, если фон черный, то программа (ту что рекомендует автор как более удобную) не добавляет доп. пиксели.

    ОтветитьУдалить