Unleash Your Inner App Developer - Next Steps

Do you have an idea for an app but lack the programming knowledge to build it? In this 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 on this adventure and you will experience how fun turning your ideas into reality can be!

In my previous post, you learned about navigating between different scenes in your app, and learned about using custom user-interface controls in your apps. We started building the Write Review scene (shown on the left side of Figure 1), which we will finish in this post, and we'll move on to the App Category scene shown on the right side of Figure 1. 

As usual, you can watch the video at this linkwhere I perform all the steps outlined in this post.

Figure 1 - The completed Write Review and App Category scenes.

Opening the Project

Follow these steps to open the iAppsReview project (you can also download the project from this link).

1. Launch Xcode on your Mac, then select iAppsReview in the Recents panel on the right side of the Welcome Window and then click Open. You can also select File > Open Recent > iAppsReview.xcodeproj from the Xcode menu.

2. After the project is open, go to the Project Navigator on the left side of the Xcode window and select Mainstoryboard.storyboard file to display it in the design surface.

Adding a Text Field to the Scene

In the Write Review scene shown in Figure 1, the user-interface control shown below the five-star rating control is known as a text field. A text field displays a single line of text that can be edited by the user. In this case, the text field allows the user to enter the name of the app they are rating. Let's add a text field to the scene now.

1. Drag a Text Field from the Object Browser and position it below the five-star rating control as shown in Figure 2. When the horizontal guide line appears below the five-star control and the vertical guide line appears on the left, release your mouse button to place the text field on the scene.

Figure 2 - Add a text field to the scene.

The horizontal guide line indicates the recommended space between user-interface controls on a scene, and the vertical guide line indicates the recommended spacing of the left edge of a user-interface control to the left edge of the scene.

2. Now let's extend the text field to the width of the scene (minus the recommended spacing from the edge). To do this, click on the resizing handle (the small white square) on the right side of the text field and drag it to the right edge of the scene until the vertical guide line appears as shown in Figure 3.

Figure 3 - Resize the text field width.

3. It's a good idea to add placeholder text to a text field to provide the user with a clue as to the kind of information you want them to enter. Placeholder text (as shown on the left side of Figure 4) appears in a text field as a light gray watermark that disappears at run time as soon as the user begins typing in the text field. 

To add placeholder text to the text field, go to the Attributes Inspector (click the third button from the right in the Inspector toolbar (Figure 4) and set the Placeholder attribute to App Name.

Figure 4 - Set the text field's Placeholder text.

Your text field is now ready for prime time!

Adding a Text View to the Scene

When the user writes an app review, we want to give them plenty of space in which they can express themselves. We don't want to use a text field because it can only contain a single line of text. In contrast, the text view control allows the user to enter multiple lines of text, including empty lines to create paragraphs. Let's add one beneath the text field.

1. Scroll down a little further in the Object Browser and drag a Text View directly below the text field until the horizontal and vertical guide lines appear as shown in Figure 5, and then release your mouse button to place it on the scene.

Figure 5 - Add a text view to the scene.

2. Click on the resizing handle on the right side of the text view and pull its right edge over to the right side of the scene until the vertical guide line appears as shown in Figure 6.

Figure 6 - Resize the text view's width.

3. Notice the latin text that appears in the text view control. If you have used tools such as Apple's iBooks Author, you will recognize this as placeholder text that is used to demonstrate the font and color of text that appears in the control. This is different than the placeholder text that you added to the text field. This placeholder text is meant to be deleted, so let's do that.

Go to the Attributes Inspector and click anywhere in the latin text shown in the Text attribute. Press Command+A (hold the Command key down and then press the letter A) to select all the text as shown in Figure 7. Next, press the delete key and then press return to delete all the text.

Figure 7 - Select all of the text in the text view.

We eventually need to change the height of the text view, but let's add the user-interface controls at the bottom of the scene first, so we can set the height of the text view accordingly.

Adding Buttons to the Scene

There are two buttons that we need to add to the scene — a Photo Album button in the bottom left corner of the scene that allows the user to select an image from the photo album on their iOS device, and a Post button in the bottom right corner of the scene that posts the user's review to the web. Let's add both buttons now.

1. Drag a Rounded Rect Button from the Object Library and position it in the bottom left corner of the scene. When the horizontal and vertical guide lines appear as shown in Figure 8, release your mouse button to position the button in the scene.

Figure 8 - Add a Rounded Rect Button to the scene.

2. Next, double-click the button to put it into edit mode, change the text to Photo Album (Figure 9), and then press return. As you can see, the button resizes itself relative to the size of the text it contains.

Figure 9 - Change the button text to Photo Album

3. Drag another Rounded Rect Button from the Object Library and position it in the bottom right corner of the scene. When the horizontal and vertical guide lines appear (Figure 10), let go of the mouse button to place the button in the scene.

Figure 10 - Add another Rounded Rect Button to the scene.

4. Double-click the button to put it into edit mode, enter the text Post, and then press return (Figure 11).

Figure 11 - Change the button text to Post.

As it stands right now, the buttons are simply placeholders and won't do anything at run time when the user taps them. We'll change that in a future post and make them fully functional.

Adding an Image View to the Scene

The last control we need to add the scene is an image view. An image view is used to display a single image or an animation comprised of several images. In this app, we just need the image view to display a single thumbnail image of any photo the user selects from their photo album. Let's add the image view now.

1. Drag an Image View from the Object Browser and position it to the right of the Photo Album button. When the vertical guide line appears on the left side of the image view (Figure 12), let go of the mouse button to place the image view on the scene. Although the bottom of the Image View and the bottom of the buttons are aligned in Figure 12, this isn't critical because the vertical position of the Image View will change in the next step when we resize it.

Figure 12 - Add an Image View to the scene.

2. Obviously, the Image View is much larger than we want it to be, so let's make it smaller. To do this, go to the Inspector toolbar located directly above the Attributes Inspector, and click the second button from the right to select the Size Inspector (Figure 13). Next, change the Width to40 and the Height to 60 and press return. When you do this, the left side of the Image View is still aligned properly, but the bottom edge of the Image View is no longer aligned with the bottom of the buttons (Figure 13). Let's fix that.

Figure 13 - Resize the Image View.

3. Click on the Image View and drag it downward so its bottom edge is even with the bottom edge of the buttons while keeping the same distance between the Photo Album button and the Image View. When the horizontal and vertical guide lines appear as shown in Figure 14, release your mouse button to place the Image View on the scene.

Figure 14 - Reposition the Image View.

4. An image view's job is to display an image. As it stands right now, when a user creates a new review, there will be no image to be displayed in the image view, so it will be invisible. To address this issue, we should specify a default "empty" image to be displayed in the image view. To do this, first go back to the Attributes Inspector by clicking the third button from the right in the Inspector Toolbar as shown in Figure 15. Next, click the down arrow on the right side of the  Image attributes combo box, and select EmptyImage.png from the list. This displays the empty image in the image view as shown in Figure 15.

Figure 15 - Set the image view's Image attribute.

5. Now that the controls at the bottom of the scene are positioned and sized the way we want them, we can change the height of the text view control to take up more of the available space. To do this, first click on the text view to select it, and then click the resizing handle on the bottom of the text view, and drag it downward towards the controls at the bottom of the scene. When the horizontal guide line appears (Figure 16), release your mouse button.

Figure 16 - Resize the image view.

Let's Kick the Tires!

Now you're finished setting up the prototype of the Write Review scene! Lets see how it works at run time.

1. Click Xcode's Run button, and when the app appears in the Simulator, click the Write a Review row in the main scene.

2. In the Write Review scene, you can click the buttons and see they are not functional yet. However, if you click in the text field or text view, notice the keyboard pops up from the bottom of the screen as shown in Figure 17. You can click on the keyboard keys to type text into either of the text controls. However, as it stands right now, there's no way to make the keyboard disappear when you're done. We will fix this issue in an upcoming post! For now, you can click the back (iAppsReview) button to return to the main scene, and then navigate back to the Write Review scene to hide the keyboard.

Figure 17 - The keyboard appears when you click on the text field or text view.

3. Go back to Xcode and click the Stop button to stop the app from running in the Simulator.

Adding an App Category Scene

I'd like to make some more forward progress on the app in this post, so we'll add one of the easier scenes in the app—the App Category scene. This is the scene that is displayed when the user taps the App Category row in the Write Review scene. It allows them to select a category of app from a predefined list.

1. Since the App Category scene allows the user to select one item from a list, it makes sense to add a table view controller to the storyboard. To do this, drag a Table View Controller from the Object Library and place it to the right of the Write Review scene as shown in Figure 18.

Figure 18 - Add a Table View Controller to the storyboard.

2. Now let's create a segue between the Write Review scene and the new table view controller scene. To do this, hold the Control key down, click on the App Category cell in the Write Review scene and drag your mouse pointer over to the new Table View Controller scene. When the Table View Controller scene is highlighted in blue as shown in Figure 19, let go of your mouse button.

Figure 19 - Create a segue to the new Table View Controller scene.

3. In the segue popup that appears, select the push option as shown in Figure 20.

Figure 20 - Select push in the segue popup.

This adds a segue between the scenes, and adds a navigation bar to the top of the Table View Controller scene (Figure 21).

Figure 21 - The new segue appears between the scenes.

4. Now let's change the title of the new scene. To do this, double-click in the empty navigation bar at the top of the scene to put it into edit mode. Next, type the text App Category (Figure 22) and then press the return key.

Figure 22 - Set the title to App Category.

5. Next, let's change the appearance of the table view. First, click in the gray area labeled Table View Prototype Content to select the table view. Next, go to the Attributes Inspector and change the Style to Grouped. This causes the table view to take on the grouped appearance you have now become familiar with (Figure 23).

Figure 23 - Set the table view Style to Grouped.

6. in the prototype version of the app, we want to display a static list of app categories in the table view, so go back to the Attributes Inspector and change the Content to Static Cells. This adds two additional cells to the table view. Since all of the cells in this table view will have the same general appearance, we only need one cell in the table view, so let's delete the last two cells. To do this, click on the second cell in the table view, hold the shift key down, and then click on the third cell to select it too. With both cells selected, press the delete key which leaves one cell remaining (Figure 24).

Figure 24 - Delete the last two cells in the table view.

7. For this App Category list, we only need a single label in each cell of the table view. To make this happen, go to the Attributes Inspector and change the Style to Basic. This adds a label with the text Title on the left side of the cell (Figure 25).

Figure 25 - Set the table view's Style to Basic.

8. We need to add several cells to this table view that each specify a different app category. To do this, with the first cell selected, press Command+D eight times, to create a total of nine table view cells (Figure 26).

Figure 26 - Create duplicate cells.

9. Now we need to change the text of each cell to a different app category. To do this, double-click the left side of the first cell in the table view. This puts the label's text into edit mode. Next, type the text Entertainment, and then press return. Now change the text of all the other cells in the table view as shown in Figure 27.

Figure 27 - Set all the app categories.

10. There is one final step we need to perform to finish the prototype version of this scene—add a checkmark to the Games cell. Remember, in the Write Review scene, the App Category cell text indicates the Games category is currently selected (Figure 1). Although the user won't be able to select a different cell in the prototype (they will be able to do that when we complete the app), we need to place a checkmark in the Games cell to reflect the current selection.

To do this, select the Games cell in the table view, and then go to the Attributes Inspector, and change the Accessory to Check Mark. This displays a checkmark on the right side of the cell as shown in Figure 28.

Figure 28 - Set the Accessory to Checkmark

Running in the App in the Simulator

Now you're ready to run the app in the Simulator to see how it looks!

1. Click Xcode's Run button, and when the app appears in the Simulator, click the Write Reviewrow to navigate to the Write Review scene. Afterwards, click the App Category row and you will be taken to the new App Category scene where you can see the check mark in the Gamesrow as shown in Figure 29.

Figure 29 - You can see the check mark at run time!

2. Go back to Xcode and click the Stop button to stop the app from running in the Simulator.

Conclusion

In this post, you were introduced to four new user-interface controls: the text field, text view, image view, and rounded rectangle button. You also reviewed information on how to add a table view controller to a storyboard and configure the table view, including adding a check mark to indicate a selected item. In case you ran into trouble going through these steps,  you can download the completed project from this link.

In my next post, we will finish the prototype app by adding a few new scenes and configuring them to suit our needs. After that, we will learn the basics of writing code so we can turn our prototype app into a fully functioning app!