Unleash Your Inner App Developer Part 3: Diving Deeper

Do you have an idea for an app but lack the programming knowledge to begin building it? In this weekly blog series, How To Unleash Your Inner App Developer, I will take you, the non-programmer, step by step through the process of creating apps for the iPhone, iPod Touch, and iPad. Join me each week on this adventure, and you will experience how fun turning your ideas into reality can be! This is Part 3 of the series. If you're just getting started now, check out the beginning of the series here (This post has been updated to iOS 7.1.)

In my previous post, we started the process of creating a prototype of an iPhone app called iAppsReview. You learned how to create a new project in Xcode, how to add a storyboard to a project and configure it, and how to add a navigation controller to a storyboard. You had just begun to configure the table view, which we will finish in this post. You'll learn how to create multiple sections in a table view, set section header text, add images to a project, and incorporate them in table-view cells.

Figure 1 - The app's main scene

To help jog your memory, Figure 1 shows the main scene that we are going to be working on in this post. If you missed my previous post, or just want a fresh start, you can download the project I created last week from this link.

I highly recommend going through all of the steps in this post on your own for the best learning experience. 

Opening the Project

Let's pick up where we left off and open the project we created in my previous post.

1. Launch Xcode on your Mac;

2. To open the project from Xcode's Welcome window, just click the iAppsReview project in the Recents panel on the right side of the window (Figure 2), and then click Open. You also can open the project by selecting File > Open Recent > iAppsReview.xcodeproj from the Xcode menu;

Figure 2 - Select the iAppsReview project and click Open.

3. After the project is open, in the Project Navigator on the left side of the Xcode window, select the MainStoryboard.storyboard file. This displays the storyboard in the Interface Builder Editor in the center of the Xcode window;
4. By default, the scenes on your storyboard are displayed in iPhone 5, 4-inch format. Since you need to make sure your scenes look great in both the 4-inch and 3.5-inch iPhone formats, Xcode provides a small button in the storyboard design surface (shown in the bottom-right corner of Figure 3) that allows you to toggle between these two screen sizes. I find it best to design your scenes in 3.5-inch format and then switch to 4-inch format to make sure your scene still looks good. So, go ahead and click the toggle button and you should see the height of all the scenes in the storyboard shrink by half an inch.

Figure 3 - The toggle button allows you to switch between 3.5 and 4-inch screen sizes.

Configuring the Table View

Now you're ready to configure the table view in the app's main scene.

1. Click the gray area in the scene labeled Table View Static Content.

2. Now go to the Attributes Inspector (Figure 4). You may remember from my previous post that if the Attributes Inspector isn't visible, you can select View > Utilities > Show Attributes Inspector from the Xcode menu. Now change the Style to Grouped. This causes the table view to take on the grouped appearance as shown in Figure 4.

Figure 4 - Set the table view's Style to Grouped.

3. According to our design, all of the cells in this table view should have the same general appearance, so let's delete all of the cells except for one, configure the remaining cell, and then copy it to make the other cells in the table view. To do this, select the second cell in the table view by clicking on it. Then, to select the third cell, hold the shift key down and click on it. This selects the last two cells as shown in Figure 5.

Figure 5 - Select the last two cells in the table view.

4. Press the Delete key to delete both of the selected cells. This leaves the remaining cell selected.

5. Next, go to the Attributes Inspector and change the cell's Style to Basic as shown in Figure 6. This adds a single label on the left side of the cell. You will see how some of the other cell styles look later on in this tutorial.

Figure 6 - Set the cell's Style to Basic.

6. According to our design shown in Figure 1, there should be a disclosure indicator (a gray right arrow) on the right side of all the cells in this table view. So let's add one to the cell now. Change the cell's Accessory attribute to Disclosure Indicator. This displays the disclosure indicator on the right side of the cell as shown in Figure 7.

Figure 7 - The cell contains a disclosure indicator.

7. Now that you have set up the style for the table-view cell, it's time to add multiple groups to the table view. To do this, first select the table view by clicking the gray area below the table-view cell labeled Table View Static Content. Afterwards, go to the Attributes Inspector and increase the number of sections to 3 by clicking the up arrow to the right of the Sections attribute twice. When you do this, two new sections are created, each with a copy of the cell you configured in the previous steps (Figure 8).

Figure 8 - Set the number of Sections to 3.

8. As shown in Figure 1, the first section in the table view contains two cells: Write a Review and Read Your Reviews. To create the second cell, you can create a copy of the first cell. To do this, click on the first cell in section 1 to select it, and then press the Command+D keys (press both keys at the same time) to make a copy of the cell. When you're finished, you should see two cells in the first section as shown in Figure 9.

Figure 9 - Duplicate the first cell to create two cells in the first section.

9. Now that you have all the cells you need, you can change the Title label text in each cell to the values shown in Figure 1. To do this, double-click the first cell in the table view (or you can even click twice slowly) to select the Title label contained in the table-view cell. When the label is selected, go to the Attributes Inspector and change the Text of the label to Write a Review, and then press the return key. When you do this, the text of the label in the first cell changes as shown in Figure 10.

Figure 10 - Set the Title of the first cell to Write a Review.

10. Now change the text of the Title label in the other cells as shown in the bulleted list below, starting with the second cell. When you're finished, your table-view cells should look like Figure 11.

• Read Your Reviews (cell 2)
• Read Online Reviews (cell 3)
• Settings & Feedback (cell 4)

Figure 11 - Set the text of all cell labels.

Setting Up Section Headers

As shown in Figure 1, each section has header text that is used to describe the rows in each section. Follow these steps to add the section header text to your table view:

1. The easiest way to individually select each section to be configured in a table view is by using Xcode's Document Outline pane, which is shown on the left side of Figure 14. If the Document Outline pane isn't visible, you can click the small circular arrow button at the bottom-left corner of the storyboard (Figure 12) or you can select Editor > Show Document Outline from the Xcode menu.

Figure 12 - The Document Outline pane is located to the left of the storyboard.

2. The Document Outline provides a hierarchical view of all the user interface objects on the currently selected scene. As you can see in Figure 13, there are three table-view sections in the table view. Go ahead and select the first table-view section and we will set its header text.

Figure 13 - Select the first table-view section

3. With the first table-view section selected, go to the Attributes Inspector and change the Header attribute to Your Reviews and press the return key. This adds a header section to the scene as shown in Figure 14.

Figure 14 - Set the section header text.

4. Next, select the second table-view section in the Document Outline pane and set its Header attribute to Online Reviews.

5. Now select the third table-view section in the Document Outline pande and set its Header attribute to Settings. When you're finished, the table-view section headers should look like Figure 15.

Figure 15 - The completed header text

Adding Images to Your Project — with Glyphish & iStockPhoto

Adding images to your app's user interface goes a long way in giving it a professional look. Unless you're a graphic artist, I don't recommend creating your own images. There are many high quality free and inexpensive images available on the web.

For example, all of the images shown in Figure 1 came from a set of icons you can get for free from Glyphish. These images are simple and straightforward. You don't want to make your users turn their head sideways to figure out what your image is trying to convey. The high quality images from glyphish are just the ticket. I recommend spending the extra $25 to get Glyphish pro, which includes 400 icons that look great and work well on both the regular and Retina iOS displays. 

When I'm looking for an image to use for my app icon (the image that appears for the app button in the iOS Home screen) and for splash screens that appear at startup, I like to use iStockPhoto. The images on this site are not free, but they are high quality, relatively inexpensive, and well worth the money considering the app icon is the main image users see in the app store when deciding whether to purchase your app. My advice? Spend a few dollars and show potential buyers that you have a high quality app. When searching for images from iStockPhoto, you typically set the search filter to Illustrations to find clip art that suits an iOS app.

I have prepared a number of images that you can download from the web and include in the project by following these steps:

1. Figure 16 - The download progress indicator

   Click on this link to download the images to your Mac (you don't want to download them to your iPad or iPhone). When you click on the link, the images which are stored in a compressed file named iAppsReviewImages.zip will begin downloading to your Mac. If your default browser is Safari, you will see the download progress of the file in the upper-right corner of the browser (Figure 16).

2. When the download is complete, you can click Safari's download control, which displays the Downloads popup (Figure 17).

Figure 17 - Select the downloaded file.

3. Click the small magnifying glass as shown in Figure 17. This opens a Finder window with the iAppsReviewImages folder selected (Figure 18). When you download a file in this way, it is automatically uncompressed and stored in the Downloads folder on your Mac.

Figure 18 - The downloaded iAppsReviewImages folder

4. Now that you have downloaded the image files, let's add them to the project. Go back to Xcode and, in the Project Navigator, click the gray arrow to the right of the Supporting Files group to expand it (Figure 19). 

Figure 19 - The Supporting Files group

5. Now you're ready to add the new images to the project that you downloaded from the web. The downloaded file includes a number of images you will use in the project. Go to the Project Navigator, right click (or Ctrl+Click) the Supporting Files group, and then select Add Files to "iAppsReview"... from the popup menu. This displays the Add Files dialog box shown in Figure 20.

Figure 20 - The Add Files dialog box

6. On the left side of the dialog, first select the Downloads folder. You want to add all the files in the iAppsReviewImages folder to the project. To do this, first expand the iAppsReviewImages folder as shown in Figure 20. Afterwards, click the first image in the folder (Default-568h@2x.png), scroll down to the last image in the folder (user.png), hold down the shift key and then click on user.png. This selects all the files in the iAppsReviewImages folder as shown in Figure 21. 

Figure 21 - Select all files in the iAppsReviewImages folder.

7. Next, make sure the Copy items into destination group's folder (if needed) check box is selected as shown in Figure 21. When this option is selected, Xcode makes copies of the files you are adding and stores them in the project's root folder. Now click the Add button to add all of the selected image files to the project. Notice that the file names come in pairs. For example, there is a download.png file as well as a corresponding download@2x.png file. At run time, if iOS detects that the user is running the App on an iOS device that has a Retina display, the file with "@2x" in its name is used. These files are twice the size as large as their counterparts and therefore contain four times the number of pixels, which looks best on a Retina display. If the user is running the app on a non-Retina display, the file without the "@2x" in its name is used.

8. We will take a look at some of the other interesting image files later on, but for now, let's add images to the table-view cells. To begin, select the first cell (Write a Review) in the table view. Next, go to the Attributes Inspector and in the Image combo box, select pencil.png (all of the files you just added to the project are now listed here). This displays the pencil image on the left side of the cell as shown in Figure 22.

Figure 22 - Set the first cell's Image attribute to pencil.png.

10. Now change the Image attribute of the other cells as shown in the bulleted list below, starting with the second cell. When you're finished, your table view cells should look like Figure 23.

• readreview.png (cell 2)
• download.png (cell 3)
• gear.png (cell 4)

Figure 23 - Set the Image attribute of each cell in the table view.

11. Now you're ready to set up the app's icon and launch images. In the Project Navigator located on the left side of the Xcode window, select the Images.xcassets file. This is an asset catalog which provides a way to manage your app's images (we'll discuss this in much greater detail later on in this series). When you do this, you should see the asset catalog displayed in the center of the Xcode window. If it's not already selected, select AppIcon from the list to the right of the Project Navigator as shown in Figure 24.

Figure 24 - The Asset Cataglog is displayed in the center of the Xcode window.

Based on the fact that I have specified that this app is iPhone-only and will run on iOS 7, Xcode determines that I should include three app icons with my app, which I have done. To complete the setup, you need to drag icons from the Project Navigator and drop them in the appropriate dotted-line rectangle in the asset catalog. To do this, you need to quickly click the file and immediately drag it over to the asset catalog (otherwise you will end up selecting the image file and it will be displayed in the center of the Xcode window). You need to drop the Icon-29@2x.png file from the Project Navigator onto the dotted square on the left (labeled 29pt), the Icon-40@2x.png file in the center dotted square (labeled 40pt), and the Icon-60@2x.png file in the dotted square on the right (labeled 60pt). When you're finished, your asset catalog should look like Figure 25.

Figure 25 - The app icons are set up in the asset catalog.

12. Now let's set up the launch images. These are the images that are displayed when the app first starts up. To do this, click on LaunchImage in the list on the left side of the asset catalog. When you do this, you will see the LaunchImage settings as shown in Figure 26.

Figure 26 - Launch images in the asset catalog

Next, drag the Default@2x.png file from the Project Navigator and drop it on the dotted square on the left labeled 2x. Afterwards, drag the Default-568h@2x.png file from the Project Navigator and drop it on the dotted square on the right labeled R4. When you're finished, the asset cataglog should look like Figure 27.

Figure 27 - The Launch Images are set up in the asset catalog.

Running the App in the Simulator

Now it's time to see how the App looks in the Simulator. In Xcode, click the Run button, and after several seconds you should see iAppsReview appear in the Simulator as shown on the left side of Figure 28. At first, the new app launch image you just added to the project is displayed. After a few seconds, the app launch image disappears and you will see the main iAppsReview scene as shown on the right side of Figure 28. In a future post, I'll show you how to make the app launch image fade slowly rather than disappear abruptly from the screen.

Figure 28 - iAppsReview running in the Simulator!

Conclusion

In this post, you learned how to create multiple sections in a table view, set section header text, as well add images (including app launch images) to a project and incorporate them in table-view cells. In my next post, we will add a new scene to the storyboard, learn how to create a segue to it, and learn about several other iOS user-interface controls along the way.

<<Previous          Next>>