ПО для электронных архивов и библиотек, оцифровка
41,47
рейтинг
20 января 2012 в 17:21

Разное → Улучшенный 9-patch редактор

Добрый день, Хабражитель!

imageУверен с форматом nine-patch уже все давным-давно знакомы, вероятно даже не раз пользовались им в своих Android-проектах (а может даже и где-то ещё). Также о нём чуть менее года назад skkap писал небольшую статью о том, что это за формат, и «с чем его едят». Также он описал инструмент, предлагаемый для быстрого редактирования этих самых файлов.

Собственно, прошёл уже почти год с того момента и я, опять наткнувшись на ту статью и вспомнив жалобы знакомых на неудобство этого самого «инструмента», решил посмотреть нет ли каких других вариантов и, к моему большому удивлению, я таковых не нашёл. Вероятно потому, что формат сам из себя ничего сложного и специфичного не представляет (при желании nine-patch файлы можно редактировать почти в любом графическом редакторе поддерживающем png) и тем более уже есть готовый инструмент (пусть и не самый удобный).

Тут я и решил лично взяться за дело…

Первые наброски


Итак, за несколько дней на основе своей же разрабатываемой библиотеки мне удалось добиться достаточно неплохих, как мне кажется, результатов — ими бы я и хотел поделиться с вами. Пусть ещё не сглажены все углы, есть некоторые недочёты и, возможно, баги (ну а где их нет), но всё же…

Собственно, само небольшое приложение-редактор выглядит вот так:
image

Несколько преимуществ по сравнению с ранее упомянутой «древней» тулзой:
  • Возможность быстрого изменения nine-patch данных простым передвижением/изменением направляющих и областей
  • Отображение пиксельной линейки и расстояний между отдельными направляющими на области
  • Кастомизируемое превью итогового файла динамически обновляемое при редактировании
  • Распознавание nine-patch данных на изображениях не имеющих в имени ".9", а также возможность загрузки простых изображений для быстрой конвертации в nine-patch формат
  • Возможность загрузки любых форматов изображений, поддерживаемых в J2SE, помимо png
Это плюсы, касающиеся исключительно редактирования nine-patch файлов в готовом визуальном редакторе. Сам по себе запускаемый jar-файл приложения можно использовать в качестве подключаемой библиотеки для парсинга nine-patch изображений, встраивания редактора в свои собственные приложения на Java, стилизации компонентов и многого другого, но не буду распыляться — конкретно об этом я немного позже расскажу в отдельной статье в Java-блоге всем кто интересуется.

Немного описания...


Собственно, при работе с этим редактором вам придётся иметь дело с несколькими его частями…

Основной тулбар
image
  • image Открытие изображения (можно также просто перетащить любой файл прямо на редактор)
  • image Быстрое сохранение ранее открытого изображения
  • image Сохранение nine-patch изображения в новое место
  • image Диалог предпросмотра изображения (о нём далее)
  • image Отображать ли расстояние между направляющими
  • image Показывать ли линейку на области редактирования
  • image Показывать ли область содержимого
  • image Показывать ли растягиваемые области
Редактор
image
  • Для zoom'а области можно использовать сочетание Ctrl (или Alt) + Mouse wheel
  • Перемещая направляющие можно быстро редактировать области (в допустимых границах)
  • Перетаскивать области можно за чёрные линии по краям, либо за области внутри изображения
  • Добавлять новые растягиваемые области можно зажимая левую кнопку мыши слева или сверху от изображения
  • Стирать растягиваемые области можно зажимая правую кнопку мыши слева или сверху от изображения
  • Передвигать область (если появляется скролл) можно зажимая среднюю кнопку мыши (колесо)
Предпросмотр изображения
image
  • За сайзеры вокруг изображения можно изменить его размер
  • На верхнем тулбаре можно настроить отображаемый в изображении текст и иконку
  • На нижнем тулбаре можно настроить фон под изображением
  • image Сжимает изображение до минимального размера с учётом содержимого
В общем и целом — это всё. Остальное вы можете и сами посмотреть/пощупать, запустив приложение у себя.

Кстати, по умолчанию на редактирование открывается вот это изображение:
image

Собственно, приложение:
Запускаемый jar
imageimageimage


Естественно, для запуска вам потребуется установленная на вашей ОС jre.
Работать приложение должно на любой ОС, где доступны версии JDK 1.6.20+ (или OpenJDK).

В заключении


Надеюсь тем, кто часто работает с nine-patch файлами этот редактор поможет облегчить жизнь :)

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

Кстати о птицах — сама Web Look and Feel библиотека, а также данный редактор написанный на её основе распространяются под лицензией GPLv3 и имеют полностью открытый исходный код.

Так как более новая версия библиотеки, на которой основан данный редактор ещё не выпущена — загрузить исходники на данный момент можно напрямую отсюда:
http://weblookandfeel.com/downloads/ninepatch-sources.zip

А дистрибутив библиотеки без исходников отсюда:
http://weblookandfeel.com/downloads/ninepatch.jar

Также я рад буду выслушать любые комментарии и предложения и…
Спасибо за ваше внимание!

# Update


После нескольких комментариев, а также нахождения пары багов я внёс небольшие изменения в библиотеку и редактор, собственно что было изменено:
  • Объединённый с редактором предпросмотр итогового 9-patch изображения
  • Возможность выбора цвета текста в предпросмотре
  • Возможность копирования 9-patch данных из одного редактора в другой
  • Сохранение всех настроек редактора при закрытии
  • Возможность мультистрокового текста в превью ("\n" или ";" разделяют строки)
  • Привязка перемещения диалога превью к диалогу редактора
  • Добавлен слайдер и кнопки для zoom'а области на нижний тулбар
  • В имена файлов автоматически добавляется пометка ".9" при сохранении, если таковой нет
Также я в курсе последней оставшейся проблемы — некорректной работы выборщика файлов. Эта проблема будет устранена немного позднее, вместе с выходом очередной версии Web Look and Feel библиотеки.

Загрузить бинарники и исходники можно по старым ссылкам — они уже обновлены:
Запускаемый jar | Исходный код | Чистая библиотека
Автор: @mgarin
ALEE Software
рейтинг 41,47
ПО для электронных архивов и библиотек, оцифровка

Комментарии (49)

  • 0
    немножко оффтопик — источники иконок для загрузки не подскажете? :)
    • +2
      Конечно подскажу — набор называется Fugue Icons.
      Вот тут можно разом увидеть все иконки из набора.
  • +1
    Теперь их трое (в смысле радакторов 9-patch)!
    Спасибо за альтернативу и сбереженные в будущем нервы и время, потраченные бы в убогом родном редакторе.
    • 0
      Кстати, раз уж вам известен ещё один редактор — не подбросите ссылку на его сайт/описание?
      Я, честно говоря, так и не смог найти ни одного редактора помимо родного. Возможно просто схалтурил…
      • +2
        • 0
          Спасибо за ссылку — не странно, что я не нашёл корейский сайт :)

          Попробовал редактор — он не поддерживает более 1ой растягиваемой области, что зачастую весьма необходимо. Да и редактирование, как мне кажется, там не сильно удобнее чем в родном тулзе…

          Всё же всегда очень хочется потаскать гайдлайны/область, а не двигать какие-либо отстранённые слайдеры и не рисовать попиксельно карандашом.
      • +1
        Еще одна поправка, четыре редактора!
        Совсем забыл про родной онлайн-редактор Android Asset Studio:
        • 0
          Буквально минут 20 назад коллега мне о нём рассказал, правда я его ещё не видел — сейчас пощупаю.
        • 0
          Собственно — он сделан действительно лучше двух других, но опять же не позволяет создавать несколько растягиваемых областей сразу. В остальном — заметил пару моментов, которые можно перенести в мой вариант редактора…

          Ну и, кстати, вероятно в скором времени стоит сделать настройки приложения и вынести туда некоторые настройки редактора, которые сейчас просто всегда стоят по умолчанию.
        • +1
          Он не редактирует файлы (игнорирует существующие данные), рисуя новые полосы в добавок к старым. Но он потому и называется генератором, а не редактором.
  • 0
    Ух ты! Буквально 10 минут назад имел беседу с дизайнерами по поводу 9-patch, а сейчас захожу на хабр и вижу такую замечательную тулзу. Спасибо!
    • +3
      Пользуйтесь на здоровье :)
  • +4
    Пару шероховатостей которые обнаружил:
    *Сначала подумал что нету масштабирования, но потом нашел его по Ctrl+колесо мыши. Об этом надо сообщать, а еще лучше продублировать кнопочками на панели, так же нету возможности уменьшить меньше оригинала (на случай большого исходника).
    *Сохранение по Ctrl+S не добавляет автоматически к названию .9.png а сохраняет в оригинал
    *Диалог «Save As» нерабочий (хотелось бы, что бы когда заработает, сразу предлагал папку загруженной картинки, а не 'корень' диска)
    *в превью хотелось бы попробовать многострочный текст тоже
    • 0
      Сначала подумал что нету масштабирования, но потом нашел его по Ctrl+колесо мыши. Об этом надо сообщать, а еще лучше продублировать кнопочками на панели, так же нету возможности уменьшить меньше оригинала (на случай большого исходника)

      О зуме я даже отдельно написал в статье :)
      Но на самом деле вы правы — просто был не самый удачный вариант слайдера на панели — я его временно убрал.
      В следующей версии он вернётся в более опрятном виде и с подсказкой насчёт хоткеев.

      Сохранение по Ctrl+S не добавляет автоматически к названию .9.png а сохраняет в оригинал

      Я уже думал над тем — добавлять ли .9 при сохранении (если его, конечно, нет) или нет. Впринципе, думаю что стоит добавлять его по умолчанию — всё же ничего кроме nine-patch файлов сохранить из приложения не удастся же.

      Диалог «Save As» нерабочий (хотелось бы, что бы когда заработает, сразу предлагал папку загруженной картинки, а не 'корень' диска)

      Диалог сейчас вообще имеет ряд неприятных багов (не связанных с редактором), которые мне предстоит устранить в библиотеке — в т.ч. возможность ввода имени файла при сохранении и т.п.
      Насчёт выбора исходной директории — согласен — исходно стоит показывать текущую директорию файла. Поправлю в ближайшем обновлении.

      в превью хотелось бы попробовать многострочный текст тоже

      Хм, идея конечно интересная, но не хочется пихать куда-либо в «лёгкий» диалог превью многострочное текстовое поле. Может просто стоит ввести некоторое обозначение переноса, которое можно использовать в поле? (например стандартный "\n" или же просто "\" или ";")

      Думаю эти изменения внесу в ближайшее время и обновлю версию в статье :)
      • +2
        Думаю поддержки "\n" в превью было бы достаточно.
        • 0
          Тогда решено — так и сделаю.
    • +1
      Я внёс большую часть изменений — можете попробовать новую версию (библиотеки по старым ссылкам уже обновлены). Остаётся разобраться с выборщиком файлов, но этим я уже займусь завтра на свежую голову :)
  • +2
    Ничего себе, я удостоился упоминания в шапке статьи! Спасибо :) Тулза выглядит удобной, обязательно скачаю и попробую!

    П.С. Почему под ссылкой скачивания Файндер веселый, а Тукс такой грустный?
    • 0
      Ну а как же иначе! (это я насчёт упоминания, а не Тукса :)

      Насчёт Тукса же — не знаю — видимо чем-то он насолил создателю библиотеки иконок.
    • +1
      Очень радует линейка с подписями количества пикселей рядом с картинкой!

      На счет предложений есть несколько мыслей:

      ежели редактор не планируется исключительно легковесным, можно добавить вместо/вместе с превью отдельные окошки для визуализации/тестов созданного 9-patch для различных элементов UI (Кнопки, текстбоксы, табы, ...). И соответственно генерировать xml стилей, чтобы сразу вставлять в свое android приложение.

      Также мелочь конечно, но я уже очень долгое время не видел диалогов сохранения/открытия в виде, отличном от системного. У меня ярлычки ко всем важных местам на компьютере в стандартном диалоге, кастомный диалог очень усложняет пользователям жизнь ИМХО.

      Ну и как уже упомянули — для тех кто скачал программу не по ссылке из этой статьи будет очень сложно сообразить как добавлять/таскать/удалять области. Подсказочку что ли какую нибудь бы.
      • 0
        ежели редактор не планируется исключительно легковесным, можно добавить вместо/вместе с превью отдельные окошки для визуализации/тестов созданного 9-patch для различных элементов UI (Кнопки, текстбоксы, табы, ...). И соответственно генерировать xml стилей, чтобы сразу вставлять в свое android приложение.

        Редактор скорее всего останется легковесным — подобной генерации xml-стилей под, непосредственно, Android не планировалось. Скажу даже больше — в дальнейшем возможности данной библиотеки будут использоваться для стилизации Swing-компонентов (уже используются, но пока-что эта версия ещё не выпущена). Поэтому не хочется привязывать утилиту ни к какому из направлений, а просто оставить более удобный и продвинутым nine-patch редактором.

        Также мелочь конечно, но я уже очень долгое время не видел диалогов сохранения/открытия в виде, отличном от системного. У меня ярлычки ко всем важных местам на компьютере в стандартном диалоге, кастомный диалог очень усложняет пользователям жизнь ИМХО.

        Это достаточно старая и холиварная тема. Проблема, во-первых, в том, что я не могу обеспечить нормальную работу нативных диалогов выбора на различных ОС. Если использовать свинговый выборщик — он также будет весьма далёк от нативного и ко всему прочему неудобен. Так что я твёрдо решил оставлять кросплатформенный вариант выборщика на кроссплатформенных приложениях — просто ему ещё требуется некоторое количество доработок и улучшений.

        Ну и как уже упомянули — для тех кто скачал программу не по ссылке из этой статьи будет очень сложно сообразить как добавлять/таскать/удалять области. Подсказочку что ли какую нибудь бы.

        Ну, тут без туториала сложно что-либо сделать — сыпать подсказками, как мне кажется, не выход. Будет слишком назойливо и раздражающе. Тем более я не собираюсь нигде выкладывать данное приложение/библиотеку без предварительного описания как в этой статье :)
        Если есть какие-либо более конкретные мысли на этот счёт — буду рад выслушать
  • +2
    Огромное спасибо! Это лучший на сегодняшний день редактор 9-patch.
    • 0
      Вам спасибо за лестный отзыв)
      • +1
        Присоединяюсь, классный редактор, простой, быстрый и очень удобный!
        Из пожеланий: не помешала бы возможность менять цвет текста на кнопке при просмотре (для тёмных кнопок хочется светлый текст), и, может, галку включения отступов вокруг текста там же, ведь в проектах всё равно без отступов обычно не используется…
        • 0
          Насчёт цвета текста — сейчас его можно быстро переключить кликнув по итоговой картинке в просмотре. Это, впрочем, действительно неочевидно и предлагает только 2 варианта цвета. Добавлю возможность выбора цвета текста в ближайшем обновлении.

          Насчёт отступов я думал немного иначе — вы же задаёте область содержимого на изображении (правой и нижней линиями) — они фактически и указывают на отступы от краёв до содержимого — они же и учитываются в предпросмотре. Можете попробовать потягать линии содержимого и увидеть как они влияют на минимальный размер изображения в предпросмотре с разными вариантами содержимого.

          Впрочем непосредственно с Android проектами я мало работал и точно даже не уверен, есть ли там возможность (точнее, используется ли) задания дополнительного отступа для содержимого от «краёв», задаваемых 9-patch ресурсом. Если действительно есть и часто используется — вероятно стоит добавить подобную возможность и в предпросмотр.
          • 0
            Это, впрочем, действительно неочевидно

            Действительно, не подумал бы.
            • 0
              Это скорее была просто временная реализация для тестов.
              Скоро добавлю возможность выбора цвета.
          • 0
            вы же задаёте область содержимого на изображении

            Это да, но 9-patch удобен растяжением, поэтому я кладу 9-patch-файлы один раз в папку drawable-nodpi, тогда оно само растянется как надо на любом экране с нужными (и разными, в зависимости от экрана) паддингами. В самой картинке мы можем указать отступ, но он задаётся в пикселях, и на разных экранах будет выглядеть по-разному, что неприемлимо.
            А возможность задавания отступов активно используется — это стандартные margin и padding, а 9-patch-графика чаще используется в качестве фона.
            • 0
              Но для разных экранах скорее всего будут использованы и разные ресурсы (ldpi/mdpi/hdpi), впрочем согласен что могут быть и иные случаи (даже множество случаев) когда нужно указывать специфичный отступ для одного и того же исходного ресурса.

              В общем — отдельно добавлю настройку задания отступов от содержимого, которые будут обсчитываться в дополнение к отступам, предоставляемым 9-patch файлом.
              • 0
                Я об этом и говорю: чтобы не утруждать себя созданием растягиваемых ресурсов для каждого экрана, я создаю один независимый (nodpi), но проблема с отступами – это один из минусов при использовании такого метода, отступы я задаю в dpi в файле лэйаута.
                Подумал: а может тогда и не надо добавлять отдельную галку-то? Правильно ведь пишите, это я хитрю просто ))
                • +1
                  Просто вероятно специфичные отступы (если таковые вообще понадобятся) будут задаваться уже при написании приложения в отдельных случаях. Вряд ли вам потребуется их проставлять при предварительном редактировании фона в данном редакторе — ими вы скорее всего озадачитесь только при составлении итогового интерфейса приложения.
                  • 0
                    Именно!
                    • +1
                      Тогда пока не буду нагружать предпросмотр :)
                      Сделаю другие важные исправления и выпущу очередную версию.
                • +1
                  Кстати, для разных хитрых фонов кнопок или список, довольно часто не хватает одного опатченного no-dpi ресурса, так как те же скругления, тонкие детали — лучше делать и для low и для hi dpi экравно отдельно — иначе или тут или там картинка начинает портиться
                  • +1
                    Да, понятно. Но зачастую одного растягиваемого ресурса хватает под все экраны, к тому же зависит от внешнего вида: если объект имеет постоянный размер (а не по экрану/родителю), то с рястяжением чуть проще.
  • 0
    Выложил очередное обновление — редактор приведён к более-менее итоговому виду.

    Осталась последняя проблема — с выборщиком файлов. Она будет устранена с выходом новой версии Web Look and Feel библиотеки (о чём я также уведомлю в этом посте).

    Загрузить новую версию можно по старым ссылкам в статье либо здесь:
    Запускаемый jar
    imageimageimage


    Обновлённый интерфейс выглядит вот так:
    image
    • 0
      Большое спасибо!
      Очень сильно радует, что под разными ОС программа выглядит одинаково красиво (спасибо вашей библиотеке!), а проблема диалога выбора файлов не сильно напрягает, так как есть драг'н'дроп.
      • 0
        Так или иначе фикс выборщика будет в ближайшем обновлении библиотеки. Там же я выложу и технические подробности использования библиотеки в десктоп-приложениях.

        Также будет ещё несколько небольших вкусностей в 9-patch редакторе, которые уже тестируются и будут доведены до ума к релизу.

        Очень сильно радует, что под разными ОС программа выглядит одинаково красиво (спасибо вашей библиотеке!)

        Большая часть оформления десктопных Swing элементов уже приведена к общему для всех ОС стилю, осталось лишь сгладить некоторые углы и немного поработать над производительностью компонентов, чем я сейчас и занимаюсь :) Ну а также добавить побольше функционального «сахара», которого так нехватает при разработке разных интерфейсов.
    • +1
      Атлична! =)
      А я потихоньку начал гуглить документацию на плагины IDEA, зело хочется редактор туда засунуть :=)
  • +1
    Спасибо, выглядит здорово. На мой взгляд, самой полезной и недостающей фичей является возможность batch-редактора. Т. е., чтобы в один экран можно было бы загрузить несколько состояний одного StateListDrawable, нарисовать границы (они, зачастую, одинаковые) и выгрузить одним выстрелом.
    А если он еще и позволит переключаться между *dpi… Я бы купил такой, не задумываясь.
    • 0
      Вам спасибо за отзыв!

      Насчёт фич:
      самой полезной и недостающей фичей является возможность batch-редактора. Т. е., чтобы в один экран можно было бы загрузить несколько состояний одного StateListDrawable, нарисовать границы (они, зачастую, одинаковые) и выгрузить одним выстрелом

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

      … и выгрузить одним выстрелом

      Небольшой вопрос по этому поводу (упрощая до сути) — хочется иметь в редакторе возможность набрать N изображений и разом для них всех задать границы, я правильно понимаю? (ну и понятное дело быстро их сохранить обратно в .9.png файлы после этого)

      А если он еще и позволит переключаться между *dpi… Я бы купил такой, не задумываясь.

      Что конкретно под этим подразумевается?
      Ведь для разных DPI будут просто разные наборы изображений…
      Или же просто хочется (грубо говоря) иметь возможность собрать один полный набор для всех DPI и разных состояний сразу, не закрываю предыдущие наборы?
      • 0
        Да, своеобразный набор слоев, у каждого свое название — normal, pressed, disabled, и т. д., рисуется один раз найнпатч, а потом на выходе получаем N файлов имя-normal.9.png, имя-pressed.9.png. Как вариант и XML тут можно сгенерить с селектором, ну это уже совсем халява.

        А по-поводу dpi — да, скорее просто возможность организовать все *dpi наборы в один «проект» с возможностью его сохранения в набор папок drawable-*dpi, внутри которых состояния.

        Тогда был архинаикрутейший редактор 9-patch. :)
        • 0
          Насчёт генерации XML — вряд ли сейчас это будет, так как я всё же не привязываю данный редактор к Android платформе, а лишь к 9-patch формату, который я собираюсь использовать для стилизации десктоп-компонентов.

          Насчёт всего остального — сейчас попробую подумать на вариантами реализации этих возможностей. Так или иначе об изменения я вскоре напишу в этом же топике :)
    • +1
      Кстати сейчас можно для быстрого переноса границ между изображениями состояний (одного размера) можно пользоваться простым copy-paste (просто Ctrl+C/V в редакторе).
      • 0
        Работает, но, видимо, только на аналогичных размерах. Спасибо! Хоть кнопка на видном месте, но пока не указали на неё, не подумал бы, пожалуй: когда интерфейс рисовал, после каждого обновления ресурса заново границы таскал.
        • 0
          Это был исходный вариант копирования (работающий только между изображениями одного размера) — этот момент уже убран и сделана корректировка данных при копировании, если размеры не совпадают.

          Также уже есть пара других полезных нововведений — о них расскажу чуть позже, сразу как выложу обновление.

          Плюс вероятно добавлю описанное парой комментариев выше :)
  • +1
    Спсибо, ваш редактор очень хорош. Возникло только одно пожелание: было бы здорово, если бы на линейке отображалось местоположение мыши, например, как в фотошопе. Иногда очень выручает.

    • 0
      Спасибо за отзыв!
      Добавлю в ближайшем обновлении :)
  • 0
    Это огонь! Сокращает время работы с 9-patch в разы. Спасибо большое!

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

Самое читаемое Разное