Недавно я услышал об образах с 9 патчами. Я знаю, что он состоит из 9 плиток и его можно растягивать. Я хотел бы узнать больше об этом.
Как создать образ с 9 патчами?
Есть какой-нибудь инструмент? Могу ли я создать его из AndroidSDK или кода?
Основные преимущества 9-патча перед обычным png?
(растягивается ли он динамически/автоматически в зависимости от экрана?)
И SDK, и Android Studio поставляются с инструментом Draw 9-patch (draw9patch в папке инструментов SDK), который представляет собой простой редактор. Вот вариант получше, который тоже с открытым исходным кодом. У него простое, но умное изображение по умолчанию.
официальная документация с годами улучшилась. Таким образом, наиболее важным преимуществом девяти изображений патчей является то, что они могут указывать (несмежные) области для масштабирования:
Графика NinePatch представляет собой стандартное изображение PNG с дополнительной рамкой в 1 пиксель. Он должен быть сохранен с расширением 9.png в каталоге res/drawable/ вашего проекта.
Используйте границу, чтобы определить растягиваемые и статические области изображения. Вы указываете растягиваемый участок, рисуя одну (или несколько) черную линию шириной 1 пиксель в левой и верхней части границы (остальные пиксели границы должны быть полностью прозрачными или белыми). У вас может быть столько растягиваемых секций, сколько вы хотите. Относительный размер растягиваемых секций остается неизменным, поэтому самая большая секция всегда остается самой большой.
Вы также можете определить необязательную отрисовываемую часть изображения (фактически, линии заполнения), нарисовав линию справа и линию внизу. Если объект View устанавливает графику NinePatch в качестве фона, а затем указывает текст представления, он растягивается так, что весь текст занимает только область, обозначенную правой и нижней строками (если они есть). Если линии заполнения не включены, Android использует левую и верхнюю линии для определения этой области рисования.
Но в документах нет хороших примеров. В конце этого руководства есть отличные примеры, которые ответьте на вторую часть вашего вопроса, объяснив, как работает масштабирование - не только для кнопок, но и для фреймов, и у него есть полный пример проекта, который вы можете скачать и поиграть с ним.
В большинстве примеров говорится о создании образа с 9 патчами, но детали реализации обычно оставляются на высоком уровне.
сообщение Ника выше - с хорошее руководство по 9 исправлениям, которое предоставляет рабочий файл для скачивания проекта , спасло положение.
Вот основные детали реализации, которые помогли мне (после того, как у вас будет готовый образ из 9 исправлений):
Ссылайтесь на рисунок с именем, но не включайте .9.png (автозаполнение в eclipse позаботится об этом)
Убедитесь, что у вас есть только 1 изображение в основной папке /drawable (а не версия для каждой папки dpi)
Изображение должно быть указано с использованием :background, а не :src (это на какое-то время застряло)
android:background="@drawable/splash_logo"
Убедитесь, что изображение и макет, который его содержит, используют:
android:layout_width="fill_parent"
android:layout_height="fill_parent"
:background и в каком сценарии вы пытались использовать это, где вам приходилось использовать fill_parent для оба layout_height и layout_width? Наверняка только один из них должен быть fill_parent?
- person Tash Pemhiwa; 29.04.2016
Как создать образ с 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 Patch являются растягиваемыми, повторяемыми изображениями, уменьшенными до наименьшего размера. Изображение не будет растягиваться и терять пропорции на разных размерах экрана. Еще одним и самым большим преимуществом является память.
Одну и ту же память небольшого размера можно повторно использовать для устройств с разным размером экрана. Хорошо спроектированные образы с 9 патчами менее подвержены ошибкам и имеют высокую степень повторного использования.
Это хороший инструмент: Нажмите здесь.
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#nine-patch
Шаг 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-исправлений…». Новое изображение .9.png будет сгенерировано с тем же именем изображения. Теперь можно просто удалить исходное изображение. Будьте осторожны, играя с рефакторингом для переименования для резервного копирования, поскольку он также переименует идентификатор изображения XML и заставит вас задаться вопросом, почему изображение с 9 исправлениями не работает, поскольку XML по-прежнему ссылается на изображение без 9 исправлений.
Шаг 4. Две черные линии слева и сверху образуют расширяемую прямоугольную область, а две черные линии справа и снизу образуют прямоугольную область текста.
Размер вашего изображения будет увеличиваться в заявленной расширяемой области по мере роста текста. В то время как текстовая область означает, что текст разрешен только в этой области.
Вам не нужно рисовать черные точки/линии с нуля для простоты использования, 4 черные линии уже существовали за верхом, слева, внизу, справа на этом изображении, если ваше изображение с 9 патчами создано Android Studio. «Увеличьте масштаб», чтобы увеличить, если вы не видите, чтобы перетаскивать эти линии.
Исходное положение двух черных линий, вертикальной и горизонтальной, объявляет расширяемую область:
Исходное положение двух черных линий, вертикальной и горизонтальной, объявляет текстовую область:
Выше показано исходное положение черных линий до того, как вы начнете перетаскивать их, чтобы уменьшить длину и отрегулировать начальное и конечное положение этих линий.
Как расширяемые, так и текстовые области могут быть разными в зависимости от ваших потребностей. Но обычно расширяемая область должна быть равна или меньше площади текста, классическим примером будет изображение всплывающей подсказки чата:
Изображение выше имеет одинаковую ширину верхней и нижней черных линий, но правая черная линия выше левой, что также означает, что текст постоянно остается на половине нижней кривой как в минимальном, так и в расширенном размере. И он расширяется только в текстовой области.
Теперь вы знаете два преимущества 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"
/>
