Beginner iPhone Tutorial – Polygon

This is a tutorial that I used to presente during the first class at the iPhone course, course that I taught at British Columbia Institute of Technology in Vancouver between 2009 and 2010. This tutorial is meant to quickly introduce novices to the iOS SDK development tools, showcase some fundamental design patterns and demonstrate how easy it is to get started developing for Apple’s iPhone, iPod Touch and the iPad. This tutorial was designed originally using iPhone SDK 3.x, but I updated it to use the development tools iOS SDK version 5.x.

What will you learn?

  • Tools: how to use XCode 4.2 to create a new iPhone application, how to add a new class file and how to create your own view class. Using XCode to create the UI: drag and drop, inspector tabs, custom classes, connecting graphically objects, outlets and actions.
  • Programming: practical examples of implementing the Model View Controller design pattern, outlets and actions, member variable naming conventions, forward class declaration, deriving classes, and overriding methods.
  • Frameworks: UIKit concepts: creating a custom UIView by overriding drawRect, and the use of needsDisplay and needsLayout. Core Graphics concepts: context, path, current position, adding to path, stroke, fill.

Prerequisites

  • You need an Intel based Mac. Unfortunately iOS development cannot be done on a PC or on a Linux machine.
  • You need to have at least some basic programming experience, preferably in an object oriented language. To understand Objective C is useful to read the language guide here.
  • Download and install the latest iPhone SDK from here. For this you will need to  become a Registered iOS Developer with Apple’s iOS Dev Center.

Note: The SDK is a free download for any registered iPhone developer, and you do not need to join (yet) the iOS Developer Program which costs $99/year. You may want to join the iOS Developer Program later when you decide to try your applications on real devices (iPhone, iPod Touch or iPad), but for now you can try everything on the iPhone/iPad Simulator which runs on your Mac.

Tutorial

We will create a small application with a custom made view that displays a regular polygon with a variable number of vertices (between 3 and 20). The application will also display the number of vertices, and will allow the user to change the number of vertices by moving a slider control on the screen.

Step 1 – Create a new project called Polygon

  1. Make sure that the latest iOS SDK is installed, and launch XCode.
  2. Select the menu “File/New/New Project…”.
  3. On the left column of the New Project dialog select “Application” under the “iOS” section title. In the right window select “Single View Application”. Press “Next”.
  4. Choose iOS Application Template

  5. Type “Polygon” as the Product Name, select “iPhone” for Device Family, make sure “Use Storyboard” is not checked and “Use Automatic Reference Counting” is checked. Press “Next”.
  6. Choose options for your new project

  7. On the next screen choose where you want to create your project and press “Create”

Note: Use the exact spelling and case for the project name, so you can just copy and paste code later in the tutorial.
Run button
Build and run the application by pressing the Run button on the left of XCode’s top toobar. You should get no errors and the screen should show a gray view taking over all the iPhone screen except for the status bar.

In the next step we will implement a custom view class that can draw a polygon on the screen.