How To Use Blocks in iOS 5 Tutorial – Part 1

This is a blog post by iOS Tutorial Team member Adam Burkepile, a full-time Software Consultant and independent iOS developer. Check out his latest app Pocket No Agenda, or follow him on Twitter.

Blocks are an incredibly powerful extension to C/Objective-C. They allow you to wrap up chunks of code in self-contained units and pass them around as objects.

More and more APIs are requiring blocks in iOS, so you really need to understand them to do almost anything. However, the syntax and subtle aspects are often confusing to beginners. Never fear – that’s where this tutorial comes in! :]

In this two-part tutorial series, you’re going to create a little iOS project called the iOS Diner. The app itself will be simple: users choose items from a menu to create an order, as if they were about to eat at a diner. Be warned, this project might make you hungry!

In this first part the tutorial we’ll create the app’s UI. This will be a review of iOS 5 Storyboards, including a brief refresher of how to create and use web services to download the diner menu in JSON format.

Note: If you are already pretty comfortable with Storyboards and Interface Builder, you may want to skip Part 1 and go straight to Part 2, where we start using blocks. This part focuses on Storyboards and Interface Builder only.

The second part of the tutorial will make extensive use of blocks to code the app’s logic. It will demonstrate using blocks for asynchronous processing, background tasks, alternatives to more standard APIs, and much more.

If you’re hungry to know more, keep reading!

Getting Started

First, let’s crack open Xcode and start a new project with the iOS\Application\Single View Application template.

Enter “iOSDiner” for the product name, enter the company identifier you used when creating your App ID, and enter “IOD” for the class prefix.

Set device family to iPhone only. Make sure Use Storyboard and Use Automatic Reference Counting are checked, but that Include Unit Tests and any other checkboxes are unchecked.

The next screen asks where you want to save the project. You can save it anywhere.

Give it a quick run and you should see a blank screen.

Under the Supported Device Orientations section of the iPhone/iPod Deployment Info menu (on the Summary tab), deselect Portrait mode so the app only runs in landscape.

The first thing you’ll do is set up the view. In order to do this, we need some graphics. We’ve been provided with some wonderful art by Ray’s wife Vicki – you can download it here. We need to add the art resources to the project.

I’ve never really liked how Xcode handles matching files in the project and in the file system, so I add resources manually in the files system most of the time. To do this, use Finder to navigate to the project folder. Create a folder called “Resources” inside the project folder. Then create a folder called “Images” inside the Resources folder.

Copy the art from the ZIP file you downloaded into the Images folder, then drag the Resources folder into the iOSDiner folder in Xcode as shown in the screenshot below.

Make sure that the next dialog for adding files is configured as per the screenshot below and then click “Finish” to add the files.

Now you should see a Resources folder inside Xcode that has an Images sub-folder inside it and which in turn contains the images you downloaded – exactly the same way the folders are structured under the file system.

Adding Images

Select MainStoryboard.storyboard.

If you don’t see that second column that says “View Controller Scene,” click the Expand button at the bottom (as indicated in the image below).

You are going to add the images to the storyboard in the form of UIImageViews and UIButtons. To make things easier, expand the Utilities sidebar and select the Media Library.

Here we see all the images that we added to the project earlier. You’ll notice there are two of every image. This is because there is a normal and a retina version (@2x) of every image.

We’re only concerned with the normal versions. You can check which is which by selecting an image and pressing the space bar. You’ll see a pop-up window. The images without @2x in the name are the normal versions.

Drag “bg_wall.png” onto the root view and place it as indicated below. If you aren’t sure that the image is placed correctly, you can switch to the Size Inspector (the fifth tab in the Utilities sidebar) to specify exact X and Y coordinates.

Now do the same with the following images:

• person.png
• sign_theiOSdiner.png
• chalkboard.png
• bg_counter.png
• total_field.png
• food_box.png

Note that you can make an image view the exact dimensions of an image by selecting the Image View and going to Editor\Size to Fit Conent (or use the keyboard shortcut Command-Equals).

As you drag and position the images, your view should develop as per the images below:

Once you’re done, give the project another Run.

Hey! Almost looking like an app!

Next, we’re going add the user interface portions. On the Utilities sidebar in Xcode, switch to the Object Library.

Drag a “Round Rect Button” into the middle of the view, above the monitor. Double-click the button you just placed and set the text to “-1”.

In the Utilities sidebar, select the Attributes Inspector. Make sure that the button you just placed is the currently selected item. Set the Background attribute to “button_silver.png”

Hold down Option/Alt and drag the -1 button to the right. This will create a copy of that object. Double-click this new button and set the text to “+1”.

Drag another “Round Rect Button” just to the left of the monitor. Set the Button Type to Custom and the Background attribute of this button to button_arrow_left.png.”

Hmm. That doesn’t look quite right. The problem is, when you set the image as the background image for the button, Xcode stretches the image to the size of the button.

If you look at the file itself, you’ll see that the dimensions are 19×33. So all you need to do is set the size of the button to match the size of the image.

Select the button. Select the Size Inspector, and set the Width and Height to 19 and 33, respectively.

That looks more like it! Now you need a right arrow button on the other side, so press Option/Alt and drag that button onto the other side. Change the background of the new button to button_arrow.png.

One last button to add! Drag another “Round Rect Button” below the chalkboard.

Set the Button Type to Custom and the Background attribute to total_field.png.

Again, we need to set the size to match the image, so select the Size Inspector. Set the Width and Height to 134 and 51, respectively. Then double-click the button and set the text to “Total”.

Give the project another Run.

Looks pretty good! The next thing we need to add to the storyboard are the labels and the preview box.

Select the Object Library again. Drag a UILabel onto the chalkboard image. Use the resize handles to make it about the same size as the chalkboard.

In the Attribute Inspector, set Lines to 0 (which enables multi-line labels), change Text Color to white, and change the Font to Marker Felt 17.0 (click the “T” symbol, select Custom, then Marker Felt). Normally, I find Marker Felt a crime against eyeballs, but in this case it seems to fit.

Drag a UIImageView over the monitor in the middle and resize it to match the monitor size.

In the Attributes Inspector, change the Mode to Aspect Fit.

Drag another UILabel over the sign in the lower right. Resize it to be about the same as the grey region, and set the Alignment to Centered.