Icons are essential in iOS development. They can be used to display navigational information throughout your application, many of which will be familiar to the user, such as the search and home icon, as they are similar throughout app design.

But what is the best way of delivering these icons to your users? We could create image assets, drag them into your project and set a UIImageView image property to that icon. This is simple, easy and painless.

Another option is to draw your icon using CAShapeLayer. This sounds like more work than the original option, but don’t tune out just yet because I am going to explain to you the advantages of drawing your assets using CAShapeLayers and UIBezierPaths.

  1. Your drawing is going to look crystal clear on any screen, no matter what screen resolution you are working with. You can draw your icon on 1x, 2x or future 5x screens and it will not degrade at all.
  2. If you have to change your icon color to indicate a selected state, this is as easy as one line of code setting the color of the CAShapeLayer.
  3. You are able to make adjustments to the size, line thickness, color and other properties with minimal code change as opposed to creating multiple assets for different sizes.
  4. If you have one image asset, that needs to also have a selected state. You there are two image assets. Each image asset will need to exist in 1x, 2x and 3x resolution. Now you have six image assets. Six image assets which are a variation of one image. This is not efficient and will increase your application bundle size, which means larger downloads every time your user updates your app.

Hopefully, now I have convinced you that drawing your icons is a good idea, let me now show you how easy it is to do!

Tutorial:

We are going to start with a single view application template. Inside the first view controller, we are going to put a UIView and two buttons. The two buttons are going to be used to cycle through our shapes that we will be drawing inside our UIView. Connect the UIView and two buttons up with some outlets and IBActions like I have in the picture below.

Screen Shot 2018-04-14 at 3.52.32 PM.png

I always like to deal with degrees instead of radians so I have used a small utils class with a top-level function to help me work in degrees. You can copy it below.

Now we are going to start drawing our shapes, all of our shapes are going to be created using UIBezierPaths. Our UIBezierPaths are going to be instantiated with a CGRect which is going to be the bounds of our UIView. Inside this coordinate space we are going to be manually drawing the lines, points, and arcs of the shapes. This requires a little bit of practice but is very rewarding once you get the hang of it. For now, you can just copy some of the shapes I have created for you.

Now we just have to add the code to our UIViewController to show our UIBezierPaths as CAShapeLayers. Here you can see that we are instantiating an array of CAShapeLayers which is going to contain all of our shapes.

We have an index which we will be modifying using our two buttons, previous and next. Every time the index changes, our property observer, didSet, on the index will change the current shape being displayed inside our UIView, called shapeView.

If we wish to modify the stroke color, fill color, stroke width of the icons we can do so inside the shapeCreator helper function.

When you build and run your project you should see something similar to this screenshot. You should be able to cycle through a selection of four icons. I would encourage you to have a play around with UIBezierPaths to see what icons you can create inside your applications using CAShapeLayers.

Screen Shot 2018-04-14 at 4.12.49 PM

The source code for the finished CAShapeLayer example project is available here:

https://github.com/rtking1993/CAShapeLayers

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s