PaintCode – Translate interface design into iOS code as you like

Once downloaded and installed, we can open it and see its main screen:

Why PaintCode

PaintCode’s interface is very neat and beautiful. So, by now, the question is, why am I using it? Wouldn’t it be nice to just use images as resource files and load them in code?

I believe many friends will have the same question, including myself in the beginning also had such a question. But I got down to it and I found something with PaintCode.

1. First of all, PaintCode generates Core Graphics code, so there is no need to worry about the resolution compatibility of images on different devices. For example, when we use image resources, we need to provide @2x @ 3X versions of the same image with different resolutions. UI resources generated using Paint Code don’t need to do this.

2. It is easy to debug. For example, when we adjust some small ICONS, we need to re-export the pictures every time we make a small modification, which consumes energy. With PaintCode we just need to tweak the preview view and update the generated code. Saves a lot of time adjusting UI resources.

3. In addition, PaintCode is an excellent prototyping tool that helps us quickly create initial demos of our apps.

Of course, PaintCode has its drawbacks, such as the UI code it generates, which is not necessarily the most efficient, and the formal version costs money. I’m going to lay out the features of PaintCode and the benefits it brings, and it’s up to you to decide whether you find it useful and whether it improves your productivity.

Start using PaintCode

To implement the UI for a button in PaintCode, first we click on the Rect tool in PaintCode:

Then draw two thin rectangles on the middle Canvas to form a plus pattern:

The default Fill color is a little light, we can set the color in the properties pane on the right, select the two rectangles on the Canvas, and then in the Fill category, we can set the Fill color:

Let’s change the background color to black:

Once you’ve drawn the picture, in the code area below PaintCode, you can see the UI code that was generated for us:

In the upper left corner of the code area, there are a couple of drop-down menus that let us select the platform that generated the code, and the language, so here we’ve generated Swift code for iOS.

Given the UI code, how do we apply it to our APP? We can do some intermediate things and define a Graphics class:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

class Graphics: NSObject {



    class func getAddImageNormal() -> UIImage {





UIGraphicsBeginImageContextWithOptions (CGSizeMake (20, 20), false, 1.0)



Let color = UIColor(red: 0.000, green: 0.000, blue: 0.000, alpha: 1.000)





        let rectanglePath = UIBezierPath(rect: CGRectMake(0, 9, 20, 2))

        color.setFill()

        rectanglePath.fill()







        let rectangle2Path = UIBezierPath(rect: CGRectMake(9, 0, 2, 20))

        color.setFill()

        rectangle2Path.fill()



        return UIGraphicsGetImageFromCurrentImageContext();



    }



}

In our class, we define a getAddImageNormal class method. We copy the code generated in PaintCode into this method and add two calls to render images:

1

2

3

UIGraphicsBeginImageContextWithOptions (CGSizeMake (20, 20), false, 1.0)

.

return UIGraphicsGetImageFromCurrentImageContext();

This way, the image resource we just made is integrated into the project. Let’s go ahead and put it on top of UIButton:

1

2

3

4

5

6

let addButton = UIButton()

addButton.frame = CGRectMake(0, 0, 20, 20)





addButton.setImage(Graphics.getAddImageNormal(), forState: UIControlState.Normal)

self.navigationItem.rightBarButtonItem = UIBarButtonItem(customView: addButton)

This completes the image setup. Now we can run the program and see the effect:

Successfully set up the image of the button, and the end result is basically the same as achieved with the image resource. And we don’t have to worry about matching images at different resolutions, because PaintCode generates UI code that is inherently vector, so we don’t have to specify @2x @3x resources, which is kind of convenient.

The button we just made only has a default status icon, we should also need a status icon when the user presses the button. Next, we can make simple adjustments in PaintCode. Again, select the pattern drawn in the Canvas and change the fill color to gray in the properties window on the right:

Once set up, PaintCode will update the generated code. We just need to copy the new code and create a new method in the Graphics class to complete the setting of the click status image:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

class func getAddImageSelected() -> UIImage {



UIGraphicsBeginImageContextWithOptions (CGSizeMake (20, 20), false, 1.0)









Let color = UIColor(red: 0.590, Green: 0.590, blue: 0.590, alpha: 1.000)





    let rectanglePath = UIBezierPath(rect: CGRectMake(0, 9, 20, 2))

    color.setFill()

    rectanglePath.fill()







    let rectangle2Path = UIBezierPath(rect: CGRectMake(9, 0, 2, 20))

    color.setFill()

    rectangle2Path.fill()



    return UIGraphicsGetImageFromCurrentImageContext();



}

Update the UIButton initialization code again:

1

2

3

4

5

let addButton = UIButton()

addButton.frame = CGRectMake(0, 0, 20, 20)

addButton.setImage(Graphics.getAddImageNormal(), forState: UIControlState.Normal)

addButton.setImage(Graphics.getAddImageSelected(), forState: UIControlState.Highlighted)

self.navigationItem.rightBarButtonItem = UIBarButtonItem(customView: addButton)

This completes the configuration of UIButton view resources.

Well.. It’s more convenient. PaintCode reflects a different development model, and whether it improves your productivity is a matter of opinion. If used skillfully, it can really speed up UI development. An added benefit is that the generated image source code is stretchable, unlike our pre-defined traditional pixel images. So even if larger resolution devices appear in the future, we will be able to accommodate them with very little cost, which is one of its advantages.

conclusion

Ok, so with that introduction, we used a simple example that basically showed the main features of PaintCode. If you are interested, you can download a trial version of it to try it out. Well, the official version costs $99, but it’s a little pricey, depending on how you feel about it. My personal feeling is that if you’re on a team, it really depends on how well the designer accepts PaintCode. After all, they still design the UI resources, whether it’s in Photoshop or PaintCode. If you’re an indie developer, try out the demo version, where you’re responsible for all the graphics and code, and see if it takes the hassle out of exporting images and multi-resolution generation.

This site articles are original content, if you need to reprint, please indicate the source, thank you.

If you find this article enjoyable to read, you can also read it here
Buy me a cup of coffee~


If you want to read more pleasant articles, you can also come to the wechat official account
swift-cafeDiscover more.


You can also proceed
RSS feedsReading is more convenient.



Follow the wechat official account
swift-cafe