Skip to content

Graphics – basic

Prepared with Xcode 8.2.1, iOS 10.2

Basic graphics with Core Graphics. In this tutorial we cover the following topics

General information

Quartz 2D

One of the main components of Core Graphics is a set of APIs called Quartz 2D. This is a collection of functions, data types, and objects designed to let us draw directly into a view or an image in memory. Quartz 2D treats the view or image that is being drawn into as a virtual canvas. It follows what’s called a painter’s model, which is just a fancy way of saying that the drawing commands are applied in much the same way that paint is applied to a canvas.

Quartz 2D provides a variety of line, shape, and image drawing functions. Though easy to use, Quartz 2D is limited to two-dimensional drawing.

When using Quartz 2D (Quartz for short), we will usually add the drawing code to the view doing the drawing. For example, we might create a subclass of UIView and add Quartz function calls to that class’s drawRect: method. The drawRect: method is part of the UIView class definition and is called every time a view needs to redraw itself.

Quartz 2D’s Graphics Contexts

In Quartz, as in many other graphics libraries, drawing happens in a graphics context, usually referred to simply as a context. Every view has an associated context. We retrieve the current context and use it to make various Quartz drawing calls, and let the context worry about rendering our drawing onto the view. We can think of this context as a sort of canvas. The system provides us with a default context where the contents will appear on the screen. However, it’s also possible to create a context of our own for doing drawing that we don’t want to appear immediately, but to save for later or use for something else. We’re going to be focusing mainly on the default context, which we can acquire with this line of code:

A graphics context is an opaque data type (CGContextRef) that encapsulates all the information Quartz uses to draw images to an output device, such as a PDF file, a bitmap, or a window on a display. The information inside a graphics context includes graphics drawing parameters and a device-specific representation of the paint on the page. All objects in Quartz are drawn to, or contained by, a graphics context.

Thanks to graphics context, when we draw with Quartz, all device-specific characteristics are contained within the specific type of graphics context we use. In other words, we can draw the same image to a different device simply by providing a different graphics context to the same sequence of Quartz drawing routines. We do not need to perform any device-specific calculations; Quartz does it for us.


First basic project
  1. Step 1: create a new project
    Create a new project

    • Select File | New | Project...
    • Select Single View Application on the template selection sheet.
    • As the product name enter iOS Graphics Basic
    • Set the Language to Objective-C, devices pop-up button to Universal and make sure the check box labeled Use Core Data is unchecked.
  2. Step 2: add a new class
    Add a new class

    • Select iOS Graphics Basic folder from the Project Navigator (the folder that currently contains the app delegate and view controller files) and next select File | New | File...
    • Select Cocoa Touch Class on the template selection sheet.
    • As the class name enter MainView and make it a subclass of UIView

  3. Step 3: add a code
    • Single-click MainView.m and add/modify the following code

  4. Step 4: change a class for the View Controller's View
    • Select Main.storyboard from the Project Navigator to open Interface Builder.
    • Select View item from View Controller from Document Outline.
    • Select Class item located in Custom Class section in Identity inspector.
    • Change the class name form UIView to MainView

  5. Step 5: run the application
    Run the application. Verify that our line has been drawn on "restricted" area at the top of the screen just under the carrier informaton.
  6. Step 6: add a new view
    • Select a View component from a Library and drop it on existing view.
    • Set all necessary constraints.
    • Select this View item from Document Outline.
    • Select Class item located in Custom Class section in Identity inspector.
    • Change the class name from UIView to MainView
  7. Step 7: run the application
    This time, because we have two views implementing the same class MainView, two lines have been drawn.
  8. Step 8: change a class for the View Controller's View
    Repeat steps from Step 4

    • Select Main.storyboard from the Project Navigator to open Interface Builder.
    • Select View item from View Controller from Document Outline.
    • Select Class item located in Custom Class section in Identity inspector.
    • Change the class name from MainView to UIView

  9. Step 9: run the application
    This time we should see only one, well located, line.