Group Group Group Group Group Group Group Group Group Forums

Core Graphics Tutorial Part 1: Getting Started

Learn how to draw with Core Graphics, using modern techniques such as IBDesignable, IBInspectable, and Swift!

This is a companion discussion topic for the original entry at


is this tutorial ‘Core Graphics’ by Caroline for Swift 2 (Xcode 7) already available?


No, this hasn’t been updated for Swift 2 and Xcode 7 yet, but if you do have any problems as you are going through it, then just post in the forums and I can help you through it.

Hi Caroline!

Thank you very much for your kind answer. If I should have any problems with this tutorial, I will post it.



Thank you so much for this excellent tutorial - I really learned a great deal from it and it was very clear and easy to follow :slightly_smiling:

1 Like

Thank you so much for this excellent tutorial, it will be better if there have Object-C’s code!!!:blush:

Thank you for your kind words :slight_smile: - there is an older Core Graphics tutorial that is written in Objective-C that may help:

Part 1 starts here:

Thank you so much:blush:

The label keeps increasing beyond 8. Not sure if it did this before the most recent Xcode 7.3 and Swift 2.x. There probably needs to be a check in the ViewController but then you’d have to expose the NoOfGlasses constant in CounterView.

This is actually deliberate. The percentage shouldn’t go above 100% but if you drink 12 glasses in a day, this should be recorded.

But yes, if you didn’t want to record this, you’d need to expose NoOfGlasses.

Thank you for this tutorial, :slight_smile: I tested it in Swift 2.2, it will only have minor warnings, and people who know a little bit swift should know how to fix this.

1 Like

Hi Caroline,

Thank you for this tutorial. My only question is, how do those custom buttons be something like the normal buttons that looks reacting if clicked? Because currently they look like just images drawn and doesn’t give any feedback that they were being touched.

Thanks again!

That’s a very good question. If you download the project at the end of part 3, the buttons there are dark when pressed.

Have a look at the code in PushButtonView. drawRect(_:) draws a darker radial gradient when the button is highlighted during the press. (I’m sure a designer would do it better! but I wanted to demonstrate a radial gradient.)

Hey, even after we change the layer of the button, the interactive interface is still a rectangle(100x100) , i mean if i click on the edge corners(of the parent rectangle) the button will still work. how can i make the button itself of the shape of the path that we made (in this case circular/oval)

like if i touch on the black surface , the button will still work.
any way to clip away the unwanted portion(black one)?
any solution?

Hi darkknight - Perhaps you could describe exactly what you are doing. Are you following the tutorial?

Have you tried setting backgroundColor to UIColor.clearColor() (outside of drawRect())?

No i just stumbled upon the tutorial…but i am going to follow it.:slight_smile:
But in meantime this is my Q
i do not want to set my background color of the button to clearview(actually i set it to black deliberately
) but clip/delete that black section from the button itself so that all that is left of button is only the blue oval.

Part 2 of the tutorial describes clipping areas about half way through.

//set up background clipping area
var path = UIBezierPath(roundedRect: rect,
    byRoundingCorners: UIRectCorner.AllCorners,
    cornerRadii: CGSize(width: 8.0, height: 8.0))

Found it…the property that i was lookin fr was ‘pointInside’.

Hello, great tutorial. Very clear & every bit of code works as discussed! :slight_smile: A very elementary question if I may.

When you say “drag a UILabel to the center of the Counter View, and make sure it is a subview of the Counter View”. How exactly do I specify it to be subview of Counter View? Do it in code like self.view.addSubview(label)?


very nice tutorial, thanks.

1 Like