Creating table of buttons with width and height

Question

I am creating a word search game using buttons to store the letters, and I need to create a table with a certain number of columns and rows. So if the table is supposed to be 15 x 20, I have a ivar for tableWidth and tableHeight, and I need to make 300 buttons and place them on the view. I can't use interface builder, so I am not sure how I am going to create the buttons and place them on the view. Does anyone have any pointers for me? Let me know if I need to explain it better.

Answer 1

EDIT: I just saw your comment on another answer that you don't want to use a UITableView. I'm leaving my original answer below since it's a good way to do it (especially if not all of the buttons will be currently visible), but you can also do something as simple as the following:

for (int i = 0; i < NUMBER_OF_ROWS; ++i) {
    for (int j = 0; j < NUMBER_OF_COLUMNS; ++j) {
        UIButton *newButton = [[UIButton alloc] init];
        newButton.frame = ... // Calculate frame based on i and j
        // Customize other behavior of the button (appearance, targets, etc) based on i and j
        [superviewToAddButtonTo addSubview:newButton];
        // If not using ARC: [newButton release];
    }
}

---

UITableView can be confusing the first time you use it.

The first thing is to make a custom subclass of UITableViewController, which declares a few nice things for you, and automatically sets your class up as conforming to the two relevant protocols (UITableViewDelegate and UITableViewDataSource). Then you need to override the methods that provide the information about your table.

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    cellIdentifier = @"Cell";
    cell = [tableView dequeueReusableCellWithIdentifier:cellIdentifier];
    if (cell == nil) {
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault
                                      reuseIdentifier:cellIdentifier]; // if you're not using ARC, make sure to autorelease...

        for (int i = 0; i < NUMBER_OF_COLUMNS; ++i) {
            UIButton *newButton = [[UIButton alloc] init];
            // Set the frame and customize the button in other ways, and then...
            [cell addSubview:newButton];
            // If you're not using ARC, make sure to release...
        }
    }
    return cell;
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    return NUMBER_OF_ROWS;
}

There are various other things you can do to customize the table, but that should give you the basic functionality you need. So in order to actually add one of these to your app you would do:

MyTableViewControllerSubclass *tableViewController = [[MyTableViewControllerSubclass alloc] init];
[superViewToAddTableTo addSubview:tableViewController.tableView];
// If you're not using ARC, make sure to release the tableViewController in your dealloc method

Answer 2

iOS tables have only one column, so each row is a single cell. You can populate each cell with multiple buttons and make it look like multiple columns. Also look up UICollectionView.

You'll need to create UIButtons programmatically as in:

How do I create a basic UIButton programmatically?.

Answer 3

A UIButton is a view (UIView). Create it programmatically, give it a frame (which you will have to calculate for each button), and add it as a subview to your overall grid view.

If you don't know what a UIView is, how to make one UIView the subview of another, how view positioning works, etc. (e.g. what a frame is), read my book:

http://www.apeth.com/iOSBook/ch14.html

Answer 4

1. Get the width of screen.

2. Get the height of screen.

3. Find w and h for each button width/15 and height/20 respectively.

4. Loop r=0 to 14 step +1 goto step 5.

5. Loop c=0 to 19 step +1 goto step 6.

6. Make frame with x=0*width, y=0*height, width, height

7. Make a button with the above frame, setting title, target/action if required.

8. Next c Loop

9. Next r loop

Answer 5

If you don't want to use a UITableView I'd recommend putting together a custom view container with your buttons inside it.

Loop through your rows and columns and add UIButtons to your main view as subviews. You'll have to handle the placement of the UIButton's via their frames and adjust their height/width to fit into a grid. Here's some dodgy psuedo code:

#import "ViewController.h"

@interface ViewController ()

@property (nonatomic) NSMutableArray *buttons;

@end

@implementation ViewController

- (void)viewDidLoad
{
    [super viewDidLoad];

    // 320 x 460 for regular iPhone screen size
    // 320 / 8 = 40 px width
    // 460 / 10 = 46 px tall
    // 8 * 10 = 80 buttons

    double width = 40.0;
    double height = 46.0;

    double xOffset = 0.0;
    double yOffset = 0.0;

    int rowCount = 0;
    int columnCount = 0;

    for(int i = 0; i < 80; i++) {

        xOffset = columnCount * width;
        yOffset = rowCount * height;

        UIButton *button = [UIButton buttonWithType:UIButtonTypeRoundedRect];
        button.frame = CGRectMake(xOffset, yOffset, width, height);
        button.tintColor = [UIColor redColor];

        [self.view addSubview:button];

        columnCount++;

        if (columnCount == 8)
            columnCount = 0;

        if (i == 9 ||
        i == 19 ||
        i == 29 ||
        i == 39 ||
        i == 49 ||
        i == 59 ||
        i == 69 ||
        i == 79)
        rowCount++;
    }
}

@end

This could be vastly improved, I'm sure, but it will draw a grid of buttons in the dimensions specified.