Андроид Блог by Snowpard: Nine-patch изображения

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

Теория

Такие изображения представляются классом NinePatch. Он позволяет рисовать растровые изображения в девять частей. Четыре угла не масштабируются; четыре ребра масштабируется по одной оси, а середина масштабируется по обеим осям. Как правило, среднина является прозрачной. По сути, это позволяет создавать пользовательскую графику, которая будет масштабироваться так, как вы установите.

С точки зрения изображений, Nine-path – это обычное изображение (.png), в котором края размером в 1 пиксел содержат служебную информацию для графической подсистемы Android.

Она разделяется на две части:

информация для корректного масштабирования блока;
информация об области размещения контента в блоке.

При отсутствии первой – изображение будет масштабироваться целиком, второй – контент будет размещаться по всей площади изображения.

Верхняя и левая часть рамки задают масштабируемые области, правая и нижняя – область отображения контента. При этом прозрачные пикселы обозначают неотмеченную область, а черные – отмеченную.

Создание

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

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

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