How do I create a grid of icons like the iPhone home screen?

Question

How should I go about creating a UI similar to the Springboard (home screen) on the iPhone? I'd like a grid of evenly spaced buttons with images where I can respond to the button tap.

Is the UITable a good fit? Should I use a plain UIView and position the icons manually in DrawRect? Is there an alternative that will automatically evenly space the buttons, allow reorganization, and adjust the layout according to the iPhone orientation?

I come from a C#/Winforms background and am just now starting iPhone development on the Open Toolchain with 2.2.1 headers.

Answer 1

You need to add your icons (which are UIViews of some sort) as subviews of your "Springboard" view. No custom drawing needed, and a UITable is thh absolute wrong way to go. You just need to do the math to place them correctly (by setting their frame).

Answer 2

@August: I took your advice and added the UIButtons as subviews of the UIView rather than look further into the UITable. Thanks!

Hopefully the code below will help to jumpstart someone else. I've statically placed 4 buttons in a grid. It shouldn't be much harder to place any number of buttons according to the parent UIView's bounds and orientation.

@implementation IconView
- (id)initWithFrame:(struct CGRect)windowRect{
  self = [super initWithFrame: windowRect];
  if (self != nil){
    for(int i = 0; i < 4; i++){
      buttons[i] = [self buildButton];
      [self addSubview: buttons[i]];
    }
    [self reInit];
  }
  return self;
}
- (UIButton *) buildButton{
  UIButton *button = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, 60, 60)];
  [button setBackgroundImage: [[UIImage imageNamed:@"icon.png"] stretchableImageWithLeftCapWidth:60 topCapHeight:0] forState:UIControlStateNormal];
  return [button autorelease];
}
- (void)reInit{
  CGRect rect;
  rect = buttons[0].frame;
  rect.origin = CGPointMake(5, 5);
  buttons[0].frame = rect;

  rect = buttons[1].frame;
  rect.origin = CGPointMake(70, 5);
  buttons[1].frame = rect;

  rect = buttons[2].frame;
  rect.origin = CGPointMake(5, 70);
  buttons[2].frame = rect;

  rect = buttons[3].frame;
  rect.origin = CGPointMake(70, 70);
  buttons[3].frame = rect;
}
@end

Answer 3

Use Arijasoft's gridView implementation. Its a static library that lets you generate the grid type of view with call backs and delegate methods for optimization

Answer 4

I've written some sample code to do something like this. See my Tiles blog entry, or just download the code: Tiles-v1.0.zip.

My code creates the icons as Core Animation layers, not as UIViews, but does demonstrate how to detect taps and allow reorganization of the icons. It doesn't handle orientation changes (yet).

Answer 5

The Three20 library has a TTLauncherView class that provides this functionality. See http://three20.info/overview.

Answer 6

Old thread, but you should check out Alan Quartrmain's AQGridView too.