TableViews are used to display data in a scrollable list. In this tutorial we will display some popular car brands in a TableView where we can add our own items.
Open Xcode and create a new Single View Application. For product name, use AddItemTableViewDemo and then fill out the Organization Name, Company Identifier and Class Prefix fields with your customary values. Make sure only iPhone is selected in Devices, and that the Use Storyboards checkbox and Use Automatic Reference Counting checkbox are selected.
Got to the MainStoryboard file, delete the Existing View Controller and drag a new TableView Controller to the canvas. Select the TableView Controller and In the Editor menu choose "Embed in Navigation Controller". This will put a Navigation Controller around the TableView Controller.
Double-click on the NavigationBar of our Table ViewController and name it "Cars". Add a Bar button to the right side of the Navigation Bar of Our Table View Controller. Select the bar button item and in the Attributes Inspector change the Identifier to Add. We will use this button to show a new View Controller where we can add new items.
Drag a new View Controller on the canvas to the right of our Table View Controller. Again, in the Editor menu choose "Embed in Navigation Controller". Add the following to this View Controller.
- Title of "Add a Car"
- Left Bar Button Item, change the Identifier to Cancel in the Attributes Inspector.
- Right Bar Button Item, change the Identifier to Done in the Attributes Inspector.
- Text Field
The ViewController should look like this.
Next, Ctrl + Drag from the Add button of Our Table View Controller to the NavigationController and select Modal. This transformation is called a segue and it means when the user clicks the Add button the new View Controller will be placed on top of the Table View.
Now let's move on to the code. We will display a list of cars so we need some sort of model. Add a new Objective-C class to the project, name it Car and make it a subclass of NSObject. In Car.h add the following property
@interface Number : NSObject
@property (nonatomic,strong) NSString *brandName;
Add the following intializer method declaration
- (id)initWithName:(NSString *)brandName;
implement initWithName in Car.m
- (id)initWithName:(NSString *)name
self = [super init];
_brandName = brandName;
This method will initialize our brandName property. Next, Add a New Objective-C class to the project, make it a subview of UITableViewController and name it CarListViewController. in CarListViewController.m add the following property in the @interface section.
@interface CarListViewController ()
@property (nonatomic, strong) NSMutableArray *cars;
In viewDidLoad we create some Car objects and insert it into our cars array.
Car *car1 = [[Car alloc] initWithName:@"BMW"];
Car *car2 = [[Car alloc] initWithName:@"Audi"]; Car *car3 = [[Car alloc] initWithName:@"Chevrolet"];
self.cars = [NSMutableArray arrayWithObjects:car1,car2,car3, nil];
When we added our CarListViewController class some methods are created from the TableViewController template. Next, we must finetune some of this methods. In numberOfSectionsInTableView we change the return line to one, since we only have one section.
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
// Return the number of sections.
In the tableView:numberOfRowsInSection we will return the number of items in our array.
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
// Return the number of rows in the section.
return [self.cars count];
In tableView:cellForRowAtIndexPath we will iterate through our car objects and insert them in our TableView. Change this method in
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
static NSString *CellIdentifier = @"CarCell";
Car *currentCar = [self.cars objectAtIndex:indexPath.row];
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier forIndexPath:indexPath];
cell.textLabel.text = currentCar.brandName;
The method is using an indexPath to iterate through the array and the result is displayed as a cell. The CellIdentifier is set to CarCell so we must add this in our Storyboard. Go to the storyboard and select our TableView. The TableView needs to be connected throug our CarListViewController class so change the class name in the Identity inspector. Now, select the Empty Cell and in the Attributes Inspector change the Identifier to CarCell. Build and Run, and the car names should be displayed.
Notice that we can get to the Add Cars screen using the + button, but this isn't functioning yet. Add a new Objective-C class to the project, make it a subclass of UIViewController and name it CarDetailViewController. In CarDetailViewController.h declare the following properties.
@interface CarDetailViewController : UIViewController
@property (nonatomic, strong) NSString *carName;
@property (nonatomic, strong) IBOutlet UITextField *name;
Go Back to the Storyboard, select the viewController and in the Identity Inspector change the class to CarDetailViewController. Ctrl+drag from the UITextField to the name property in CarDetailViewController.h.
Currently, there is no way back from the CarDetailViewController to the CarListViewController. To achieve this we make use of a new feature in iOS 6, the unwind segue. In CarListViewController.m add the following IBAction methods.
- (IBAction)cancel:(UIStoryboardSegue *)segue;
- (IBAction)done:(UIStoryboardSegue *)segue;
Ctrl+Drag from the Cancel button to the green exit button on the View Controller and select the cancel: method. Repeat the same for the done button. Now on the left side you can see two unwind segue button in the Car Detail View Controller list. Select the unwind segues and give it a identifier of cancelSegue and doneSegue in the attributes inspector. We need this identifier in our code. Go to CarDetailViewController.m and add the prepareForSegue method
- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender
if ([segue.identifier isEqualToString:@"doneSegue"])
self.carName = self.name.text;
When the user presses the done button, the carName property is set with the text of our textField. Next implement the Done IBAction method in CarListViewController.m
- (IBAction)done:(UIStoryboardSegue *)segue
CarDetailViewController *carDetailVC = segue.sourceViewController;
Car *car = [[Car alloc] initWithName:carDetailVC.carName];
We create a new Car Object set with the name of carName of our CarDetailViewController. Next, the car is added to our array and our TableView reloads. Build and Run, create some cars and you should see them displayed on the TableView.
You can download the source code of the AddItemTableViewDemo at the ioscreator repository on github.