Apr 30

Since the UITableView sample has been generating a lot of comments (and some frustration), I’ve posted an update compiled with the latest 3.x SDK:

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

The update includes a link to a new sample that you can clone from github.

Tags: ,

May 26

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