How do I create a grid of icons like the iPhone ho

问题:

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.

回答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).

回答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.

回答3:

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

回答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

回答5:

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

回答6:

As stated above using UIView and doing math to layout the views is the easiest option.

check the sample code from developer.apple.com https://developer.apple.com/library/ios/#samplecode/PageControl/Introduction/Intro.html#//apple_ref/doc/uid/DTS40007795

Depending on your requirement, you might not need to use any external framework.