May 26

Changing the display size of a UITableView

Interface Builder Add comments

UPDATE 29-Apr-2010:

By popular demand, here is a git repository with an updated sample:

git clone git@github.com:mitchallen/TableSize2.git

Note that I have NOT updated the code in this post. Look at the repository for the new code. This new sample fixes two issues: missing IBOutlet and the deprecated setText method on the cell.

To see how it looks in “boxed” mode on the iPad, set the compiler to: Simulator – 3.2 | Debug.

ORIGINAL POST

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: , , , , , ,

16 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.

  10. Patrick Says:
    April 16th, 2010 at 12:00 pm

    Thx for the tutorial. Like some other folks I put in ‘IBOutlet’ and was able to make the reference to ‘tableview’ in IB. I also had to make a reference to ‘view’ for the tableview to display. Unfortunately, the tableview still takes up the whole screen. Can you/anybody offer any insight? My head is really sore from banging it on the wall!:) Too much to ask for a sample proj?
    Thx in advance -
    PF

  11. Mike V Says:
    April 29th, 2010 at 10:16 pm

    I’m using SDK 3.1.4 under Leopard, and I’m having the same problem with the tableview taking up the entire display.

    Could somebody confirm that Snow Leopard and 3.2 are not required for this? And if they are required for this technique, is there some way to accomplish the same results with Leopard and SDK 3.1.4?

  12. Mitch Allen Says:
    April 30th, 2010 at 1:18 am

    I’ve posted an updated sample compiled with the latest 3.x SDK. If you have git installed, see the update at the top of the post for cloning it to your machine. It only works for the iPhone. I’m not sure it relates to the iPad.

  13. I’ve updated the UITableView sample Says:
    April 30th, 2010 at 1:43 am

    [...] http://mitchallen.com/iphone/archives/184 [...]

  14. Esowes Says:
    May 23rd, 2010 at 1:18 am

    Hello,

    Thanks for this tutorial…

    But, shouldn’t tableSize2ViewController implement the “UITableViewControllerDelegate” protocol ?:

    in the .h:

    @interface TableSize2ViewController : UIViewController {

    //etc…
    }

  15. Sreenivas Says Says:
    June 15th, 2010 at 4:25 am

    Hello,
    thanks for this tutorial…..

    1. i want add my won data and also when i click on row i want to navigate to another UIViewcontrol only.
    2. how to set labletext in oneview to antherview of textfield
    pls help me.

    pls send this example to mu mail pls pls plssssssssssssss

  16. Sayeed Says:
    July 19th, 2010 at 12:31 am

    Hey Cool Tutorial man!! Earlier the table view used to take up the entire screen space and it was so frustrating.

    I would like to point out that when you declare the UITableView *tableView, you need to include IBOutlet in the code to be able to drag and connect the referencing outlet to tableView. Please check.

Leave a Reply