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

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

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

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

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

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

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

   android:background="@drawable/splash_logo"

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

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

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

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

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

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

A NinePatchDrawable graphic-растягивающееся растровое изображение, которое 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 для вашего приложения anndroid ?

Android SDK включает в себя WYSIWIG draw9patch.jar инструмент внутри вашего Android SDK /tools папка.

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

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

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

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

Это хороший инструмент: Щелкните здесь.

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

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

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

Гугл Слайдшоу: 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 drawable, затем щелкните правой кнопкой мыши и выберите пункт меню " Создать 9-патч-файл...". Ля. 9.png новое изображение будет создано с тем же именем изображения. Теперь можно просто удалить исходное изображение. Осторожно при игре с рефакторингом для переименования, так как он также переименует идентификатор XML-изображения, и заставит вас задаться вопросом, почему изображение 9-patch не работает, так как XML все еще ссылается на не-9-patch изображение.

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

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

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

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

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

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

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

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

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

наведите курсор на линию, чтобы увидеть позиции 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>

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

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

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

    <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"
        />