Создание и использование 9-патч-изображений в Android
Я недавно слышал о 9-патч изображениях. Я знаю его 9 плиточный и растягивается. Я хотел бы узнать больше об этом.
How can I create a 9-patch image?
Is there any tool? Can I create it from AndroidSDK or code?
Main Advantages of 9-patch over regular png?
(is it stretchable dynamically/ automatically according to screen?)
8 ответов
Сегодня я обнаружил девять изображений патчей. Полагаю, официальная документация (ссылка на которую содержится в других ответах) в порядке, но в ней действительно не хватает примеров.
В этом небольшом уроке есть несколько замечательных примеров, которые отвечают на вторую часть вашего вопроса, объясняют, как работает масштабирование - не только для кнопок - но и для фреймов, и у него есть полный пример проекта, который вы можете скачать и поиграть. Наиболее важным преимуществом по сравнению с PNG является то, что девять патч-изображений могут указывать несмежные области для масштабирования.
Чтобы ответить на первую часть вашего вопроса, SDK (а теперь и Android Studio) поставляется с "Draw 9-patch" ("draw9patch" в папке инструментов SDK), который является простым редактором. Вот хороший, который также с открытым исходным кодом. У него есть простое, но умное изображение по умолчанию.
В большинстве примеров рассказывается о создании образа из 9 патчей, но детали реализации обычно остаются на высоком уровне.
Пост Ника выше - с хорошим учебником из 9 патчей, который предоставляет рабочий файл загрузки проекта, сохранив день.
Вот основные детали реализации, которые сработали для меня (как только у вас будет готов 9-патч-образ):
Назовите отрисовку с именем, но не включайте.9.png (автоматическое заполнение в Eclipse позаботится об этом)
Убедитесь, что в основной папке / папке для рисования есть только 1 изображение (не версия для каждой папки dpi)
Изображение должно быть указано с использованием: background, а не: src (это застало меня на некоторое время)
android:background="@drawable/splash_logo"Убедитесь, что изображение и макет, которые его содержат, используют:
android:layout_width="fill_parent"
android:layout_height="fill_parent"
Как я могу создать 9-патч изображение? Есть ли какой-нибудь инструмент? Могу ли я создать его из AndroidSDK или кода?
При поиске в основной поисковой системе android 9-patch tool, самый первый хит для страницы документации для разработчиков Android на draw9patch инструмент
Основные преимущества 9-патча перед обычным png? (растягивается ли он динамически / автоматически в соответствии с экраном?)
Документация для разработчиков Android содержит другие страницы, которые описывают файлы PNG из девяти патчей. Эта документация включает такие отрывки, как:
Графический объект NinePatchDrawable - это растягиваемое растровое изображение, которое Android автоматически изменит в соответствии с содержимым представления, в котором вы поместили его в качестве фона. Примером использования NinePatch являются фоны, используемые стандартными кнопками Android - кнопки должны растягиваться для размещения строк различной длины.
С 9-патч изображения вы можете выбрать, какая часть вашего изображения может быть растянута. Это должно быть изображение в формате png, а имя должно заканчиваться на.9.png (что-то.9.png)
http://developer.android.com/tools/help/draw9patch.html
Простой инструмент для всех плотностей:
http://android-ui-utils.googlecode.com/hg/asset-studio/dist/nine-patches.html
1.Что такое изображения NinePatch?
Изображения NinePatch - это изображения PNG, которые отмечают части изображения, которые можно растянуть. У них есть расширение как image_name.9.png,
2. Где они хранятся в Android-проекте?
res/drawable/image_name.9.png
3. Как создать изображение NinePatch для вашего приложения для Android?
Android SDK включает в себя WYSIWIG draw9patch.jar инструмент внутри вашего Android SDK /tools папка.
Это хороший инструмент: нажмите здесь.
9 Патч-изображения - это растягиваемые, воспроизводимые изображения, уменьшенные до минимального размера. Простейшим примером будет, если вы возьмете округленный div и разделите его на 9 квадратов, как если бы вы играли в крестики-нолики. Четыре угла не изменили бы размеры вообще, но были бы статическими, в то время как другие 5 частей были бы растянуты или повторены, чтобы позволить целому изображению масштабироваться соответственно.
С этим объяснением и появлением CSS3 вы можете подумать, что нет причин использовать 9 изображений патчей, но название "9 патчей" является неправильным. Изображения могут быть нарезаны на еще более мелкие кусочки.
9 Патч-изображения содержат индекс того, какой кусок, добавив к изображению границу в 1 пиксель. Цвета на границе определяют, является ли фрагмент статичным (не масштабируется), растягивается или повторяется.
Слайд-шоу Google: https://docs.google.com/present/view?id=dc7ghz8w_34f8338rcg
См. Также информацию для разработчиков Android об изображениях из 9 патчей: http://developer.android.com/guide/topics/graphics/2d-graphics.html
Основные преимущества 9-патча над обычным png
На самом деле изображения 9 Patch представляют собой растягиваемые, повторяющиеся изображения, уменьшенные до минимального размера. Изображение не будет растягиваться и теряет пропорции на экранах разных размеров. Еще одно и самое большое преимущество - память.
Память одинакового размера может быть использована для устройств с разными размерами экрана. Хорошо разработанные 9-патч-образы менее подвержены ошибкам и имеют многократное использование.
Шаг 1. Поскольку вы еще не знакомы, подготовьте большое изображение в формате xxxhdpi png, чтобы поэкспериментировать сначала.
Шаг 2. Это расширяемое поле желаемого изображения должно быть короче (путем удаления избыточной / повторяющейся части цвета), насколько это возможно, поскольку в 9-патче нет такой вещи, как "уменьшить", но "расширить" изображение.
Я лично использую инструмент командной строки ImageMagick для его преобразования, например:
convert -trim 'my_image.png' png32:my_image_trim.png #trim extra transparent surrounded image
rm lala*; convert my_image_trim.png -crop 310 +repage +adjoin png32:lala%02d.png #cut redundant/repeat center part
convert +append lala02.png lala05.png png32:out_right.png #append left/right images side by side
convert -resize 144x144\! out_right.png png32:my_image.png #resize to the desired dpi
При конвертации есть один подводный камень: я должен поставить префикс png32, иначе получу черное изображение с 9 патчами, см. Эту ветку.
Шаг 3. Скопируйте изображение в Android Studio для рисования, затем щелкните правой кнопкой мыши и выберите пункт меню "Создать файл 9-Patch...". Будет создано новое изображение.9.png с тем же именем. Теперь можно просто удалить исходное изображение. Будьте осторожны при игре с рефакторингом для переименования в резервное копирование, поскольку он также переименует идентификатор образа XML и заставит задуматься, почему образ с 9 патчами не работает, поскольку XML все еще ссылается на образ без 9-патчей.
Шаг 4, левая и верхняя 2 черные линии образуют расширяемую прямоугольную область, а правая и нижняя 2 черные линии образуют текстовую прямоугольную область.
Размер вашего изображения будет увеличиваться в объявленной расширяемой области по мере увеличения размера текста. В то время как текстовая область означает, что текст разрешен только в этой области.
Вам не нужно рисовать черные точки / линии с нуля для простого использования, 4 черные линии уже существуют за верхним, левым, нижним, правым на этом изображении, если ваше изображение 9-Patch сгенерировано Android Studio. "Увеличить", чтобы увеличить, если вы не видите, чтобы перетащить эти линии.
Исходное положение из 2 черных линий, вертикальных и горизонтальных, объявляет расширяемую область:
- Исходное положение левой вертикальной линии находится между верхним левым нижним левым краем
- Исходное положение верхней горизонтальной линии находится между верхним левым верхним правым краем.
Исходное положение двух черных линий, вертикальных и горизонтальных, объявляет текстовую область:
- Исходное положение правой вертикальной линии находится между верхним правым нижним правым.
- Исходное положение нижней горизонтальной линии находится между левым нижним краем и правым нижним краем.
Выше приведено исходное положение черных линий, прежде чем вы начнете перетаскивать, чтобы сузить длину, чтобы отрегулировать начальное и конечное положение этих линий.
Как расширяемые, так и текстовые области могут отличаться в зависимости от ваших потребностей. Но обычно расширяемая область должна быть ИЛИ меньше, чем текстовая область, классическим примером будет изображение пузыря чата:
Изображение выше имеет одинаковую ширину верхней и нижней черных линий, но правая черная линия выше левой линии, что также означает, что текст последовательно остается до половины нижней кривой либо в минимальном, либо в расширенном размере. И это только расширяется в теле текстовой области.
Теперь вы узнаете о двух преимуществах 9-Patch: нижняя и правая линии вместе образуют текстовую область, которая гарантирует, что текст никогда не будет перетекать за пределы кривой изображения! А также определил, какая часть текстовой области отвечает за расширение изображения по мере роста текста, сохраняя при этом кривую без масштабирования.
Если линия будет отображать координаты x, y в пикселях, это поможет измерить, что обе линии имеют одинаковое или меньшее положение.
Вы должны помнить положение линии при перетаскивании, поскольку левая линия может перетаскиваться в правую сторону, а правая линия может перетаскиваться в левую сторону, и вы можете потерять, какая строка является расширяемой строкой, а какая - текстовой.
Есть 2 важных флажка, которые вы должны отметить, а именно: "Показать патчи" и "Показать плохие патчи".
В флажке "Показывать плохие исправления", если вы рисуете расширяемую область, но не прямую линию, а криволинейную линию изображения, она помечает эту область красной, чтобы предупредить вас. Вы можете сузить свою линию, чтобы отклонить это красное предупреждение, или просто игнорировать его. Имейте в виду, что красное предупреждение может ввести в заблуждение, которое может быть вызвано противоположной линией, в этом случае вам необходимо сузить противоположную линию, чтобы отклонить это красное предупреждение.
Шаг 5. В xml вы можете ссылаться на это изображение как на фон TextView, как показано ниже, используйте wrap_content чтобы сделать его расширяемым:
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/your_9_patch_image_name_excluded_.9"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<2nd TextView />
</LinearLayout>
Когда вы в первый раз поиграете с ним, вы не будете допускать заполнение текстового представления или необычного родительского макета, иначе вы можете удивиться, почему не работает должным образом.
Пример фона кнопки:
<Button
android:id="@+id/btn2"
android:layout_width="wrap_content"
android:layout_height="40dp"
android:background="@drawable/your_9_patch_image_name_excluded_.9"
android:layout_gravity="center"
/>