iOS Beginners: How to Create a Simple Table View App

Using a Table View is a quick and easy way to setup a great-looking, albeit simple, form in iOS. Table views provide a fair amount of free functionality including styling, titles, section groupings and scrolling behaviour.

In this tutorial you will learn how to create a simple form using a static table view.

Overview

We will build a mock application to track a patient’s pain levels while in hospital. The user will enter details into our application and press submit to send the details to their doctor (we won’t be implementing any comms). The user is then shown a confirmation screen.

Getting Started

Prerequisites: You will need an application with a blank storyboard. The following tutorials will help you get started:

  1. How to Create a New Project
  2. How to Create a Storyboard

Create Application Flow

In this section we will add the basic screens and navigation logic for our application.

1. Select storyboard

2. Drag a Navigation Controller into storyboard

Drag a Navigation Controller from the Objects list into to your storyboard. This will add a Navigation Controller and a Table View Controller to your project.

3. Drag a Table View Controller into storyboard

Drag a Table View Controller into your Storyboard, positioning it to the right of existing content.

4. Zoom to better see storyboard

Use the zoom buttons, as needed, to better see your storyboard

5. Add submit button to form

Drag a Button into your Table View Controller. Now double-click the button text and rename it to Submit

6. Connect submit button to next screen

CNRL Click on the submit button and drag a line to the next View Controller so that it is invoked when the submit button is pressed. Select Push.

7. Rename view controllers

  • Rename the Table View from Root View Controller to Patient Pain Report by double-clicking into the title area of the Navigation Bar.
  • Now double-click into the title area of the second Table View Controller and add the title Confirmation.

8. Run it

Run your application and ensure that you can move back and forth between the two screens.

Create Entry Screen Layout

In this section we will create the graphical interface for the Patient Pain form entry screen.

1. Open the Document Outline

2. Open the Table View attribues

  1. From the Document Outline, select the Table View 
  2. Click on the Attributes Inspector icon in the right toolbar

3. Update table attributes

  1. We know how many cells we need so we will use a static (rather than dynamic) table. Select Static Cells.
  2. Select Grouped. We only have one group so we don’t need to use a group style, but we will do so for aesthetics.
  3. Select No Selection.
  4. Untick Show Selection on Touch.

4. Open table section attributes

  1. From the Document Outline, select the Table View Section
  2. If it isn’t already selected, click the Attributes Inspector icon in the right toolbar

5. Update table section attributes

6. Add labels

  • Select Label from the Object Library
  • Drag a Label to each row in the table view
  • Double-click each label to update its text

7. Add text fields

  • Select TextField from the Object Library
  • Drag a TextField to each appropriate row in the table view

You can make the last row taller by clicking and dragging it to the desired height.

8. Add form slider

Select Slider in the Object Library and drag it to the Pain row in the table view

9. Run it

Run your application and ensure that your form looks as expected.

Create Confirmation Screen Layout

In this section we will create the graphical interface for the Confirmation screen.

1. Copy form table

The confirmation screen is similar to the form screen except that the input fields are replaced with labels. We’ll cheat a little and copy the form table into our confirmation screen.

  1. Select the table view in your Patient Pain Report form. Press CMD-C to copy.
  2. Select the blank table view in your Confirmation screen. Press CMD-V to paste and overwrite it.

2. Update title

3. Delete unwanted items

  • To delete, simply click the desired item and press delete
  • Delete all the text fields, the slider and the submit button

4. Add new labels

  • Select Label from the Object Library
  • Drag a Label to each row as per the image below

5. Style labels

6. Run it

Run your application and ensure that your screens look as expected

Add Custom View Controller to Entry Screen

We have completed our graphical user interface however we are not doing anything with the data entered by the user. In this section we will add a programmatic handle to the form elements so that we can later use their values in code.

1. Create a custom view controller

  1. Right click on the PatientPainReport folder in your project
  2. Select New File
  3. Select Cocoa Touch
  4. Select Objective-C class
  5. Press Next
  6. Enter Class PainEntryFormViewController e.g SSMPainEntryFormViewController
  7. Enter Subclass of UITableViewController
  8. Press Next
  9. Press Create

2. Add outlets

We will now create outlets to allow our code to hook into the fields we created in the user interface.

  1. Select the view controller source (.m) file
  2. Add a property to correspond with each field in the form

Notice the circles next to the new outlets we defined? They are hollow. This means that they are not yet wired into the user interface. Let’s connect them now and we will watch them change.

3. Connect view controller to storyboard

4. Connect GUI elements to outlets

  1. Press and hold CNRL.
  2. While still holding down CNRL, click the view controller and drag the arrow that appears to the id field.
  3. A dialog box will appear listing the outlets we defined in code in the previous step. Select the appropriate one, in this case idField.

Now repeat this for the other fields (don’t forget the pain slider!).

5. Check that outlets are connected

  1. Select the view controller source (.m) file
  2. Ensure that the circles next to each property are now filled in

6. Done

All done. We can now access the values that the user enters into these fields. We will use these hooks when we configure the submit button.

Add Custom View Controller to Confirmation Screen

1. Create a custom View Controller

  1. Right click on the PatientPainReport folder in your project
  2. Select New File
  3. Select Cocoa Touch
  4. Select Objective-C class
  5. Press Next
  6. Enter Class ConfirmationViewController e.g SSMConfirmationViewController
  7. Enter Subclass of UITableViewController
  8. Press Next
  9. Press Create

2. Add outlets

We will now create outlets to allow our code to hook into the labels we created in the user interface.

  1. Select the view controller source (.m) file
  2. Add a property to correspond with each label that we need to update on the confirmation page

3. CONNECT VIEW CONTROLLER TO STORYBOARD

4. Connect GUI elements to outlets

  1. Press and hold CNRL.
  2. While still holding down CNRL, click the view controller and drag the arrow that appears to the id label.
  3. A dialog box will appear listing the outlets we defined in code in the previous step. Select the appropriate one, in this case idLabel.

5. Check that outlets are connected

  1. Select the view controller source (.m) file
  2. Ensure that the circles next to each property are now filled in

6. Done

All done. We can now access the labels and change them in code. We will use these hooks when we configure the submit button.

Send Data to Confirmation Screen

1. Create model for data

  1. Right click on the PatientPainReport folder in your project
  2. Select New File
  3. Select Cocoa Touch
  4. Select Objective-C class
  5. Press Next
  6. Enter Class PainModel e.g SSMPainModel
  7. Enter Subclass of NSObject
  8. Press Next
  9. Press Create

2. Add properties to model class

  1. Select the pain model’s header (.h) file
  2. Add appropriate data properties

3. Add model property to confirmation view controller

4. Send model to Confirmation View Controller

  1. Select the pain entry form source (.m) file
  2. Import the confirmation view controller and the model
  3. Add a segue method and send the populated pain model to the confirmation screen

Note: don’t worry if you have more autogenerated code than in the screenshot.

5. Update confirmation gui with model data

All Done!

Congratulations, you’re all done!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s