UITableView Cell Layout - iphone

Question

I am trying to change the look of the tableviewcells by adding columns. I know the normal tableview doesn't allow this. Can someone point me in the right direction to achieve something similar to the attached image? The basic functionality is to have a grid of cells. 3x3 and any of the 9 cells can be clicked and it opens another page. its similar to the image picker but instead of images it would be cells with subtitles etc.
http://www.bronron.com/apps/IpadMenu.jpg
Any ideas?
Thanks in advance.

Answer 1

I would recommend that you try using a UIScrollView instead of a UITableView for this.
Each item in your menu can be a UIImageView, or a UIButton which you add as subviews to your UIScrollView.
The following code can be insterted in viewDidLoad inside your view controller and assumes that you have setup your UISCrollView in interface builder, otherwise you would need to allocate your scroll view inside viewDidLoad.
The code will add a variable number of menu items to a UIScrollView with two columns. To deal with user input you can make all the menu items UIButtons which call associated IBAction methods, or in this case the menuItems are you views, so you can identify which menu item the user is touching by looking at the users touch location within the scroll view, and then carrying out the appropriate action based on this.
UIImageView *menuItem = nil;
//The x and y view location coordinates for your menu items
int x = 0, y = 0;
//The number of items you want in your menu
int numOfItemsToAdd = 10;
//The height and width of your menu items
int menuItemHeight = 50, menuItemWidth = 50;
//The content seize needs to refelect the number of menu items that will be added
//The hieght of the ocnten size is calclutated by multiplying the menu item height by the number of
//menu items devided by the number of menu items that fit across in the width of the view.
[scrollView setContentSize:CGSizeMake(320, menuItemHeight*numOfItemsToAdd];
for(int i=0; i<numOfItemsToAdd; i++){
if(i%2 == 0){//% the number of columns you want in your menu
x = 0;
if(i!=0)
y += menuItemHeight;
}else{
x = menuItemWidth;
}
menuItem = [[UIImageView alloc] initWithFrame: CGRectMake(x, y, menuItemWidth, menuItemHeight)];
//set the center of the menu item in the scroll superviews coordinate system
menuItem.center = CGPointMake(x, y);
//Add the name of the image you want for the menu item
//These strings could be stored in an array and retrieved in order
menuItem.image = [UIImage imageNamed:#"MyImage"];
//Finaly add the menu item to the scorll view
[scrollView addSubview:menuItem];
}

Answer 2

You can go for multi column grid table view layout , where you can define each and every row and column.
you can check this tutorial for Drawing a Grid in a iPhone UITableView – Tabular Cell Data
http://www.iphonedevx.com/?p=153

Answer 3

This is a completely custom view layout and IMHO, not really suitable for a table view. As with anything custom there are many ways to achieve what you want. Here's how I would approach this implementation myself. There may very well be some good open source implementations out there.
GridViewController : UIViewController
This is the top most view controller and has a UIScrollView containing 1 or more pages of GridView objects. This view controller would communicate with a dataSource that provides 0..N objects to display on the individual grid views.
GridView : UIView
Each grid view would be a custom UIViewSubclass that knows how to layout 0 to N objects as dictated by the data provided by the GridViewController dataSource. Each icon in the grid would be an appropriate UIView subclass, maybe UIButton or UIImageView or maybe custom depending on what it needs to look and act like.
More behavior would be added as needed to drag icons around, create new pages, persist state in the data model, etc etc.