iPhone App Development Tutorial – change a UITableView cell with a modal UIView

This is a very simple tutorial I did to answer a specific question I had a little while back. I was doing some cleaning up of my hard drive the other day and came across it. I figured I’d go ahead and upload it now since I never had, just in case someone else has a similar question at some point.

Honestly all this information is available in some of my other tutorials. In fact this is really just a quick combination of these three previous tutorials.

Add a UITableView to an existing view

Pass data from a modal view

Add a UINavigationController programmatically

Because this is kind of a rehash of information I am not going to get into great detail. Here’s what we’re going to do. Start with a View-Based app, add a UITableView and a UINavigationController to it. Add a button to the navigation bar which will take us to a new view that we will create and present modally. Add a UITextField to our new view and save the text added in it to a NSString and then add a button to take us back to the main view. In the main view we will retrieve the text we saved from the text field in the modal view and display it in the UITableView.

1.) Start by creating a new Single-View Application and name it ModalTableTutorial.

2.) In the app delegate implementation file we are going to add the navigation controller.

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
    // Override point for customization after application launch.
    self.viewController = [[ViewController alloc] initWithNibName:@"ViewController" bundle:nil];
    
    UINavigationController *navController = [[UINavigationController alloc] initWithRootViewController:self.viewController];
    self.window.rootViewController = navController;
    [self.window makeKeyAndVisible];
    return YES;
}

3.) Create a new UIViewController subclass named ModalViewController.

Here’s the header file with a UITextField, NSString and IBAction declared.

#import 

@interface ModalViewController : UIViewController

@property (weak, nonatomic) IBOutlet UITextField *textField;
@property (strong, nonatomic) IBOutlet NSString *textValue;

@end

Here’s what I’ve added to the implementation file.

#import "ModalViewController.h"

@implementation ModalViewController
@synthesize textField = _textField;
@synthesize textValue = _textValue;

- (IBAction)goBackToView
{
    self.textValue = self.textField.text;
    [self dismissModalViewControllerAnimated:YES];
}

- (void) textFieldShouldReturn:(UITextField *)theTextField
{
    [theTextField resignFirstResponder];
}

4.) Here’s what the nib file for the new view looks like.

Connect Outlets

5.) In the ViewController.h file we import the ModalViewController and declare an instance variable for it. Also create an IBOutlet for a UITableView.

#import 
#import "ModalViewController.h"

@interface ViewController : UIViewController

@property (nonatomic, strong) ModalViewController *modalViewController;
@property (nonatomic, weak) IBOutlet UITableView *myTableView;

@end

6.) Switch to ViewController.m and synthesize the variables, add a button to the navigation bar and create a method to push the modal view in to place.

#import "ViewController.h"

@implementation ViewController
@synthesize myTableView = _myTableView;
@synthesize modalViewController = _modalViewController;

#pragma mark - View lifecycle

- (void)viewDidLoad
{
    [super viewDidLoad];
    
    UIBarButtonItem *modalViewButton = [[UIBarButtonItem alloc] initWithTitle:@"Modal View" style:UIBarButtonItemStyleBordered target:self action:@selector(goToModalView)];
    self.navigationItem.rightBarButtonItem = modalViewButton;
}

- (void)goToModalView
{
    if (self.modalViewController == nil) 
    {
        ModalViewController *temp = [[ModalViewController alloc] initWithNibName:@"ModalViewController" bundle:[NSBundle mainBundle]];
        self.modalViewController = temp;
    }
    
    [self presentModalViewController:self.modalViewController animated:YES];
}

- (void)viewWillAppear:(BOOL)animated
{
    [super viewWillAppear:animated];
    [self.myTableView reloadData];
}

7.) Next add the table view delegate methods.

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
    return 1;
}


- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return 5;
}


- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    
    static NSString *CellIdentifier = @"Cell";
    
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil) {
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];
    }
    
    [cell.textLabel setText:self.modalViewController.textValue];
    
    return cell;
}


- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
    
}

8.) Finally in the ViewController nib file add a UITableView connect it all up.

That’s about it. Run the app and try it out.

Go to the modal view and add some put something in the textField.

Then go back to the main view and it should populate the tableView.

Of course a few more things need to be added to really make this useful. For example I’m sure you don’t want to populate every row in the table with the same value, but you can add that bit yourself.

Here’s the code.