How to deal with different screen resolutions. Practical advices.

Демьянов Артём

• 3 года на рынке мобильных приложений

• Команда из 10 человек

• Специализация – детские приложения

• Присутствуем на всех платформах

Windows Store

Blackberry World

Проблема

Подготовка графического контента для приложений

• Разнообразие платформ

• Огромное количество экранов

Пример изображений

Неадаптированное Адаптированное

Проблема

В чем сложность:

• Отрисовка под каждый экран

• Нарезка / верстка / редактирорвание

• Тестирование под кажый экран

Все это выливается во время, людей и деньги

Наш путь

Нам повезло!

● Экраны были маленькие и их было мало

● Добавляли новые экраны по мере их появления

● С ростом количества экранов поняли, что надо что-то

менять

Наши решения

1.Подготовка контента под каждый экран

2.Используем векторные изображения

3.Автоматизируем процесс с помощью конструктора

1. Подготовка контента под каждый экран

+ нужные изображения выбираются сами

+ все изображения в одном приложении

- сложность сборки и редактирования

- большой объем приложения

Через 10 лет

2. Используем векторные изображения

SVG svg = SVGParser.getSVGFromResource(getResources(), R.raw.filename);

Drawable drawable = svg.createPictureDrawable();

imageView.setImageDrawable(drawable);

Библиотека svg-android-2

Плюсы и минусы

+ одна копия изображения

+ маленький размер

+ отличное качество

- только простые изображения

- сложность внедрения

- ограничение формата

3. Автоматическая подготовка графического контента

Наша собственная разработка – дизайнер и сборщик графического контента

Как это работает

Визуальная сборка контента

Мультиэкранность

Мультиэкранность

Просмотрщик

Технические детали

• Написано на java (swing), кроссплатформенное

• Сборки раньше были на ftp, теперь полностью

переехали на Windows Azure

• Сборка одного журнала ~10мин

+ Скорость

+ Простота

+ Качество

BufferedImage scaledImage = Scalr.resize(image, Scalr.Method.SPEED, 150, 100);

Библиотека imgscalr

Дизайнер контента

+ подготовка контента непрограммистом

+ платформонезависимость

+ легкое обновление и редактирование контента

- нужен сервер для хранения

- программная логика по скачиванию

- время на разработку дизайнера

Выводы

Drawable folder SVG Дизайнер

Простота реализации + - -

Легкость внесения

изменений

- + +

Поддрежка сложных

изображений

+ - +

Маленький размер

приложения

- + +

Отсутствие

серверной части

+ + -

Спасибо за внимание!