Draw 9-patch

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

Утилита Draw 9-patch находится в папке tools (файл draw9patch.bat).

Утилита работает с png-файлами и сохраняет в формате .9.png - растровые изображения формата nine-patch.

NinePatch — разновидность PNG-файлов, которые содержат рамку толщиной в один пиксел. Данная рамка описывает область, которая может растягиваться при изменении размеров изображения. Чтобы создать ресурс NinePatch, нарисуйте по его левому и верхнему краям изображения черные полоски толщиной в один пиксел, описывающие растягиваемый участок. Части рисунка, не отмеченные подобным образом, останутся прежними; изменения размеров изображения будут пропорционально влиять на относительные размеры помеченных участков. С помощью данного редактора не получится нарисовать кота, программа создана для других целей.

Идентификатор ресурсов для NinePatch — это имя файла без окончания .9.png.

Название 9-patch происходит от сетки 3х3, которая условно разбивает изображение на 9 частей. У изображения по краям есть прозрачные полосы шириной в один пиксель. Закрашивая участок этой полосы, мы даём понять, как можно масштабировать изображение. Главное в готовом изображение - область контента и растягиваемая область.

Пример

Предположим, есть картинка

Откроем приложение и загрузим картинку (File –> open 9-patch).

С помощью мыши закрасьте участок в однопиксельной границе по периметру изображения.

Чтобы стереть нарисованное нужно удерживать клавишу Shift.

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

Сохраните изображение с правильным расширением.

Поместите изображение в папку res/drawable вашего проекта. Путь к файлу будет таким: res\drawable\nine_patch_button.9.png.

Код для кнопки в разметке:

<Button
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/nine_patch_button"
    android:text="Я кнопка">
</Button>

В зависимости от размеров экранов на разных устройствах, кнопка будет корректно масштабироваться.

Кнопка в виде стрелки

Также можно создать кнопку в виде стрелки.

Дополнительное чтение

Страница документации: http://developer.android.com/intl/ru/tools/help/draw9patch.html
Использование растровых изображений nine-patch (рус.)
Advanced 9Patch drawing in android | Hello Android
Улучшенный 9-patch редактор
9patch images in Android | Dibbus.com
Apple look on Android, the horror! | Dibbus.com

Реклама