May 26

Changing the display size of a UITableView

Interface Builder Add comments

Here is an example of how to create a view that contains a UITableView that doesn’t take over the whole screen.  An example of an application that uses a small table is the Stocks application that comes with the iPhone / iPod Touch.  You may think you need a UITableViewController – but that only gets in the way and takes over the view.

  • Create a View-based iPhone application and call it TableSize1
  • Modify TableSize1ViewController.h so that it looks like this:

TableSize1ViewController.h

//
//  TableSize1ViewController.h
//  TableSize1
//
//  Created by Mitchell Allen on 5/26/09.
//  Copyright __MyCompanyName__ 2009. All rights reserved.
//
 
#import 
 
@interface TableSize1ViewController : UIViewController {
 
	UITableView *tableView;
}
 
@property (retain, nonatomic) UITableView *tableView;
 
@end

 

  • Modify TableSize1ViewController.m so that it looks like this:

TableSize1ViewController.m

//
//  TableSize1ViewController.m
//  TableSize1
//
//  Created by Mitchell Allen on 5/26/09.
//  Copyright __MyCompanyName__ 2009. All rights reserved.
//
 
#import "TableSize1ViewController.h"
 
@implementation TableSize1ViewController
 
@synthesize tableView;
 
- (void)viewDidLoad {
 
}
 
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
 
    return 1;
}
 
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    return 20;  // Test hack to display multiple rows.
}
 
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
 
    static NSString *CellIdentifier = @"Cell";
 
    UITableViewCell *cell = [self.tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil) {
        cell = [[[UITableViewCell alloc] initWithFrame:CGRectZero reuseIdentifier:CellIdentifier] autorelease];
    }
 
	NSString *szCell = [[NSString alloc] initWithFormat: @"Row %i", indexPath.row ];
 
	[cell setText:szCell];
 
	[szCell release];
 
    // Set up the cell
    return cell;
}
 
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
    // Navigation logic -- create and push a new view controller
}
 
- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning]; // Releases the view if it doesn't have a superview
    // Release anything that's not essential, such as cached data
}
 
- (void)dealloc {
    [super dealloc];
}
 
@end
  • In the Resources folder, double-click TableSize1ViewController.xib to launch Interface Builder
  • From Library / Cocoa Touch Plugin / Data Views drag a Table View on to the View and make it about half the height of the view (Select Tools / Library from the main menu if it isn’t visible)
  • Click on the new Table View
  • Click on the second tab in the Inspector window (Select Tools / Inspector from the main menu if it isn’t visible)
  • After clicking the second tab, the title of the Inspector window should be Table View Connections
  • Under Outlets: for both dataSource and delegate, drag the mouse from the circles next to them to the File’s Owner icon in the TableSize1ViewController.xib window.
  • Under Referencing Outlets: drag from New Referencing Outlet to the File’s Owner icon and select tableView.
  • With Interface Builder in focus, select File / Save
  • Go back to your project window and click Build and Go
  • Your application should now display a table that only takes up half the screen.

Tags: , , , ,

9 Responses to “Changing the display size of a UITableView”

  1. Hal Martin Says:
    June 25th, 2009 at 1:22 am

    Thanks for this post! I happened to find it just as I have been studying the use of the UITableView and UITableViewController for navigation. With the help of this post, along with the other reference I have been reading, and a bit of thought, the light has come on.

  2. Karl Schiffmann Says:
    July 3rd, 2009 at 3:25 am

    thanks for this post – it was just what i was looking for !!!

    i am sure you have been told… in the xxx.h file, you missed declaring the tableView with the IBOutlet prefix so that the Interface Builder can see it…

  3. S Gombar Says:
    September 11th, 2009 at 5:26 am

    Great post! This is super useful. Having UITableViewController automatically take the whole window space up was so frustrating.

  4. Marco B Says:
    September 22nd, 2009 at 11:02 am

    Great post! This helped me a bunch.

  5. Sean Miller Says:
    October 15th, 2009 at 10:30 am

    Thanks.
    I’m working on a navigation based app. I had no problem getting the default table view working on the main starting screen, but I was struggling with figuring out how to add another table view on a different view. This looks like a good way to go.

  6. orion elenzil Says:
    December 13th, 2009 at 7:21 pm

    fantastic post, thank you.
    i was walking down the road of building a new controller,
    but this saved me a lot of hassle, i think.

    fwiw, it looks like you can use a regular view as the dataSource and delegate; it doesn’t have to be a viewController.

  7. Nicholas Says:
    January 12th, 2010 at 10:12 pm

    Super helpful info! This was exactly what I needed for a current project. Just wanted to note that I think you’re missing the IBOutlet tag before UITableView in the header file. For me, this was preventing me from assigning the tableView property to the table view in interface builder.

  8. Sebastian Says:
    February 6th, 2010 at 10:12 am

    Great tutorial BUT could you please describe how you make this work with a complete custom UITableViewController.

  9. Sachin Palewar Says:
    February 28th, 2010 at 2:33 pm

    Thanks for the Tip.

Leave a Reply