Best way to build 10x10 grid of UIButtons?

Question

I'm going to have a 10x10 grid of UIButton objects. Each of these UIButtons is going to need to be referenced by the row and column number, so they should probably be stored in some type of an array.

My question: what is the easiest way to create this grid? Programmatically or through the Interface Builder? If programmatically, what would be the easiest way to access these buttons so that when they are touched, I am able to know the row and column number of the touched button?

Answer 1

I personally don't like IB, so I recommend to do it programmatically!

Use an NSArray to store your UIButton's. Each button's index is row*COLUMNS+column.

Set the tag property to BASE+index (BASE being an arbitrary value > 0) so that you can find a button's position: index=tag-BASE; row=index/COLUMNS; column=index%COLUMNS;

- (void)loadView {
    [super loadView];

    for (NSInteger row = 0; row < ROWS; row++) {
        for (NSInteger col = 0; col < COLS; col++) {
            UIButton *button = [UIButton buttonWithType:UIButtonTypeRoundedRect];
            [buttonArray addObject:button];
            button.tag = BASE + row * COLS + col;
            button.frame = ...;
            [button addTarget:self action:@selector(didPushButton:) forControlEvents:UIControlEventTouchDown];
            [self.view addSubview:button];
        }
    }
}

- (void)didPushButton:(id)sender {
    UIButton *button = (UIButton *)sender;
    NSInteger index = button.tag - BASE;
    NSInteger row = index / COLS;
    NSInteger col = index % COLS;
    // ...
}

Answer 2

You can use a GridView from the moriarty library to help with layout - positioning each button where you want it. Building partially on squelart's sample code as a createButtonAtRow:col: method, this could work as follows:

GridView* gridview = [[GridView alloc] initWithRows:ROWS cols:COLS];
for (NSInteger row = 0; row < ROWS; ++row) {
  for (NSInteger col = 0; col < COLS; ++col) {
    [gridView addsubView:[self createButtonAtRow:row col:col]];
  }
}
[myView addSubview:gridView];
[gridView release];  // Let myView retain gridView.