PaintCode 2, a brief digression and comments

Back in 2013, I learned about the PaintCode project and was very impressed with what I saw. Still, by some miracle, vector images turn into lines of code, which in turn suddenly starts to work in your application and all this magic is only $ 99.99.

I looked at the monitor screen for a long time and some fear of the unknown pushed me away. Still, I am a person far from design and drawing and could not at first glance appreciate the full power of this project. He sent the links to the video and the project website to our designers and thought: “Well, now they will start to do real things!”. But their expression was like mine. Still, they could not understand all these intricate formulas and variables ...

PaintCodeAn interesting application, if only because it has a border state, it seems to be for designers, but it is also for programmers - PaintCode , what is it really like?
Despite the abundant amount of documentation and examples that describe in detail and simply enough the process of creating elements, I would like to take a short digression, as well as point out some of the comments identified while working with this product.

Paint

At first glance, a very simple application. Things familiar to both designers and programmers:

• at the top of the Toolbar screen;
• in the left library of objects;
• in the center is the work area;
• inspector and browser on the right (to select an item located on the working area).

With the upper part, everything is clear, each student painted in Paint and knows how to draw a circle, a square, insert text and an asterisk.
Let's analyze the left part, it consists of the following items:

• Colors - to create a set of colors for your application;
• Gradients - to create a set of gradients that can be created from the base colors created in the Colors item;
• Shadows - to create a set of shadows that can be created from the base colors created in the Colors item;
• Images - some images in three resolutions 1x, 2x, 3x added independently;
• Variables - the most interesting! Let's leave some intrigue.

But about Variables in more detail. It is possible to add some variable that will interact with your interface element, for example, change its color, tilt angle, text, state, possibly type, location, size and location.

Types of Variables:

• Expression - some expression that can return all of the following;
• Number - a numeric value, such as the type of element
• Fraction - fraction, number from float from 0 to 1, as the progress property of UIProgressView;
• Angle - an angle, unlike Number, this is really an angle, a value from 0 to 360;
• Text - some text that can be assigned to a text field;
• Boolean - 1/0, YES / NO, yes / no, as you like (for example, pressing a button or hiding an element);
• Point - coordinates of the point x and y;
• Size - size width, height;
• Rectangle - a rectangle consisting of Position (x, y) and Size (width, height).

For each element of the library, you can specify a unique name, and its type: StyleKit, Local, Parameter (there is no StyleKit type in Variables):

• StyleKit - the object is added to the general set of styles, more details below;
• Local - this type means that it is a local object that is visible only in PaintCode;
• Parameter - this type means that it is an external object that is visible not only in PaintCode (the programmer will be able to change it “by hand”).

StyleKit Such a thing that contains a set of elements necessary for use outside PaintCode, for example, you can add a set of colors that make up the application. The programmer can only call the color by name:

self.view.backgroundColor = [StyleKitHabrahabr backgroundLogo];

Similarly, gradients, shadows, and created interface elements are added to StyleKit. Those. a certain set, which later serves as a help to the developer when creating the UI.

Example:
We created some color and then used it as a base for another color
We added a rectangle to the canvas and assigned it a color by simply dragging and dropping // habrastorage.org / files / 10a / ffd / a57 / 10affda57f1741fd8ebc50714579dc4a.png "/>
Added a text box to the canvas, printed the letter" H ", converted the text to bezier curves and added to the resulting a little shadow element (created earlier from a color created from the first color)
Everything is simple!

A big plus, I think, is the ability to create elements inheriting from previously created ones, for example, creating a shadow from a base color, as soon as you change the base color, all the heirs will immediately accept the changes. With proper design, a very convenient thing.

It is possible to import PSD, draw in your favorite editor and transfer to the project. As for drawing, designers will not be able to figure out a lot of work.

The created elements, without departing from the cash register, can be cut in the required resolutions, by simply pressing the “Export” button


And here is a small digression.

As I wrote, the first acquaintance with PaintCode was a long time ago, but somehow passed by. And suddenly I had the opportunity to make a total redesign of the application and this time I was determined. The introduction of PaintCode began, but some problems appeared here, our designers were able to learn only the part that is higher! They do their job well, but when it came to variables and creating functions, there was a stupor and the developers had to finish this work.

It was decided to share the work, the designer creates the colors and the image itself, the developers created the necessary variables and functions exported StyleKit to the project. And so, then developers connect ...

Code

The element created by the designer simply needs to be displayed on the screen, and sometimes to somehow come to life.
PaintCode allows you to create interface elements in the form of simple UIImage and UIVew, which will move, rotate, change color, disappear, etc., more precisely, it creates a method for drawing an instance of UIView.
Let's start with a simple one, in order to get UIImage from the created image, you need to select the canvas and specify the method that StyleKit will return in the inspector on the right.


In the drop-down list: there is no method, the "draw" method, the image, and the "draw" and the image.
If you select image generation, a method will appear in StyliKit, in my case it is
// Generated Images
+ (UIImage *) imageOfLogoHabrWithFrame: (CGRect) frame;
When called, an image of the current resolution is created, ready for use.

If you select the Drawing method, then the
// Drawing Methods
+ (void) drawLogoHabrWithFrame: (CGRect) frame;

Which in turn is added to your class by the UIView descendant in the method - (void) drawRect: (CGRect) rect:

- (void) drawRect: (CGRect) rect {
// Drawing code
[StyleKit drawLogoHabrWithFrame: rect];
}

To redraw your instance, for example, when changing a frame, other parameters or animation, the method is called on the instance:
[self setNeedsDisplay];

In general, the circuit is simple as 2x2.
The examples contain both the PaintCode project and Xcode, which is very convenient.
In order to export StyleKit (in fact it is a .h and .m file in the case of Obj-C), go to File -> Export ...

Then we add files to the project and use it.

PaintCode can generate code for iOS - Objective-C, Swift, C # Xamarin and for Mac OS - Objective-C, Swift. Supports iOS 5+, Mac OS 10.7+.

By and large, the developer needs to master the use of variables , the language of expressions and dynamic forms . And then what your imagination is enough for.

Summary

PaintCode is a powerful and interesting tool in good hands. Allows you to create a beautiful "lively" interface, to "facilitate" the application because There is no need to store all “sliced” pictures. But before using it is necessary to weigh everything, and this is what we decided with:

Pros

• “Cuts” images to the desired resolution with a couple of clicks;
• Eliminates the need to store a large number of pictures in the project;
• Allows you to "revive" the UI - dynamically change colors, add animation, resize, limit only to your imagination;
• To some extent, accelerates the development process;
• With a good architecture of the project, you can quickly change the appearance of the entire set of elements (the same basic colors, shadows, the use of Symbol );
• All colors in one place;
• Draws elements quickly enough;
• Good support, answered within 5 minutes and even suggested when we had questions;

Minuses

• The project consists of a single file, which leads to inconvenience when using version control systems (Git cannot merge changes, we make them in turn !!!);
• The borderline state of the tool inspires fear for both designers and developers. It’s hard for some to screw on logic; others are hard to draw;
• There is no convenient separation of variables into subgroups, subsequently variables appear that are responsible for the same action, in order to quickly navigate in them, you need to come up with some kind of tricky system, or keep track of all one person;
• If you use one StyleKit in one project, then the latter is overgrown with a bunch of "variables" and expressions that are very difficult to use (see paragraph above);
• If you use several StyleKit, you have to keep track of which particular element, color, shadow, etc. is located, which introduces confusion during development and as a result leads to a dump;
• Your project becomes dependent on the presence of the installed version of PainCode, otherwise you will not be able to quickly make changes to the elements created in PainCode:
• The designer had to master Git;
• There is no way to export the code and get the image. For example, by some miracle, your PaintCode project was lost, but the code generated by it remained, and so the project cannot be restored from the code;
• Sometimes there are problems and lack of understanding when solving a problem, especially when you need to “resize” a future element (Something from the category of constraint on iOS)
• Currently, there is no way to use the created elements elsewhere except on iOS and Mac OS, whether this will appear on Android ...

PS
It's very easy to fall for the promises of developers, but sometimes it's worth it! As soon as our project gets into the AppStore, materials will be added to the article. PaintCode is a good tool for a small project, a small company. We really hope that the tool will continue to develop in order to create a beautiful, competitive design, a “lively” UI and other impressive things. Well, probably the main question that torments many throughout the post: “Is it worth it at least for its money, then?”. Definitely worth it! You just need to figure it out)

Well, for seed, my examples are:




And this is how profi works: