Создание и использование 9-патч-изображений в Android

Недавно я слышал о 9-патч-изображениях. Я знаю его 9 плиток и растяжимых. Я хотел бы узнать больше об этом.

  • Как создать 9-патч-образ?

    Есть ли какой-нибудь инструмент? Могу ли я создать его из AndroidSDK или кода?

  • Основные преимущества 9-патча поверх обычного png?

    (можно ли растягивать динамически / автоматически в соответствии с экраном?)

Сегодня я обнаружил девять изображений патчей. Официальная документация (связанная с другими ответами) в порядке, я полагаю, но на самом деле ее нет в примерах.

В этом маленьком учебнике есть несколько замечательных примеров в конце, которые отвечают на вторую часть вашего вопроса, объясняя, как работает масштабирование – не только для кнопок, но также и для фреймов, и у него есть полный примерный проект, с которым вы можете загружать и играть. Важнейшим преимуществом перед PNG является то, что девять изображений патчей могут указывать несмежные области для масштабирования .

Чтобы ответить на первую часть вашего вопроса, SDK (и теперь Android Studio) поставляется с «Draw 9-patch» («draw9patch» в папке инструментов SDK), который является простым редактором. Здесь более приятный, который также является открытым исходным кодом. Он имеет простой, но умный образ по умолчанию.

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

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

Вот основные детали реализации, которые работали для меня (как только у вас будет готовое изображение из 9 патчей) :

  1. Ссылка на drawable с именем, но не включает .9.png (автозаполнение в eclipse позаботится об этом)

  2. Удостоверьтесь, что у вас есть только 1 изображение в папке с основным / доступным (не версия для каждой папки с тэгами)

  3. Изображение должно быть указано с использованием: background, not: src (это заставило меня застрять некоторое время)

    android:background="@drawable/splash_logo"

  4. Убедитесь, что изображение и макет, содержащие его, используют:

    android:layout_width="fill_parent"
    android:layout_height="fill_parent"

Как создать 9-патч-образ? Есть ли какой-нибудь инструмент? Могу ли я создать его из AndroidSDK или кода?

Когда вы ищете основную поисковую систему для android 9-patch tool для android 9-patch tool , самый первый хит для страницы документации разработчика Android на инструменте draw9patch .

Основные преимущества 9-патча поверх обычного png? (можно ли растягивать динамически / автоматически в соответствии с экраном?)

Документация разработчика Android содержит другие страницы, описывающие файлы PNG с девятью патчами . Эта документация включает в себя следующие пункты:

Графика NinePatchDrawable является растягиваемым растровым изображением, которое Android автоматически изменяет размер, чтобы разместить содержимое представления, в которое вы поместили его в качестве фона. Пример использования NinePatch – это фон, используемый стандартными кнопками Android – кнопки должны растягиваться для размещения строк различной длины.

С 9-патч-изображением вы можете выбрать, какая часть изображения может быть растянута. Это должно быть png-изображение, а имя должно заканчиваться на .9.png (something.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 SDK включает инструмент WYSIWIG draw9patch.jar в вашей папке Android SDK /tools .

введите описание изображения здесь

Основные преимущества 9-патча над обычным png

На самом деле 9 изображений Patch являются растяжимыми, повторяемые изображения уменьшены до наименьшего размера. Изображение не будет растягиваться и потерять пропорции в разных размерах экрана. Еще одним преимуществом является память.

Одну и ту же память небольшого размера можно повторно использовать для разных устройств размера экрана . Хорошо продуманные 9-патч-изображения менее подвержены ошибкам и имеют высокую повторяемость.

https://developer.android.com/studio/write/draw9patch.html

Это хороший инструмент: нажмите здесь.

9 Патч-изображения растягиваются, повторяемые изображения уменьшаются до наименьшего размера. Простейшим примером могло бы быть, если бы вы взяли закругленный div и нарезали его на 9 квадратов, как если бы вы использовали плату tic-tac-toe. Четыре угла не изменили бы размеры вообще, но были бы статичными, в то время как остальные 5 частей были бы растянуты или повторены, чтобы позволить всему изображению масштабироваться соответствующим образом.

С этим объяснением и появлением CSS3 вы можете подумать, что нет оснований использовать 9 патч-изображений, но имя «9 patch» является неправильным. Изображения можно нарезать на еще более мелкие куски.

9 Патч-изображения содержат индекс, частью которого является то, что добавив границу 1px к изображению. Цвета на границе определяют, является ли кусок статичным (не масштабируется), он растягивается или повторяется.

Слайд-шоу Google: https://docs.google.com/present/view?id=dc7ghz8w_34f8338rcg

См. Также информацию о разработчике Android о 9-патч-изображениях: http://developer.android.com/guide/topics/graphics/2d-graphics.html#nine-patch

Шаг 1. Поскольку вы еще не знакомы, подготовьте xxxhdpi png большое изображение, чтобы поиграть первым.

Шаг 2. Это изображение, требуемое для расширяемого поля, должно быть короче, насколько это возможно, поскольку 9-патч нет такой вещи «уменьшить», но «расширить» изображение. Я лично использую инструмент командной строки ImageMagick для его преобразования, например:

 convert -trim 'my_image.png' png32:my_image_trim.png #trim transparent rm lala*; convert my_image_trim.png -crop 310 +repage +adjoin png32:lala%02d.png #cut center convert +append lala02.png lala05.png png32:out_right.png #append back side by side convert -resize 144x144\! out_right.png png32:my_image.png #resize to the desired dpi 

Существует одна ошибка при конвертации: я должен префикс с png32, иначе получится черное изображение с 9 патчами, см. Эту тему .

Шаг 3 : Скопируйте изображение в Android Studio, затем щелкните правой кнопкой мыши и выберите пункт меню «Создать файл с 9 патчами …». A .9.png новое изображение будет сгенерировано с тем же именем изображения. Теперь можно просто удалить исходное изображение. Осторожно, играя с рефактором, чтобы переименовать, так как он также переименует идентификатор образа XML и заставляет задуматься, почему изображение с 9 патчами не работает, поскольку XML все еще ссылается на изображение без 9-патча.

Шаг 4 : Левая и верхняя две черные линии образуют расширяемую прямоугольную область, а правая и нижняя две черные линии образуют прямоугольную прямоугольную область.

Вам не нужно рисовать черную точку / линии с нуля самостоятельно для простого случая, 4 черные линии уже существовали за верхней, левой, нижней, правой частью этого изображения. «Увеличьте масштаб» до большего, если вы не можете перетащить эти строки.

Исходное положение двух черных линий, вертикальных и горизонтальных, объявляет расширяемую область:

  • Исходное положение левой вертикальной линии находится между верхним левым и нижним левым
  • Исходное положение верхней горизонтальной линии находится между верхним левым и верхним правым.

Исходное положение двух черных линий, вертикальных и горизонтальных, объявляет текстовую область:

  • Исходное положение правой вертикальной линии находится между верхним правым и нижним правым.
  • Исходное положение нижней горизонтальной линии находится между нижним левым и нижним правым.

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

Как расширяемые, так и текстовые области могут быть разными, зависит от ваших потребностей.

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

Наведите курсор на линию, чтобы видеть позиции x, y в пикселях.

Есть два важных флажка, которые вы должны отметить, т.е. флажки «Показывать патчи» и «Показать плохие патчи».

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

Шаг 5. В xml вы можете ссылаться на это изображение в качестве фона TextView, как wrap_content ниже, использовать wrap_content чтобы сделать его расширяемым:

   <2nd TextView />  

Когда вы впервые играете с ним, не допускается заполнение текста или какого-либо родительского макета, иначе вы можете задаться вопросом, почему не работает так, как ожидалось.

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

Пример фона кнопки:

   
Давайте будем гением компьютера.