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.

Solution 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).

Solution 2

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.

Solution 3

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

Solution 4

@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

View more solutions

Comments

[Slavo]

Maybe you should provide more domain info. And also tag the question with the framework you're using for development.

[Nick VanderPyle]

Manual math route? I had hoped there was an easier way. Oh well. Thanks! I'm not smart about the UITable. Why is it not a good fit?

[August]

UITable is great for lists. Each object in its own row. A UIView, though, allows you to layout your own grid, with views wherever you want them.

[Alex Wayne]

On the iPhone, a UITableView only has one column. Always. So it's ill suited to a grid. It's more of a fancy outlined list view.

[George]

What is "buttons"? How did you get a collection of UIButton's?

[Tim Sullivan]

Is this a commercial library? If so, how much does it cost?

[Nareshkumar]

The demo version uploaded on the site they say works till feb last day. contact them if you need the commercial library

[kevinthompson]

A UIButton is just a UIView with some extra methods. It would be trivial to change the example to use UIView instead of UIButton.

[n13]

I've taken a good look at AQGridView - it seems to do everything, and it's used in some commercial apps. Decided against it eventually because (1) it's huge, lots of code which puzzles me, can't be that hard?! and (2) it crashed on me when I was dragging icons. Combine that with a large code base, and you can extrapolate that you will end up spending lots of time fixing somebody else's code when you could just write your own. I like the approach that AQGridView takes - it's based on UITableView with delegate and source, and reusable cells. But I'll roll my own.