Drawing icons in Xamarin using PaintCode

A few months ago I came to know PaintCode. PaintCode is a nice piece of application that probably will put an end to all the icon dramas that app developers have. As a programmer I find it very annoying to prepare all the different sizes and shapes of icons for different screen sizes and different platforms. What could be better than bringing the icons (and vector graphics) into your application as code?

Here, you will find a sample Xamarin iOS project which I created, as well as a little bit of discussion about a problem I faced while doing that experiment.

Basically the steps are very simple. Once you exported your vector graphic from PaintCode and placed it in your project you then need to create a custom UIView and override the Draw method. In that method you need to call the static method to basically do the actual drawing.

I also added other perks to my custom view (called BaseballerIcon) like a Color field to  set the colour of the icon and a Frame property to set the actual frame and a switch to turn off and on drawing while resizing. Pretty straightforward if you look at the code.

However, I had one concern and one issue.

Something I was worried about and was my motive to create the sample project was the performance. After all drawing an image is just the matter of drawing the pixels and the memory and speed is calculable. But what about drawing the lines using Core Graphics and in my case not a simple icon. Basically the set of icons that I needed to take into the app had lots of curves and strokes. Therefore I wasn’t sure how it would perform. For that I added a StopWatch to calculate the time required to draw my Baseballer icon.

I tried the code on iPhone 6+ as well as SE and here is my observation:

The time required for drawing the icon has an initial peak and after that drops to a very short amount. The initial time was about 45ms and after that the drawing takes 4ms all the way up to 7ms (12ms on iPad – bigger screen). It’s as if CG learns how to draw the shape faster. However, if you turn off the redraw and just resize the icon the Draw will not get called at all and the time stays on 0ms. But your image gets blurry when you scale up.

I also faced an issue making the icon transparent. That basically took a lot of time. I tried pretty much most of the solutions recommend by others but couldn’t get it to work. What I wanted was an image view that was self aware of it’s transparent background. The more I tried the less I found. Every time, I hit a black background no matter what sort of filter I used. Apparently when you override the Draw method then setting the background colour to UIColor.Clear or Opaque to false will be completely ignored. At last I figured that I have to set the  Opaque outside the image itself at the time of creation.

That is a bit annoying but that’s the only way that worked for me.

Xamarin PaintCode Sample Project 

Leave a Reply

Your email address will not be published. Required fields are marked *