Paint code что это

Обновлено: 07.07.2024

В далеком 2013 году я узнал о проекте PaintCode [1] и был весьма впечатлен увиденным.
Еще бы, каким-то чудом векторные картинки превращаются в строки кода, который в свою очередь вдруг начинает работать в Вашем приложении и вся эта магия всего за 99.99$.
Я долго смотрел на экран монитора и какой-то страх неизведанного отталкивал меня. Еще бы я человек далекий от дизайна и рисования не смог с первого взгляда оценить всего могущества этого проекта. Я отправил ссылки на видео и на сайт проекта нашим дизайнерам и подумал: «Ну вот сейчас, они начнут заниматься настоящими делами!». Но их выражение лица было похоже на мое, еще бы, они не могли понять всех этих замысловатых формул и переменных…

PaintCode [1] интересное приложение хотя бы потому, что имеет пограничное состояние, оно вроде и для дизайнеров, но оно же и для программистов — PaintCode [1] , какой же он на самом деле?
Не смотря на обильное количество документации [2] и примеров [3] , достаточно подробно и просто описывающей процесс создания элементов, хотелось бы сделать небольшой экскурс, а также указать на некоторые замечания выявленные во время работы с данным продуктом.

Paint

На первый взгляд очень даже простое приложение. Привычные как для дизайнеров так и для программистов вещи:

в верхней части экрана Toolbar;
в левой библиотека объектов;
в центре рабочая зона;
справа инспектор и браузер (для выбора элемента расположенного на рабочей зоне).

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

Colors — для создания набора цветов Вашего приложения;
Gradients — для создания набора градиентов, которые могут создаваться из базовых цветов созданных в пункте Colors;
Shadows — для создания набора теней, которые могут создаваться из базовых цветов созданных в пункте Colors;
Images — некоторые изображения в трех разрешениях 1x, 2x, 3x добавленные самостоятельно;
Variables — самое интересное! Оставим некоторую интригу.

А вот про Variables подробнее:
Существует возможность добавить некоторую переменную, которая будет взаимодействовать с вашим элементом интерфейса, например менять его цвет, угол наклона, текст, состояние, возможно тип, местоположение, размер и местоположениеРазмер.
Типы Variables:

Expression — некоторое выражение которое может возвращать все из ниже перечисленных;
Number — числовое значение, например тип элемента;
Fraction — доля, число от float от 0 до 1, как свойство progress у UIProgressView;
Angle — угол в отличии от Number, это реально угол, значение от 0 до 360;
Text — некоторый текст, который можно присвоить текстовому полю;
Boolean — 1/0, YES/NO, да/нет, кому как нравится (например нажатие кнопки или скрытие элемента);
Point — координаты точки x и y ;
Size — размер ширина, высота;
Rectangle — прямоугольник состоящий из Position (x, y) и Size (width, height).

Для каждого элемента библиотеки Вы сможете задать уникальное имя, и его тип: StyleKit, Local, Parameter. (тип StyleKit отсутствует у Variables)

StyleKit — объект добавляется в общий набор стилей, подробнее ниже;
Local — этот тип означает, что это локальный объект, который виден только в PaintCode;
Parameter — этот тип означает, что это внешний объект, который виден не только в PaintCode (программист его сможет изменять «руками»).

StyleKit [4] Такая штука которая содержит набор элементов необходимых для использования вне PaintCode, например можно добавить набор цветов, из которых состоит приложение. Программисту остаётся лишь вызвать цвет по названию:

self.view.backgroundColor = [StyleKitHabrahabr backgroundLogo];

Аналогично в StyleKit добавляются градиенты, тени, созданные элементы интерфейса. Т.е. некий набор, который в дальнейшем служит разработчику подспорьем при создании UI.

Пример:
Мы создали некоторый цвет, а затем использовали его в качестве базового для другого цвета

Все просто!
Большим плюсом я считаю возможность создания элементов наследуясь от созданных ранее, например создание тени из базового цвета, как только Вы поменяете базовый цвет, все наследники сразу примут изменения. При грамотном проектировании очень удобная вещь.
Есть возможность импорта PSD, рисуете в Вашем любимом редакторе и переносите в проект. По части рисования, дизайнерам разобраться большого труда не составит.
Созданные элементы, не отходя от кассы, можно нарезать в нужных разрешениях, простым нажатием кнопки «Export»

И тут небольшое отступление.
Как я уже писал, первое знакомство с PaintCode [1] было уже давно, но как-то прошло мимо. И вдруг предоставилась возможность сделать тотальный редизайн приложения и в этот раз я был настроен решительно. Началось внедрение PaintCode, но тут появились некоторые проблемы, наши дизайнеры смогли усвоить только ту часть, что выше! Они хорошо делают свое дело, но когда речь заходила до переменных и создании функций наступал ступор и приходилось доделывать эту работу разработчикам.
Было принято решение делить работу, дизайнер создает цвета и собственно изображение, разработчики создавали необходимые переменные и функции экспортировали StyleKit в проект. И так, далее подключаются разработчики…

Созданный дизайнером элемент нужно просто вывести на экран, а иногда и как-то оживить.
PaintCode позволяет создавать элементы интерфейса в виде простых UIImage и UIVew, которое будет двигаться, крутиться, менять цвет, исчезать и т.д., если точнее, то он создает метод прорисовки экземпляра UIView.
Начнем с простого, для того чтобы из созданного изображения получить UIImage необходимо выбрать канву и справа в инспекторе указать метод который будет возвращать StyleKit.

В выпадающем списке: нет метода, метод «прорисовки», изображение, и «прорисовка» и изображение.
Если выбрать генерацию изображения, то в StyliKit появится метод, в моем случае это
// Generated Images
+ (UIImage*)imageOfLogoHabrWithFrame: (CGRect)frame;
При вызове которого, создается изображение текущего разрешения, готовое к использованию.

Если же выбрать метод Drawing, то создается метод
// Drawing Methods
+ (void)drawLogoHabrWithFrame: (CGRect)frame;

Который в свою очередь добавляется в Ваш класс наследник UIView в метод — (void)drawRect:(CGRect)rect:

— (void)drawRect:(CGRect)rect // Drawing code
[StyleKit drawLogoHabrWithFrame: rect];
>

Для того, чтобы перерисовать заново Ваш экземпляр, например при изменении фрейма, других параметров или анимации, у экземпляра вызывается метод:
[self setNeedsDisplay];

В общем, схема простая как 2x2.
Примеры [3] содержат как проект PaintCode, так и Xcode, что очень удобно.
Для того, чтобы экспортировать StyleKit (по сути это файл .h и .m в случае Obj-C) нужно перейти в пункт File -> Export .

Итоги

PaintCode [1] достаточно мощный и интересный инструмент в хороших руках. Позволяет создавать красивый «живой» интерфейс, «облегчить» приложение т.к. нет необходимости хранить все «нарезанные» картинки. Но перед использованием необходимо все взвесить, и вот с что решили мы:

«Нарезает» изображения под нужное разрешение парой кликов;
Избавляет от необходимости хранить большое количество картинок в проекте;
Позволяет «оживить» UI — динамически меняйте цвета, добавляйте анимацию, меняйте размеры, ограничивайтесь только Вашей фантазией;
В определенной степени ускоряет процесс разработки;
При хорошей архитектуре проекта, можно быстро изменить внешний вид всего набора элементов (те самые базовые цвета, тенюшки, использование Symbol [7] );
Все цвета в одном месте;
Достаточно быстро прорисовывает элементы;
Хорошая поддержка, отвечали в течении 5 минут и даже подсказали когда у нас появилась вопросы;

Проект состоит из одного файла, что приводит к неудобству при использовании систем контроля версий (Git не может мержить изменения, вносим их по очереди. );
Пограничное состояние инструмента вселяет страх как дизайнерам, так и разработчикам. Одним трудно прикручивать логику, другим трудно рисовать;
Нет удобного разделения переменных на подгруппы, в последствии появляются переменные которые отвечают за одно и тоже действие, чтобы в них быстро ориентироваться, нужно придумать свою какую-то хитрую систему, либо следить за всем одному человеку;
Если в одном проекте использовать один StyleKit, то последний обрастает кучей «переменных» и выражений которые очень трудно использовать (см. пункт выше);
Если использовать несколько StyleKit, то приходится следить в каком именно находится тот или иной элемент, цвет, тень и т.д., что вносит неразбериху при разработке и как следствие приводит к свалке;
Ваш проект становится зависимым от наличия установленной версии PainCode, иначе Вы не сможете быстро вносить изменения для элементов созданных в PainCode:
Дизайнеру пришлось освоить Git;
Нет возможности экспортировать код и получить изображение. Например каким-то чудом Ваш проект PaintCode потерялся, но остался сгенерированный им код, так вот проект из кода восстановить не получится;
Иногда возникают проблемы и не понимание при решении задачи, особенно когда нужно «ресайзить» будущий элемент (Что-то из разряда constraint на iOS)
В настоящее время нет возможность и использовать созданные элементы где-то еще кроме как на iOS и Mac OS, появится ли такое на Android…

P.S.
Очень легко попасться на обещания разработчиков, но иной раз оно того стоит! Как только наш проект попадет в AppStore, в статью обязательно будут добавлены материалы. PaintCode хороший инструмент для небольшого проекта, небольшой компании. Очень надеемся что инструмент будет и дальше развиваться, чтобы позволял создавать красивый, конкурентный дизайн, «живой» UI и прочие впечатляющие вещи. Ну и наверное главный вопрос который мучает многих на протяжении всего поста: «Стоит он хоть своих денег, то ?». Определенно стоит! Нужно только разобраться)

Ну и для затравки:

Toolbar

The toolbar at the top of the window contains the drawing tools you'll use most often.

Tabs & StyleKit

In the middle section below the toolbar, you'll find the tab bar. You can use tabs to organize the drawings in your PaintCode document. Each tab may contain multiple drawing canvases.

Library

Library (left side of the window) is a collection of all your colors, gradients, shadows, images and variables. All these library items can be easily reused across your document. Library items are entities on their own in PaintCode, and when you change a library item, all drawings that use that library item are immediately affected.

Canvases

The central portion of the application window contains the contents of the currently selected tab. Typically, you'll see one or more drawing canvases in this area.

Code View & Middle Toolbar

The middle toolbar lets you change the code generation settings (such as the target programming language and operating system). It also allows you to change canvas display settings like zoom and pixel density (Retina, non-Retina or Infinite).

The Code View below the toolbar contains the generated code. You can hide the Code View by dragging the middle toolbar. This leaves more room for your drawing canvases, and also improves the performance when dealing with complicated documents.

Shapes & Groups Browser

The shapes & groups browser is located at right side of the window, below the toolbar. This is a list of all shapes in the currently selected canvas. You'll find the canvas itself at the root of this list. When you select the canvas, settings will appear in the Inspector below.

Inspector

You'll find Inspector at the right side of the window. Inspector allows you to change attributes of your selection, typically shapes in your canvas.

СПЕЦИАЛЬНАЯ ПОДДЕРЖКА : PaintCode любезно предоставил Генератор кода для лицензий Sketch на 10 счастливых читателей SitePoint. Полная информация в нижней части этой статьи.

Давайте начнем с трех фактов:

Ты Дизайнер.
Дизайнеры создают приятные элементы интерфейса.
Приложения iOS нуждаются в хороших элементах пользовательского интерфейса.

Но как получить графику и элементы пользовательского интерфейса для iOS?

Это часто серая область для дизайнеров. Мы много знаем о работе с браузерами, но какой формат изображения лучше для iOS? Какое разрешение нам нужно? Вектор или пиксели?

Встречайте PaintCode

Почему это выгодно?

Обычно разработчики OS X и iOS получают ресурсы изображений в формате PNG, а приложение выбирает версию изображения, необходимую для разрешения устройства. Эти PNG-файлы предварительно сгенерированы , что означает, что вы не можете легко настраивать их во время выполнения, и вы, конечно, не можете масштабировать их без потери качества.

PaintCode 2 доступен пользователям Mac за $ 99,99, но, что удивительно, пользователям Sketch фактически не потребуется полное приложение PaintCode 2, только плагин PaintCode для Sketch. Стоимость такая же, но разница в том, что поклонники приложений Sketch смогут создавать графику iOS практически без обучения.

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

Рисование векторов в эскизе (как обычно)

Используя ряд овалов ( клавиатурная команда: O ) и линий ( L ), создайте значок «добавить условие поиска». Как и толщина границы, закругленные углы можно активировать, изменив параметр «Углы» в Инспекторе . Не забудьте использовать логические операции ( объединение, вычитание, пересечение, разница ), чтобы создать «комбинированную форму», как показано на скриншоте ниже.

Даже для начинающего пользователя Sketch это должно быть просто.

Преобразование векторов в код с помощью плагина PaintCode

Если вы этого еще не сделали, установите плагин PaintCode для Sketch, чтобы мы могли начать преобразование нашего значка в код Objective-C / Swift.

Объявление, какие объекты должны быть экспортированы

Когда вы будете готовы, используйте сочетание клавиш + опция + R для доступа к «листу экспорта» PaintCode в Sketch. Как и в собственной функции экспорта в Sketch, на вкладке «Выбор чертежей» будут отображаться все экспортируемые фрагменты из документа. Если артборд не содержит слайсов, весь артборд будет экспортируемым. Если нет артбордов, тогда вся страница будет экспортироваться (как в нашем документе). Имена слоев используются при выводе кода, поэтому убедитесь, что они не являются произвольными, как «Oval 1».

На последней вкладке «Получить файлы кода» вы можете нажать кнопку экспорта или перетащить значок файла на рабочий стол, чтобы загрузить все ваши ресурсы в виде кода в один файл, также известный как StyleKit.

Итак, что такое StyleKit?

Разработчик тогда использует этот StyleKit в XCode, чтобы построить приложение.

Сохранение общих цветов в StyleKit

Кроме того, вы можете использовать Sketch для создания библиотеки часто используемых цветов, градиентов и теней, которые также могут быть определены в StyleKit как код, и что разработчик может использовать его снова и снова. Начните с создания артборда ( клавиатурная команда: A ) с именем «Library» (его нужно назвать так) и затем создайте прямоугольник ( клавиатурная команда: R ) внутри него.

Переименуйте слой, чтобы описать цвет (это будет использоваться для ссылки на него в коде), и создайте текстовый слой ( команда клавиатуры: T ) для визуального документирования цвета. Не волнуйтесь, текстовые слои будут игнорироваться плагином PaintCode во время экспорта.

Примечание: чтобы встроить тени в StyleKit, добавьте их в форму с помощью Инспектора и удалите все заливки, которые у него есть .

Сохранение общих цветов в StyleKit

Вот пример создания StyleKit (и кода, который он выводит) в реальном приложении PaintCode, для тех, кто немного больше интересуется аспектами кода.

Вывод

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

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

Получить копию генератора кода PaintCode

Если вы являетесь пользователем Sketch и хотите добавить в свой инструментарий Code Generator для Sketch (стоимостью $ 99), вам может повезти. У нас есть 10 лицензий для раздачи. Чтобы войти, используйте свой Twitter ID для аутентификации.

Победители будут выбраны случайным образом. Мы связываемся с обладателями лицензий, чтобы доставить их лицензии в среду, 29 июля 2016 года.

2015-03-07 в 0:27, admin , рубрики: ios development, mobile development, PaintCode, UI, дизайн интерфейсов, интерфейсы, разработка под iOS

В далеком 2013 году я узнал о проекте PaintCode и был весьма впечатлен увиденным.
Еще бы, каким-то чудом векторные картинки превращаются в строки кода, который в свою очередь вдруг начинает работать в Вашем приложении и вся эта магия всего за 99.99$.
Я долго смотрел на экран монитора и какой-то страх неизведанного отталкивал меня. Еще бы я человек далекий от дизайна и рисования не смог с первого взгляда оценить всего могущества этого проекта. Я отправил ссылки на видео и на сайт проекта нашим дизайнерам и подумал: «Ну вот сейчас, они начнут заниматься настоящими делами!». Но их выражение лица было похоже на мое, еще бы, они не могли понять всех этих замысловатых формул и переменных…

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

Paint

На первый взгляд очень даже простое приложение. Привычные как для дизайнеров так и для программистов вещи:

в верхней части экрана Toolbar;
в левой библиотека объектов;
в центре рабочая зона;
справа инспектор и браузер (для выбора элемента расположенного на рабочей зоне).

Colors — для создания набора цветов Вашего приложения;
Gradients — для создания набора градиентов, которые могут создаваться из базовых цветов созданных в пункте Colors;
Shadows — для создания набора теней, которые могут создаваться из базовых цветов созданных в пункте Colors;
Images — некоторые изображения в трех разрешениях 1x, 2x, 3x добавленные самостоятельно;
Variables — самое интересное! Оставим некоторую интригу.

Expression — некоторое выражение которое может возвращать все из ниже перечисленных;
Number — числовое значение, например тип элемента;
Fraction — доля, число от float от 0 до 1, как свойство progress у UIProgressView;
Angle — угол в отличии от Number, это реально угол, значение от 0 до 360;
Text — некоторый текст, который можно присвоить текстовому полю;
Boolean — 1/0, YES/NO, да/нет, кому как нравится (например нажатие кнопки или скрытие элемента);
Point — координаты точки x и y ;
Size — размер ширина, высота;
Rectangle — прямоугольник состоящий из Position (x, y) и Size (width, height).

StyleKit — объект добавляется в общий набор стилей, подробнее ниже;
Local — этот тип означает, что это локальный объект, который виден только в PaintCode;
Parameter — этот тип означает, что это внешний объект, который виден не только в PaintCode (программист его сможет изменять «руками»).

StyleKit Такая штука которая содержит набор элементов необходимых для использования вне PaintCode, например можно добавить набор цветов, из которых состоит приложение. Программисту остаётся лишь вызвать цвет по названию:

self.view.backgroundColor = [StyleKitHabrahabr backgroundLogo];

Пример:
Мы создали некоторый цвет, а затем использовали его в качестве базового для другого цвета

И тут небольшое отступление.
Как я уже писал, первое знакомство с PaintCode было уже давно, но как-то прошло мимо. И вдруг предоставилась возможность сделать тотальный редизайн приложения и в этот раз я был настроен решительно. Началось внедрение PaintCode, но тут появились некоторые проблемы, наши дизайнеры смогли усвоить только ту часть, что выше! Они хорошо делают свое дело, но когда речь заходила до переменных и создании функций наступал ступор и приходилось доделывать эту работу разработчикам.
Было принято решение делить работу, дизайнер создает цвета и собственно изображение, разработчики создавали необходимые переменные и функции экспортировали StyleKit в проект. И так, далее подключаются разработчики…

Если же выбрать метод Drawing, то создается метод
// Drawing Methods
+ (void)drawLogoHabrWithFrame: (CGRect)frame;

Который в свою очередь добавляется в Ваш класс наследник UIView в метод — (void)drawRect:(CGRect)rect:

— (void)drawRect:(CGRect)rect // Drawing code
[StyleKit drawLogoHabrWithFrame: rect];
>

В общем, схема простая как 2x2.
Примеры содержат как проект PaintCode, так и Xcode, что очень удобно.
Для того, чтобы экспортировать StyleKit (по сути это файл .h и .m в случае Obj-C) нужно перейти в пункт File -> Export .

Итоги

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

«Нарезает» изображения под нужное разрешение парой кликов;
Избавляет от необходимости хранить большое количество картинок в проекте;
Позволяет «оживить» UI — динамически меняйте цвета, добавляйте анимацию, меняйте размеры, ограничивайтесь только Вашей фантазией;
В определенной степени ускоряет процесс разработки;
При хорошей архитектуре проекта, можно быстро изменить внешний вид всего набора элементов (те самые базовые цвета, тенюшки, использование Symbol);
Все цвета в одном месте;
Достаточно быстро прорисовывает элементы;
Хорошая поддержка, отвечали в течении 5 минут и даже подсказали когда у нас появилась вопросы;

Проект состоит из одного файла, что приводит к неудобству при использовании систем контроля версий (Git не может мержить изменения, вносим их по очереди. );
Пограничное состояние инструмента вселяет страх как дизайнерам, так и разработчикам. Одним трудно прикручивать логику, другим трудно рисовать;
Нет удобного разделения переменных на подгруппы, в последствии появляются переменные которые отвечают за одно и тоже действие, чтобы в них быстро ориентироваться, нужно придумать свою какую-то хитрую систему, либо следить за всем одному человеку;
Если в одном проекте использовать один StyleKit, то последний обрастает кучей «переменных» и выражений которые очень трудно использовать (см. пункт выше);
Если использовать несколько StyleKit, то приходится следить в каком именно находится тот или иной элемент, цвет, тень и т.д., что вносит неразбериху при разработке и как следствие приводит к свалке;
Ваш проект становится зависимым от наличия установленной версии PainCode, иначе Вы не сможете быстро вносить изменения для элементов созданных в PainCode:
Дизайнеру пришлось освоить Git;
Нет возможности экспортировать код и получить изображение. Например каким-то чудом Ваш проект PaintCode потерялся, но остался сгенерированный им код, так вот проект из кода восстановить не получится;
Иногда возникают проблемы и не понимание при решении задачи, особенно когда нужно «ресайзить» будущий элемент (Что-то из разряда constraint на iOS)
В настоящее время нет возможность и использовать созданные элементы где-то еще кроме как на iOS и Mac OS, появится ли такое на Android…

Ну и для затравки:

Читайте также: