пятница, 20 февраля 2015 г.

Как создать интерфейс для Android по макету. Часть 2


Привет! 

Продолжу тему про интерфейс из прошлой статьи. После того как мы получили все необходимые элементы интерфейса из полученного от дизайнера макета, нам нужно сгенерировать  под различные DPI категории Andorid устройств. 

Сейчас я расскажу как это делал я


DPI или (Dots Per Inch) «точек на дюйм» является мерой пространственной плотности точек, первоначально использовавшейся в печати. Это количество капель чернил, которое ваш принтер может вместить в один дюйм. Меньшее DPI дает менее детальное изображение. Более подробно можно прочитать в огромной статье на Хабре.

В Android эффективно используются четыре DPI: MDPI, HDPI, XHDPI и XXHDPI.


Для чего это нужно и что будет, если этого не сделать? 

А будет примерно следующее:


Samsung Galaxy S4


Google Nexus S

Как видно, результат ужасен! И для Google Nexus S (которые имеет экран с меньшим разрешением и DPI) нужно подготовить  картинки с меньшим размером. 

Но кроме этого есть еще планшеты с большим экранами, на которых все картинки будут казаться меньше, соответственно для них нужно подготовить ресурсы бОльшего размера.

И того, как было сказано выше для Android нужно подготовить 4 версии одного и того же изображения. Делать это вручную нереально и глупо. 

В интернете я нашел интересный инструмент, чтобы ускорить этот процесс

Generic Icon Generator

Как им пользоваться.

Переходим по ссылке. Выбираем Source - Image. Далее выбираем Size. Например для иконок, минимальный рекомендуемый размер 48dp. Если, например, иконка должна быть меньше, то делаем ее размер меньше, скажем 36dp и остальные 12dp выставляем в Padding. Теперь ползунок для Color выставляем на 0, для того чтобы цвет нашей картинки не перекрашивался. Как видим, автоматически был добавлен перфикс ic_ как названию картинки. 

Смотрим превью, и если все нормально нажимаем Download Zip. Далее повторяем все тоже для остальных картинок!

Несколько моментов.

1) После того, как размер был выставлен можно прогнать все картинки для данного размера после чего менять размер в настройках и прогонять другие картинки.
2) Прогнать все картинка, после выделить все скачанные архивы и "извлечь их в текущую папку" и затем разом скопировать в Android проект.

Кроме графических ресурсов Android позволяет использоваться различные значения переменных для разных устройств. Как именно Android выбирает из какой папки взять ресурс можно прочитать тут.

Я не уверен, что мой совет ниже будет правильным, но для тех устройств, на которых я проверял неплохо работают следующие модификаторы:


В категорию hdpi попали телефоны с низким разрешением (Nexus S и Liquid mt 120). Это для них я выставлял самые минимальные отступы.

xhdpi - Nexus 6 - практически все параметры были такие же как и в large кроме размера шрифтов.

Ну и в large попал мой S930 и планшеты. Собственно тут можно выставлять большие отступы и шрифты.

После всех изменений и подстроек имеем вот такой результат:






На этом пока все! А в следующей, заключительной статье я расскажу как используя Espresso и Spoon можно удобно проверять правильность разметки на всех разрешениях автоматически.

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




1 комментарий: