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 Дизайнер
Простота реализации + - -
Легкость внесения
изменений
- + +
Поддрежка сложных
изображений
+ - +
Маленький размер
приложения
- + +
Отсутствие
серверной части
+ + -
Спасибо за внимание!
Top Related