Core Graphics Tutorial Part 1: Getting Started

@juztinowenz - by ā€œdraw itā€, do you mean make an image and use an image view?

One good reason for using Core Graphics for drawing a circle would be that this one piece of code will work on all devices and scale automatically, rather than having many images to fit iPhone/iPad and retina/non-retina.

Perfect @caroline thanks for that, clears up my issue exactly. Lastly, the aliasing (or lack of) is creating a jagged, thicker stroke; is there any way of minimising that to create a smooth, thick ring? very much appreciated for the quick reply

Yup, thatā€™s what I meantā€“and okay, I see what you mean. :slight_smile:

@allenwixted - Iā€™m surprised it looks chunky. Have you run it in the simulator or on the device?

Hereā€™s Flo on an iPhone 7 in the storyboard zoomed in at 200%

It looks fine in the simulator.

hmm it must be my scale size. When I increase to 200% it looks fine but when I lower the % it must just render it oddly. My apologies. In storyboard it looks clunky still but is fine simulated. Lesson learned. Youā€™ve been super very much appreciated Caroline!

Hi Caroline,

The tutorial was really fantastic for the beginners to learn core graphics and helpful for creation of Pie Charts too.

Thank you very much for sharing this Tutorial.

1 Like

Okay. I am not a fan of using the storyboard so I replicated this tutorial with just code.

My draw rect function is not being called even though setNeedsDisplay is being hit. I know this because my print statement right above setNeedsDisplay is working fine.

I think it has to do with the way Iā€™m getting an instance of CounterView in my main ViewController. Hereā€™s what I gotā€¦

ViewController:

@danboyle8637 - You appear to have two different CounterViews.

One is called counterView and does not appear to be added to the view hierarchy. However, this is the view that you are using for the counter.

The other is called Counter. (Capital letters should be reserved for types rather than instances). This is the one that is added to the view hierarchy, but you donā€™t seem to be adding to its counter.

Thanks for responding Caroline.

I fixed the casing on my counter view. As far as I understand, this counter view and setup is to setup the view that will appear. I can access the properties only inside the closure.

The other counterView which is the instance of my CounterView letā€™s me access the properties throughout the whole class. So in my buttonPushButton (terrible name btw sorry)ā€¦ I can access the counter property in the CounterView.

And my counter does update. It goes up and down with each button click. But the setNeedsDisplay never redraws the CounterView.

Here is the bottom half of my ViewController. And Iā€™ll respond one more time with my CounterView.

I am beginning to think it has something to do with my buttonPushButton method.

Hereā€™s my CounterView:

Hey Caroline. I got it working!

I understand and at the same time I donā€™t understand. Ha! But thatā€™s what learning this has been from the beginning.

I appreciate you responding and looking at my code. What you said helped me fix the issue and helped me structure the real app I am working on better.

Now on to the graph partā€¦ what Iā€™m really excited about!

Oh well done!

I hope one day youā€™re converted to using the storyboard - I find it great for visual development. Itā€™s a bit of a learning curve to start with, but it saves all that auto layout code and is easier to nudge views around the screen.

Hi Caroline. I actually stated with the storyboard, but Iā€™m developing an app right now that has an pretty complex dashboard view with so many elements that the storyboard gets too confusing.

Iā€™m still pretty new at all of this, but I do have a questionā€¦ with the frame coordinates, who did you come up with those?

I can layout a view with constraints and it looks great but when I print out the frame of my views, I donā€™t get coordinates.

Is there a way to layout a view and then set the exact coordinates for the frames?

I hope that makes sense.

Thanks for your help again!

@danboyle8637 You can layout and then use print(view.frame) to work out the coordinates of the frames. However, I wouldnā€™t recommend using frames as a general rule, as they donā€™t convert to different size classes. Auto layout rules.

You donā€™t have to set up auto layout in the storyboard. You can do something like in this tutorial:

https://www.raywenderlich.com/125718/coding-auto-layout