Изображение NinePatch - это специальное PNG-изображение, которое позволяет системе Android автоматически изменять размер изображений в соответствии с содержимым без каких-либо искажений и растягивания. Это позволяет разработчикам создавать масштабируемые элементы пользовательского интерфейса, такие как кнопки, индикаторы выполнения и фоновые изображения, которые не имеют множества наборов ресурсов для разных размеров экрана.
Создание NinePatch изображения
Draw 9-patch - это инструмент в Android Studio для создания и редактирования изображений NinePatch. Он позволяет разработчикам интуитивно рисовать черные пиксельные линии вдоль границ и просматривать, как выглядит изображение при разных размерах. Помимо инструментов, входящих в состав Android Studio, существует множество онлайн-ресурсов и приложений для создания изображений NinePatch, таких как 9 Patch Editor.
Использование изображений NinePatch
Использовать изображения NinePatch в приложениях для Android довольно просто: вы добавляете их в папку res/drawable проекта, а затем ссылаетесь на них, используя android:background в вашем XML-файле макета. Например:
<Button android:id="@+id/tiny"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerInParent="true"
android:text="Tiny"
android:textSize="8sp"
android:background="@drawable/my_button_background"/>
<Button android:id="@+id/big"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerInParent="true"
android:text="Biiiiiiig text!"
android:textSize="30sp"
android:background="@drawable/my_button_background"/>
Будьте внимательны, layout_width и layout_height должны быть wrap_content, чтобы кнопки аккуратно отображались с текстом.
Далее показаны две кнопки, отрисованные с помощью XML и изображений NinePatch. Как видно на рисунке выше, обратите внимание, как ширина и высота кнопок меняются вместе с текстом, в то время как фоновое изображение растягивается в соответствии с экраном.
Сценарии использования NinePatch
-
Фоны кнопок: Это наиболее распространенный вариант применения Drawables. Поскольку длина текста может варьироваться в разных кнопках, NinePatch гарантирует, что фоновое изображение может быть полностью покрыто и не выходит за пределы границ и не деформируется вместе с кнопкой от позиции текста внутри. Например, если у нас есть фоновый рисунок кнопки с круглыми углами, мы будем использовать NinePatch, и независимо от длины текста кнопки, круглые углы останутся неизменными.
-
Фоны индикаторов выполнения: Он растягивает фоновое изображение по фиксированному единичному расстоянию с индикатором выполнения, где единичные расстояния различны и меняются в зависимости от загрузки от одной системы к другой. NinePatch обеспечит, что стиль фонового изображения не будет искажаться при растяжении.
-
Фон для элемента списка: В представлении списка фоны этих элементов списка должны быть разными в зависимости от длины содержимого, помещенного в представление. NinePatch гарантирует, что фоновые изображения будут растягиваться довольно красиво без искажений.
-
Фоны для окон диалога: В таких случаях размер диалога меняется в зависимости от содержания. NinePatch гарантирует, что фоновые изображения будут растягиваться последовательно в одном и том же стиле.
-
Масштабируемый разделитель: С помощью NinePatch пользователь может создать горизонтальный или вертикальный растягиваемый разделитель, подходящий для различных размеров экрана и адаптируемости макета.
-
Фоны пользовательских форм: NinePatch создает множество фонов пользовательских форм, таких как закругленные углы, тени и т. д., с различными специальными эффектами, без каких-либо изменений в этих эффектах при растяжении.
Преимущества NinePatch
- Масштабируемость: Это самое большое преимущество NinePatch. Автоматически меняет размер в зависимости от содержимого, что устраняет необходимость поддерживать несколько наборов ресурсов для разных размеров экрана и длин содержимого.
- Избежание искажений: Управление координатами растягиваемой области предотвращает растяжение изображений. Свойства четкости и красоты сохраняются в большинстве случаев.
- Повышенная эффективность: Меньше файлов ресурсов и, следовательно, повышенная эффективность разработки.
- Гибкая компоновка: Можно легко создавать UI элементы различных форм и размеров в соответствии с различными требованиями к макету.
Принцип работы NinePatch
Отличительной чертой изображения NinePatch является узкая граница в один пиксель. Эта граница определяет масштабируемость и область содержимого изображения. Рисование черных пиксельных линий на краях указывает, какая часть должна растягиваться по периферии, какая вертикально, а какая горизонтально.
В частности, граница в 1 пиксель делится на четыре части:
1. Левая граница (вертикальная черная пиксельная линия):
-
Функция: Управляет вертикальным растяжением изображения. Вертикальная черная пиксельная линия на левой границе определяет, какие области изображения можно растягивать вертикально.
-
Например:
-
Без черной пиксельной линии: Высота изображения фиксирована, поэтому оно не способно к вертикальному растяжению. Если его пытаются поместить в контейнер, который выше самого изображения, оно останется как есть и может иметь пустые области или будет обрезано.
-
Одна черная пиксельная линия: Изображение можно растягивать вертикально, но только в пределах областей, указанных черными пиксельными линиями. Например, если черная пиксельная линия расположена в середине левой границы, это будет означать, что верхняя и нижняя половины не изменятся, а вертикальное растяжение будет разрешено только в средней части.
-
Несколько черных пиксельных линий: Можно определить несколько вертикальных растягиваемых областей. Например, на левой границе будет две черных пиксельных линии, которые разделят изображение на три части в центре растягиваемых частей, а верхняя и нижняя части останутся неизменными.
-
2. Верхняя граница: (Горизонтальные черные пиксельные линии):
-
Функция: Контролирует горизонтальное растяжение изображения. Горизонтальная черная пиксельная линия в верхней границе определяет растягиваемые части изображения в горизонтальном измерении.
-
Например:
-
Без черной пиксельной линии: Ширина изображения фиксирована и не растягивается по горизонтали. Подобно случаю без черной пиксельной линии на левой границе, изображение просто останется прежним, но может иметь пустые области или быть обрезано.
-
Одна черная пиксельная линия: Изображение может растягиваться по горизонтали, но опять же, только в области, указанной черной пиксельной линией. Например, если черная пиксельная линия находится в середине верхней границы, левая половина изображения не изменится, как и правая половина, и будет допускаться только растяжение в середине.
-
Несколько черных пиксельных линий: Определяет различные боковые растягиваемые области. Как и в случае с левой границей с различными горизонтальными черными пиксельными линиями, она делит изображение на множество частей, и любой участок, отмеченный таким образом, может растягиваться по горизонтали.
-
3. Правая граница (вертикальные черные пиксельные линии):
-
Функция: Определяет правый отступ области содержимого. Вертикальные черные пиксельные линии на правом поле указывают правую границу области содержимого изображения. Во время растяжения правая сторона области содержимого останется на этой границе.
-
Примеры:
-
Без черных пиксельных линий: Область содержимого простирается до правого поля изображения, не сгибаясь при растяжении содержимого, оставляя содержимое изображения простирающимся до правого края.
-
Одна черная пиксельная линия: Правый край области содержимого определяется положением черной пиксельной линии. При растяжении правая сторона области содержимого удерживается на месте черной пиксельной линией, а пространство справа растягивается.
-
4. Нижняя граница (горизонтальная черная пиксельная линия):
-
Функция: Определяет нижнее поле области, в пределах которой ограничено содержимое. Горизонтальная черная пиксельная линия внизу определяет, где заканчивается нижняя граница области содержимого изображения. Нижняя часть области содержимого останется на этой границе при растяжении.
-
Пример:
-
Без черной пиксельной линии: область содержимого простирается до нижнего края изображения. При растяжении все содержимое изображения растягивается до нижнего края.
-
Одна черная пиксельная линия: нижняя граница области содержимого определяется положением черной пиксельной линии. При растяжении нижняя часть области содержимого останется на уровне черной пиксельной линии, а пустое пространство внизу будет растягиваться.
-
Используя продуманные черные пиксельные линии на этих четырех границах, программист может точно контролировать, как изображение Nine Patch отображается при различных размерах, обеспечивая при этом, что оно не деформируется и не теряется область содержимого. Имейте в виду, что эти пиксельные линии являются границами определения растягиваемой области от области содержимого, а не фактическими границами изображения. Части без черных пиксельных линий являются компонентами фиксированного размера.
Заметки
- Изображение NinePatch должно быть сохранено с именем файла, заканчивающимся на
.9.png. - Для того чтобы изображение не исчезало при масштабировании, необходим минимальный размер 2x2 пикселя в растягиваемой области.
- Дополнительное безопасное пространство по краям растягиваемой области может устранить изменения цвета, возникающие при масштабировании.
- Обязательно тщательно проверьте растягиваемые области и области содержимого изображения, чтобы оно правильно отображалось при различных размерах.
- Не злоупотребляйте изображениями NinePatch, особенно в анимированных интерфейсах или тех, которые часто меняются, поскольку они снижают производительность.
Резюме
Изображения NinePatch являются мощным инструментом для повышения эффективности UI дизайна и улучшения пользовательского опыта в приложениях для Android. Однако это не означает, что разработчикам не придется балансировать преимущества и ограничения, поскольку выбор типа изображения зависит от требований. Например, даже если изображения NinePatch являются правильным выбором для масштабируемых фонов или UI элементов, которые должны принимать различную длину текста, обычные изображения PNG вполне подойдут для статических фоновых изображений - их простота является преимуществом. При использовании NinePatch необходимо проявлять максимальную осторожность при проектировании и тестировании, чтобы обеспечить его отличную работу на различных устройствах и размерах экрана.