суббота, 6 октября 2012 г.

Nine-patch изображения

При разработке UI интерфейса приложения, часто мы сталкиваемся с необходимостью растягивания изображения в связи с разными размерами Android-устройств. Многие изображения могут быть с закругленными краями или со сложным рисунком, которые при увеличении дают разные артефакты в виде шумов или размытости. Этого можно избежать, используя Nine-patch изображения

Теория

Такие изображения представляются классом NinePatch. Он позволяет рисовать растровые изображения в девять частей. Четыре угла не масштабируются; четыре ребра масштабируется по одной оси, а середина масштабируется по обеим осям. Как правило, среднина является прозрачной. По сути, это позволяет создавать пользовательскую графику, которая будет масштабироваться так, как вы установите.
С точки зрения изображений, Nine-path – это обычное изображение (.png), в котором края размером в 1 пиксел содержат служебную информацию для графической подсистемы Android.
Она разделяется на две части:
  • информация для корректного масштабирования блока;
  • информация об области размещения контента в блоке.
При отсутствии первой – изображение будет масштабироваться целиком, второй – контент будет размещаться по всей площади изображения.
Верхняя и левая часть рамки задают масштабируемые области, правая и нижняя – область отображения контента. При этом прозрачные пикселы обозначают неотмеченную область, а черные – отмеченную.

Создание


Создание таких изображений рассмотрим на примере такого изображения:
Nine-patch изображения

Чтобы сделать из этой обычной картинки 9-patch можно воспользоваться любым графическим редактором, поддерживающим *.png или специальной утилитой draw9patch, которая расположена в папке tools в месте установки Android SDK.
В нашем примере используем Android утилиту для работы с такими изображениями. Открыть изображение можно через пункт меню File > Open 9-patch. Теперь нарисуем повторяемые области и область размещения контента.
Nine-patch изображения

В правой части утилиты отображается результат масштабирования нашего изображения.
Теперь необходимо сохранить полученное изображение c расширением *.9.png и добавить в проект (в папку /drawable).

Примеры

Nine-patch изображения - примерыNine-patch изображения - примерыNine-patch изображения - примеры

Nine-patch изображения - примерыNine-patch изображения - примерыNine-patch изображения - примерыNine-patch изображения - примеры

Nine-patch изображения - примерыNine-patch изображения - примерыNine-patch изображения - примерыNine-patch изображения - примеры

Nine-patch изображения - примерыNine-patch изображения - примерыNine-patch изображения - примерыNine-patch изображения - примеры
    

Ссылки


  • Примеры изображений в одном архиве: zip

Комментариев нет:

Отправить комментарий