Unleash Your Inner App Developer - 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.
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. However, once you've finished, or if you get stuck along the way, I recommend checking out the video at this link where I perform all of the steps from this post.
Opening the Project
Let's pick up where we left off and open the project we created in my previous post.
- Launch Xcode on your Mac;
- 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.|
- 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;
- 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.
- Click the gray area in the scene labeled Table View Static Content.
- 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.|
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.|
- Press the Delete key to delete both of the selected cells. This leaves the remaining cell selected.
- 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.|
|Figure 7 - Change the Title label's font.|
Now let's change the font of the Title label located in the table-view cell. To do this, you have to click on the cell again, which selects the label. You can tell that you have done this correctly if the Attribute Inspector has the word Label in its top section header as shown in Figure 7.
- Next, click the T on the right side of the Font setting (Figure 7) to display the Font popup. In the Font popup, click on the Font selection box and change the font to System. Afterwards, click the Done button to close the popup. When you're finished, the Title label should look like Figure 8.
|Figure 8 - The new Title label font|
- 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. To do this, you need to reselect the table-view cell. Currently, the label inside of the cell is selected, so to select the cell itself, click in the gray area below the table view labeled Table View Static Content, and then click on the cell again. Afterwards, 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 9.
|Figure 9 - The cell contains a disclosure indicator.|
- 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 10).
|Figure 10 - Set the number of Sections to 3.|
- 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 11.
|Figure 11 - Duplicate the first cell to create two cells in the first section.|
- 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 12.
|Figure 12 - Set the Title of the first cell to Write a Review.|
- 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 13.
- Read Your Reviews (cell 2)
- Read Online Reviews (cell 3)
- Settings & Feedback (cell 4)
|Figure 13 - 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:
- 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 14) or you can select Editor > Show Document Outline from the Xcode menu.
|Figure 14 - The Document Outline pane is located to the left of the storyboard.|
- The Document Outline provides a hierarchical view of all the user interface objects on the currently selected scene. As you can see in Figure 15, 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 15 - The Document Outline pane|
- 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 16.
|Figure 16 - Set the section header text.|
- Next, select the second table-view section in the Document Outline pane and set its Header attribute to Online Reviews.
- 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 17.
|Figure 17 - 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:
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 18).
|Figure 18 - The download progress indicator|
- When the download is complete, you can click Safari's download control, which displays the Downloads popup (Figure 19).
|Figure 19 - Select the downloaded file.|
- Click the small magnifying glass as shown in Figure 19. This opens a Finder window with the iAppsReviewImages folder selected (Figure 20). When you download a file in this way, it is automatically uncompressed and stored in the Downloads folder on your Mac.
|Figure 20 - The downloaded iAppsReviewImages folder|
- 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 21). Notice the three files with the png extension. These are app launch images that were automatically added to your project when you first created it. These full-screen images are displayed at run time immediately after the user taps your app icon. This provides immediate feedback to the user that "something is happening." By default, these images are simply solid black rectangles, one for each type of iPhone screen:
- Default.png - iPhone 3.5-inch screen
- Default@2x.png - iPhone 3.5-inch Retina screen
- Defaultfirstname.lastname@example.org - iPhone 4-inch screen
|Figure 21 - The Supporting Files group|
- We want to replace these default app launch images with our own custom images that are included in the file you just downloaded, so we need to delete them from the project. To do this, click on the Default.png file to select it, then hold your shift button down and click on the Default@2x.png file and the Defaultemail@example.com file to select them too. With all three files selected, press the delete key. When you do this, the Delete File dialog box appears as shown in Figure 22. Click the Move to Trash button to remove the files from the project and move them to the trash.
|Figure 22 - Select Move to Trash in the Delete File dialog box|
- Now you're ready to add the new images to the project that you downloaded from the web. The downloaded file includes images that replace the files you just removed from the project, as well as a number of other 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 23.
|Figure 23 - The Add Files dialog box|
- 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 23. Afterwards, click the first image in the folder (Defaultfirstname.lastname@example.org), 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 24.
|Figure 24 - Select all files in the iAppsReviewImages folder.|
- Next, make sure the Copy items into destination group's folder (if needed) check box is selected as shown in Figure 24. 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 Default.png file as well as a corresponding Default@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.
- 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 25.
|Figure 25 - Set the first cell's Image attribute to pencil.png.|
- 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 26.
- readreview.png (cell 2)
- download.png (cell 3)
- gear.png (cell 4)
|Figure 26 - Set the Image attribute of each cell in the table view.|
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 27. 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 27. 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 27 - iAppsReview running in the Simulator!|
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.
Want more? Get our weekly newsletter: