PaintCode 2, a brief digression and notes
Back in 2013, I found out 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 working in your application and all this magic for only $ 99.99.
I looked at the monitor screen for a long time and some fear of the unknown pushed me away. Of course, I am a person far from design and drawing and could not at first glance appreciate the power of this project. I sent links to the video and to the project site to our designers and thought: “well, now they will start doing real work!”. But their expression was similar to mine. Still, they could not understand all these intricate formulas and variables ...
PaintCode is an interesting application, if only because it has a borderline 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 , describing the process of creating elements in sufficient detail and I would like to make a small digression, as well as point out some remarks revealed while working with this product.
')
At first glance, a very simple application. Habitual for both designers and programmers things:
Everything is clear with the upper part, each schoolchild painted in Paint and knows how to draw a circle, a square, insert text and an asterisk.
Let us analyze the left part, it consists of the following points:
And here about variables in more detail. It is possible to add some variable that will interact with your interface element, for example, change its color, angle, text, state, perhaps type, location, size and location.
Types of variables:
For each element of the library, you can specify a unique name, and its type: StyleKit, Local, Parameter (the TypeKit type is absent from the Variables):
StyleKit Such a thing that contains a set of elements necessary for use outside of PaintCode, for example, you can add a set of colors that the application consists of. The programmer can only call the color of the name:
self.view.backgroundColor = [StyleKitHabrahabr backgroundLogo];
Similarly, gradients, shadows, created interface elements are added to StyleKit. Those. a certain set which further serves the developer as an aid in creating the UI.
Example:
We created some color and then used it as a base color for another color.
Added a rectangle to the canvas and assigned a color to it by dragging and dropping // habrastorage.org / files / 10a / ffd / a57 / 10affda57f1741fd8ebc50714579dc4a.png "/>
Added a text field to the canvas, typed the letter “H”, converted the text into bezier curves and added a little shadow to the resulting element (created earlier from the color created from the first color)
It's simple!
I consider it a great advantage to create elements inheriting from the ones created earlier, for example, creating a shadow from the base color, as soon as you change the base color, all the heirs will immediately accept the changes. With proper design is a very convenient thing.
It is possible to import PSD, draw in your favorite editor and transfer to the project. As part of drawing, designers will not make much effort.
Created elements, without departing from the cash register, can be cut into the necessary permissions, 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 then there were some problems, our designers were able to learn only the part that is higher! They are doing 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 actual image, the developers created the necessary variables and functions exported StyleKit to the project. And so, then connect the developers ...
The element created by the designer simply needs to be displayed on the screen, and sometimes somehow revived.
PaintCode allows you to create interface elements in the form of simple UIImage and UIVew, which will move, spin, change color, disappear, etc., more precisely, it creates a method of drawing an instance of UIView.
Let's start with a simple one, in order to get a UIImage from the created image, you need to select the canvas and specify a method in the inspector on the right that will return StyleKit.
In the drop-down list: no method, the method of "drawing", the image, and "drawing" and the image.
If you select image generation, a method will appear in StyliKit, in my case it will be
// Generated Images
+ (UIImage *) imageOfLogoHabrWithFrame: (CGRect) frame;
When called, it creates an image of the current resolution, ready to use.
If you choose the Drawing method, the method is created.
// Drawing Methods
+ (void) drawLogoHabrWithFrame: (CGRect) frame;
Which in turn is added to your class by inheriting a UIView to the method - (void) drawRect: (CGRect) rect:
- (void) drawRect: (CGRect) rect {
// Drawing code
[StyleKit drawLogoHabrWithFrame: rect];
}
In order to redraw your instance again, for example when changing a frame, other parameters or animation, the method is called on the instance:
[self setNeedsDisplay];
In general, the scheme is as simple as 2x2.
Examples include both the PaintCode project and Xcode, which is very convenient.
In order to export StyleKit (in fact, this is a .h and .m file in the case of Obj-C) you need to go to the item File -> Export ...
Then we add files to the project and use.
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 , expression language and dynamic forms . And then what is enough for your imagination.
PaintCode is quite a powerful and interesting tool in good hands. Allows you to create a beautiful "live" interface, "facilitate" the application because No need to store all the "sliced" pictures. But before using it is necessary to weigh everything, and this is what we decided:
pros
Minuses
PS
It is very easy to fall on 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 evolve in order to create a beautiful, competitive design, a “live” UI and other impressive things. Well, and probably the main question that torments many throughout the whole post: “Is it worth at least his money, then?”. Definitely worth it! You just need to figure it out)
Well, to seed my examples:
This is how profi works:
I looked at the monitor screen for a long time and some fear of the unknown pushed me away. Of course, I am a person far from design and drawing and could not at first glance appreciate the power of this project. I sent links to the video and to the project site to our designers and thought: “well, now they will start doing real work!”. But their expression was similar to mine. Still, they could not understand all these intricate formulas and variables ...
PaintCode is an interesting application, if only because it has a borderline 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 , describing the process of creating elements in sufficient detail and I would like to make a small digression, as well as point out some remarks revealed while working with this product.
Paint
')
At first glance, a very simple application. Habitual for both designers and programmers things:
- at the top of the screen toolbar;
- in the left library of objects;
- in the center of the work area;
- on the right is an inspector and a browser (to select an element located on the working area).
Everything is clear with the upper part, each schoolchild painted in Paint and knows how to draw a circle, a square, insert text and an asterisk.
Let us analyze the left part, it consists of the following points:
- 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 section;
- Shadows - to create a set of shadows that can be created from the base colors created in the Colors section;
- Images - some images in three resolutions 1x, 2x, 3x added independently;
- Variables - the most interesting! Leave some intrigue.
Color creation
Create gradient
Making shadow
Add image in 3 resolutions
Variable creation
And here about variables in more detail. It is possible to add some variable that will interact with your interface element, for example, change its color, angle, text, state, perhaps type, location, size and location.
Types of variables:
- Expression is an expression that can return all of the following;
- Number is a numeric value, such as an element type;
- Fraction - fraction, number from float from 0 to 1, as the progress property of the UIProgressView;
- Angle - angle, unlike Number, is a real 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 item);
- 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 (the TypeKit type is absent from the Variables):
- StyleKit - the object is added to the common 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 with "hands").
Stylekit
StyleKit Such a thing that contains a set of elements necessary for use outside of PaintCode, for example, you can add a set of colors that the application consists of. The programmer can only call the color of the name:
self.view.backgroundColor = [StyleKitHabrahabr backgroundLogo];
Similarly, gradients, shadows, created interface elements are added to StyleKit. Those. a certain set which further serves the developer as an aid in creating the UI.
Example:
We created some color and then used it as a base color for another color.
Create color from base
Added a rectangle to the canvas and assigned a color to it by dragging and dropping // habrastorage.org / files / 10a / ffd / a57 / 10affda57f1741fd8ebc50714579dc4a.png "/>
Added a text field to the canvas, typed the letter “H”, converted the text into bezier curves and added a little shadow to the resulting element (created earlier from the color created from the first color)
Add shadow
It's simple!
I consider it a great advantage to create elements inheriting from the ones created earlier, for example, creating a shadow from the base color, as soon as you change the base color, all the heirs will immediately accept the changes. With proper design is a very convenient thing.
It is possible to import PSD, draw in your favorite editor and transfer to the project. As part of drawing, designers will not make much effort.
Created elements, without departing from the cash register, can be cut into the necessary permissions, by simply pressing the “Export” button
Export PNG
Something like this
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 then there were some problems, our designers were able to learn only the part that is higher! They are doing 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 actual image, the developers created the necessary variables and functions exported StyleKit to the project. And so, then connect the developers ...
Code
The element created by the designer simply needs to be displayed on the screen, and sometimes somehow revived.
PaintCode allows you to create interface elements in the form of simple UIImage and UIVew, which will move, spin, change color, disappear, etc., more precisely, it creates a method of drawing an instance of UIView.
Let's start with a simple one, in order to get a UIImage from the created image, you need to select the canvas and specify a method in the inspector on the right that will return StyleKit.
Choosing a drawing method
In the drop-down list: no method, the method of "drawing", the image, and "drawing" and the image.
If you select image generation, a method will appear in StyliKit, in my case it will be
// Generated Images
+ (UIImage *) imageOfLogoHabrWithFrame: (CGRect) frame;
When called, it creates an image of the current resolution, ready to use.
If you choose the Drawing method, the method is created.
// Drawing Methods
+ (void) drawLogoHabrWithFrame: (CGRect) frame;
Which in turn is added to your class by inheriting a UIView to the method - (void) drawRect: (CGRect) rect:
- (void) drawRect: (CGRect) rect {
// Drawing code
[StyleKit drawLogoHabrWithFrame: rect];
}
In order to redraw your instance again, for example when changing a frame, other parameters or animation, the method is called on the instance:
[self setNeedsDisplay];
In general, the scheme is as simple as 2x2.
Examples include both the PaintCode project and Xcode, which is very convenient.
In order to export StyleKit (in fact, this is a .h and .m file in the case of Obj-C) you need to go to the item File -> Export ...
Export StyleKit
Then we add files to the project and use.
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 , expression language and dynamic forms . And then what is enough for your imagination.
Results
PaintCode is quite a powerful and interesting tool in good hands. Allows you to create a beautiful "live" interface, "facilitate" the application because No need to store all the "sliced" pictures. But before using it is necessary to weigh everything, and this is what we decided:
pros
- "Cut" the image under the desired resolution with a couple of clicks;
- Eliminates the need to store a large number of images in the project;
- Allows you to "revive" UI - dynamically change colors, add animation, change sizes, be limited only by your imagination;
- To a certain extent, accelerates the development process;
- With a good project architecture, you can quickly change the appearance of the entire set of elements (the same basic colors, shadows, use Symbol );
- All colors in one place;
- Quickly draws elements;
- Good support, answered within 5 minutes and even prompted when we have questions;
Minuses
- The project consists of a single file, which leads to inconvenience when using version control systems (Git cannot be changed, we make them in turn !!!);
- The borderline state of the tool instills fear in both designers and developers. It is difficult for one to fasten logic, for others it is difficult to draw;
- There is no convenient division of variables into subgroups, subsequently there are variables that are responsible for the same action, in order to quickly navigate in them, you need to invent your own kind of cunning system, or follow all one person;
- If you use one StyleKit in one project, the latter is overgrown with a bunch of “variables” and expressions that are very difficult to use (see the paragraph above);
- If you use several StyleKits, you have to keep track of exactly which particular element, color, shadow, etc., which causes confusion during the development and as a result leads to a dump;
- Your project becomes dependent on 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 learn Git;
- There is no possibility 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, so the project cannot be restored from the code;
- Sometimes there are problems and misunderstandings when solving a problem, especially when you need to “resize” a future element (Something of the constraint on iOS)
- At present, it is not possible to use the created elements anywhere else except on iOS and Mac OS, does this appear on Android ...
PS
It is very easy to fall on 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 evolve in order to create a beautiful, competitive design, a “live” UI and other impressive things. Well, and probably the main question that torments many throughout the whole post: “Is it worth at least his money, then?”. Definitely worth it! You just need to figure it out)
Well, to seed my examples:
Example 1
<img src = " 
"alt =" image "/>
"alt =" image "/>Example 2
Example 3
This is how profi works:
Source: https://habr.com/ru/post/252409/
All Articles