We draw code in Swift, PaintCode

While in the next room they cook Olivier, I write a small tutorial on how to draw code. Immediately presented lines of code with fractional numbers, where we draw a line by points. And to calculate the radius of a circle, we take snake venom, secure photo storage in iCloud and whisper a spell. Scares, I understand. Even in the video on YouTube put a joke:

- “ Aaastanovite, please, here's the store, ” shouted the hero of the Russian TV series.

In general, dear friend, you are right. There will be both fractional numbers and a bunch of lines of code. But it will be much easier. Interesting? Get down to business.

To work, you will need the PaintCode utility. Open the application and see an interface similar to Sketch:
')


I like this continuity.

To begin, set the size of the canvas. I recommend using a value from 100 to 1000 pixels. It makes no sense to put more, but by putting less than 100 pixels, you can get a large fractional part, and as a result - friezes when drawing. We will set 400x400 pixels and name the canvas Apple Icon :



I recommend using the correct names for the canvas, at the end of the tutorial it will be clear why. But for the layers the names are not important, they can be ignored.

Add an icon to the canvas, set the size and place it in the center. It should work like this:



You can take any icon for experiments, the main thing is not a raster one. If you are satisfied with this result, you can export and go to Xcode.
But I will show a useful feature. Now the icon is black, and you want to be able to change the color. To do this, look in the upper left corner, and see all the colors that are obtained from the object. Rename the color to IconColor and set the Parameter mode.



It's all. It remains to export the generated code. At the top right you will find the Export button. Fill in the name and other fields as desired and save the file:

Let's go to Xcode

Import the file into the project that was exported from PaintCode . For curiosity, you can browse through it, but there is little interesting.

In Xcode, we create an ApppleIconView class inherited from UIView . Also, override the draw method:

class AppleIconView: UIView { override func draw(_ rect: CGRect) { IconStyleKit.drawAppleIcon( frame: rect, resizing: .aspectFit, iconColor: UIColor.black ) } } 

IconStyleKit is the name specified during the export. drawAppleIcon - the generated method name, based on the canvas name. And iconColor is the color, which is now set as a parameter. As you can see, convenient methods generated by PaintCode .

AppleIconView also needs to set a transparent background color. Do not forget to do it.

Add an AppleIconView object:

 class Controller: UIViewController { override func viewDidLoad() { super.viewDidLoad() let iconView = AppleIconView( frame: CGRect.init( x: 0, y: 200, width: 70, height: 70) ) iconView.center.x = self.view.frame.width / 2 self.view.addSubview(iconView) } } 

It remains to run the project. If everything is done correctly, you will see the logo drawn by the code:

Bias opinion of the author

I mainly use PDF in my iOS apps. Why use PaintCode ? Just like that - it makes no sense. But if you have the same icon should have several colors - PaintCode helps out (if the icon is of the same color, you can use tintColor ). The elements drawn are also easier to animate.

A practical example is my SPPermission library :



For each resolution, I use the icon drawn by PaintCode . The scheme of their 3-colors can be changed directly in the code.

For those who are more pleasant to watch videos, once again I will refer to the tutorial on YouTube :


Holiday greetings!