Learn the fundamentals of drawing for iOS and macOS using Core Graphics. In this series you’ll learn how to draw basic shapes, create your own custom paths, how to leverage clipping masks to control drawing, and create custom gradients. You’ll also learn about color spaces, how to work with images and text. Along the way you’ll build a custom progress indicator that animates. Core Graphics is a foundational technology that has been around for a long time. Investing some time to learn how it works will be time well spent and will help you understand a lot more about how drawing is done on iOS and Mac.
Length: about 2 hours
Sam introduces the new series on Core Graphics, what to expect, and what the series covers.
Learn how to create basic shapes using Core Graphics. We’ll start by creating a playground that we can use to quickly see the results of our work.
Learn the basics of UIBezierPath and CGPathRef for representing drawing operations as a primitive type. Paths are incredibly useful to drawing and can be used to represent arbitrary lines, curves, and shapes.
What are color spaces? Sam discusses the common color spaces you might use and what they are used for. Why would you use these methods instead of just using UIColor? If you want cross-platform compatible drawing code, you’ll want to know how this works.
Gradients are slowly returning to be part of the common iOS design aesthetic once again (after iOS 7 introduced an entirely flat design paradigm). Subtle gradients can be used to create interesting designs, provide necessary contrast for drawing text on top of photos, and provide a realistic feel to custom controls. Learn how to create linear and radial gradients, how to define custom locations to control the position and "shape" of the gradient.
Clipping paths allow you to control where drawing occurs by providing a path in which to limit future drawing operations. Since you can create arbitrary shapes with CGMutablePath (and UIBezierPath) this can be an essential technique to get the drawing effect in some situations.
Transforms allow you to draw things rotated, moved, or scaled differently than you specified. You can use this technique to reuse drawing operations where they only differ by some small factor (like drawing lines on a graph), to tilt things like text, or to correct issues where the drawn element is upside down or sideways. In this episode, Sam shares a helpful technique of drawing a grid with a highlighted "origin square" to make it obvious what the transforms are doing.
Sam shows how to use Core Graphics to draw images, which you might want to do if you want to blend techniques we’ve seen so far, such as clipping paths or gradients. Drawing images with Core Graphics is also useful to resize images if needed (perhaps if the API is returning one that is too large and you want to cache a thumbnail on device). You’ll also learn about a handy function to help you with aspect ratio math!
In this episode, Sam shows how to draw text using Core Graphics. With this technique you can easily add text to images for pre-rendering, a technique we will see in another episode in this series.
Occasionally you will want to do some custom drawing, but not have that presented directly on the screen. Sometimes this is to "bake" the drawing into an image for faster scrolling performance (a single flattened image can be sent to the GPU easily without having to composite a bunch of views together). This is also often used to resize images that are too large for the intended view. This episode covers drawing to a custom context offscreen and obtaining an image out of it.
In this video we’ll learn how to use custom drawing with CALayers to support implicit animations.
In this episode we’ll leverage what we've learned to create a reusable control that will show progress as a path outlining a circle, complete with animation.
In this episode we’ll learn how to draw images with core graphics, then watermark a photo by drawing text overlaid on top of it.
Core Graphics is a cross-platform technology, but there are some gotchas to consider when working on mac apps with AppKit. Sam will go over some of these differences to help you avoid some common pitfalls.