iOS UITableView Tutorial For Beginners : Part 2 – Passing Data

In this tutorial ( iOS UITableView Tutorial For Beginners : Part 2 – Passing Data ) we will make a separate view showing full content when a particular cell is tapped. This is the second part in series of UITableView Tutorial for Beginners. You can read the first and the third part here

iOS UITableView Tutorial for Beginners : Part 1
iOS UITableView Tutorial for Beginners : Part 3 – Custom Cells & Delegates

In the first part, we made a twitter like basic app with partial tweets as each cell title. In this tutorial, we will carry on with the same code and make a new screen to show the full tweet. We will also learn how to pass data between two views.

Prerequisites – UITableView Tutorial For Beginners

  • If you are using tableview for the first time then you should first read the Part:1 of this series
  • You should be familiar with outlets, IBActions and other basic stuff.

Final Project – UITableView Tutorial For Beginners

UITableView Tutorial iOS

Resources

Download the project if you did not read the first part of this series since we are going to continue using the same project.

Download the Project from here.

Open the file TableViewTutorial.xcodeproj

Setting Up The Views

- In  the project, click on mainstoryboard.storyboard. Next click on the only ViewCOntroller we have in our project or click on the the iPhone screen shown in the storyboard. On top of the Mac Screen, click on Editor on the menu, then select Embed In and click Navigation Controller. This will make our controller embed in navigation controller. You will learn more about Navigation controller in the later tutorials. For now,  just think of it as a helper controller for us to navigate between different screens.

- Next, in Object Library ( the same library from where we drag Labels, TextField etc. ) search and drag a View Controller onto the storyboard.

- Next, right click on the TableView Tutorial folder in the navigation pane of your Xcode , and click on new file. Select Objective C Class and click Next. Name the class DetailVC and subclass of UIViewController and click Next.

- Come back to storyboard and do the steps below ( Also shown on the image below) -

1)Click on the square icon or status bar of the new View Controller we just dragged.

2)Select identity inspector and set class as DetailVC -  This will link the new file (DetailVC.m ) to our View Controller.

3)Also set the Storyboard ID as DetailVC – We will use this ID to make a reference in our TVTViewController class and push the new controller.

UITableView Tutorial

4)Finally drag and drop a UILabel to our DetailVC.h and name it labelOutlet. (Make sure the label is big enough to accommodate 3-4 lines of text and set lines : 0 in the attributes inspector.

Let’s Code

Add the following property in DetailVC.h in between @interface and @end

//8
@property (nonatomic, strong) NSString *tweet;

8) This property should be in .h file since we are going to access it from another class. tweet string will store a single tweet, the one which is selected.

Open DetailVC.m and add the following code inside viewDidLoad -

 //9
  [self.labelOutlet setText:self.tweet];

9)This will set our label’s text equal to the tweet we pass in from TVTViewController class.

Next replace the entire code of TVTViewCOntroller.h with the following code

#import <UIKit/UIKit.h>
#import "DetailVC.h"
//11
@interface TVTViewController : UIViewController <UITableViewDataSource, UITableViewDelegate>

@end

First, we import the new class “DetailVC”.

11) We also add a UITableView delegate to our class in order to access the delegate method when a cell is tapped.

Then, go to TVTViewController.m and set the delegate right after we set the datasource inside viewDidLoad -

  self.tableView.delegate = self;

Finally add the following delegate method -

//12
-(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
  DetailVC *dvc = [self.storyboard instantiateViewControllerWithIdentifier:@"DetailVC"];
  dvc.tweet = [self.tweetsArray objectAtIndex:indexPath.row];
  [self.navigationController pushViewController:dvc animated:YES];
}

12) This method is called whenever a cell is tapped (Delegates will be explained in later tutorials). We create a DetailVC instance and instantiate using the storyboard ID we set earlier. Now, most of you would be thinking why we didn’t call [[DetailVC alloc] init]; . This is because by allocating it, it will not get referenced to our storyboard. A new DetailVC will be created but it will not take into account whatever we created on the storyboard (i.e. A UILabel in our case).

We then set the tweet string of DetailVC equal to the tweet of the cell tapped using the row property of indexpath passed in the method.

Finally, we push the view controller on our navigation stack.

Run the Project (Command + R) and you should be able tap and see the full tweet of the cell tapped.

Source Code – UITableView Tutorial For Beginners

You can download the complete source code here.

What Next!

If you have any feedback / doubts – Please use the comments section.

Until next tutorial,  try to pass in multiple data by creating more properties in detailVC.h or use a Dictionary.

Third Part of the series -
iOS UITableView Tutorial for Beginners : Part 3 – Custom Cells & Delegates

About Bharat

is an iOS developer and aims at helping people learn and master iOS development. He graduated from IIT Kanpur and loves gadgets and new technology. He is also the admin of this site.

6 comments

  1. Very good tutorial but Now. How to put IAD in Detail View. And how instead of going back and click on another table information can you Able to put next button. So user can click the next button to read the next information. Instead of going back and click again.

    • -I will put iAD tutorial later on. It’s on my list.

      -For your second question, and considering you are a beginner at the moment, you should pass the entire array of tweets instead of just one tweet. When next is pressed, just keep on changing the text of label in the detail view screen using the tweets array. (Although the correct approach for this kind of problem is using singleton class,coredata etc, but this will work for beginners)

  2. Awesome tutorial! I was struggling with the TableView stuff before, this worked perfectly!

  3. IT’s gud but how to get title on table view

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Scroll To Top