Objectively Speaking 2: A Crash Course in Objective-C for iOS 6

This is the 2nd post by iOS Tutorial Team Member Linda Burke, an indie iOS developer and the founder of canApps.

If you are a software developer skilled in another platform, but want to start learning iPhone development (and hence Objective-C) – this is the tutorial series for you!

This tutorial picks up where the first Objective-C tutorial left off. Now that you’re feeling the need for speed, it’s time to head out on a road trip and test your new-found skills!

This tutorial will take you on an Objective-C excursion to see some new sights, travel down some winding roads, and put the pedal to the metal while learning some great new concepts.

In this Objective-C tutorial, you will create a simple movie quotes quiz app. Along the way, you’ll become acquainted with a number of aspects of Objective-C, including:

• mutable arrays
• property lists
• classes
• methods
• @property
• protocols and delegates
• additional string functions
• and much more!

Warning: iPhone development with Objective-C can be highly addictive! Don’t be surprised to find yourself burning the midnight oil while a nice stack of dishes piles up in the kitchen! :]

Getting Started

Before you begin, make sure you have an Apple developer account with a provisioning profile for your device and the latest version of Xcode installed on your computer. This tutorial is based on iOS6 using Xcode 4.6. If you don’t have Xcode installed, you can download it from the App Store.

Note: To learn more about Apple developer accounts and how to provision your device, check out this tutorial: How to Submit Your App to Apple: From No Account to App Store

Start up Xcode , go to File\New\New Project, choose the iOS\Application\Single View Application template, and click Next.

Name your project QuoteQuiz, enter your organization name and company identifier, enter QuoteQuiz for the Class Prefix, set the device family to iPhone, and make sure to check Use Storyboards and Use Automatic Reference Counting, as shown below:

Leave Include Unit Tests unchecked. Click Next, select the location to save your project, and click Create.

Take a look at your newly created project structure in Xcode, shown in the screenshot below:

You will notice that your project contains the following key files:

• QuoteQuizAppDelegate.h
• QuoteQuizAppDelegate.m
• QuoteQuizViewController.h
• QuoteQuizViewController.m and
• MainStoryboard.storyboard

QuoteQuizAppDelegate contains some code gets called when the app first starts up, or other “events of interest” occur like the app entering the background. For this tutorial, that’s all you need to know. Here are some brief explanations of the other files, with which you will be working directly:

• MainStoryboard.storyboard contains the visual layout of your app. This is where you use a visual designer to create the screens for your app.
• QuoteQuizViewController.m is the view controller class for your scene. This file contains your app’s Objective-C code. The storyboard above links the scene to this class in the storyboard; Xcode did this automatically when you created your project. Any scenes that you add to your app will need to be linked manually; you’ll cover this later in the tutorial.
• QuoteQuizViewController.h is the header file for your view controller. This is where you declare public properties and methods that need be accessed from outside the class.

Okay, enough theory — the best way to learn Objective-C is to roll up your sleeves and get coding!

Building Your Main View Controller

In the Project Navigator on the left, select MainStoryboard.storyboard.

To start, you’ll just work with the single view that is already present in your app. Later on in the tutorial, you’ll create other views as they are required.

Look for the right sidebar in your Xcode window. If you don’t see one, click the rightmost button in the Views section to make the right hand sidebar visible, as shown in the screenshot below:

For simplicity’s sake, you will be working with a fixed layout instead of the default Autolayout.

Note: What’s Autolayout? Autolayout defines the way your interface arranges itself for different screen sizes and device orientations. To learn more about Autolayout, you can read more about it in our tutorial here.

To disable Autolayout, open the File Inspector tab, then uncheck the Autolayout checkbox, as shown below:

The lower part of the righthand sidebar has four tabs to access the File Template, Code Snippet, Object, and Media Libraries, respectively. You can click the little icons on the top of each section to switch between the four tabs.

Select Object Library — the third tab in – like so:

From the Object Library, drag a Label to the top center section of the view, then select the Attributes Inspector (the fourth tab in at the top of the sidebar), as seen here:

The Attributes Inspector allows you to change most object properties. Set the label’s alignment to be centered by clicking the center button in the Alignment section, like so:

Double-click the label and change the text to Name the Movie. It should look like the following screenshot:

Drag another label onto the view underneath the previous one. As before, center align the label, then modify the label’s text to be Question.

You’ll likely need more space than that little bitty text label to display the movie quotes on-screen.

Select the Question label and click on the Size Inspector (the fifth icon in). Set width to 280 points and the height to 90 points, as shown below:

You’ll also want your movie quote to stand out from the rest of the text on the screen; you can accomplish this by modifying the background color of your label. As well, having a color other than white as the background color of your labels makes it much easier to arrange them on-screen!

Select the Question label and return to the Attributes Inspector. Click the background color dropdown in the Attributes inspector, and select Other…. From the color palette, select Cyan, as seen here.

Although cyan is nice, you’re really just using the color here as a placeholder. You’ll set the actual background color of this label later on in code.

Label objects default to one line of text. If the label’s text is larger than the label’s bounds, then the text will be cut-off, followed by “…”.

For example, the first quote in the quiz is “Frankly my dear, I don’t give a damn.” Since the quote exceeds the label’s bounds, the text will actually read, “Frankly my dear, I don’t give a da..”. You want to make the quiz challenging — but not that challenging! :]

This is easily solved by changing your label’s to show an unlimited number of lines.

Select the Question label, and use the Attributes Inspector to set the Lines field to 0, as below:

“0” sounds like you don’t want any lines, but to Xcode, it means “unlimited” — and that’s all that matters!

Now that you have the question on-screen, you should probably give the player a few answers to choose from! :]