How would you construct and interact with a grid like a Sudoku board?

Question

What do you think is the best way to implement an interactive grid similar to a Sudoku board for a native iPhone application? I did not see an object to fill this need in the SDK.

Should I make a custom control for an individual cell, then initialize as many of them as I need in a grid form?

_{(source: 4thewww.com)}

Any and all comments are welcome. Thanks!

Answer 1

For such a completely uniform grid, I would create a subclass of UIView and have it determine which row and column the user has touched using a simple calculation:

int touchedRow = 9 * touch.x / [self bounds].width;
int touchedCol = 9 * touch.y / [self bounds].width;

I don't see much benefit in creating 81 individual objects in memory, when one object would suffice.

Answer 2

I've fooled around with a Sudoku game before and I did the gridlines and number drawing in a single view. Not because of memory constraints (using a single control and a reusable cell memory shouldn't be much of a concern) but because it only takes some simple math to figure out the locations of the grid and numbers, and programming a view is going to be easier at first. If later on down the road you start to feel overwhelmed with the amount of drawing and event handling code in your view class, you might want to make a reusable cell object that does much of the work, similar to UITableView.

Core animation would certainly work here too, if you need animation or not. A Sudoku board probably wouldn't have much animation, but if you do (maybe a sliding 'selection' box?) this might be the better choice.

Answer 3

I use this code (source: this blog) ALL the time. It is a great "entry" into the fun and misadventures of making grids. I couple this with an algorithm that looks at the number of objects "desired" and the available "frame", and tells me the best number of columns / rows. Think modulo.. int % int…

- (void)awakeFromNib {
    self.wantsLayer = YES;
    CALayer *grid = self.layer;
    grid.backgroundColor = CGColorCreateGenericRGB(0.1, 0.1, 0.4, .8);
    grid.layoutManager = [CAConstraintLayoutManager layoutManager];   
    int rows = 8;    int columns = 8;
    for (int r = 0; r < rows; r++) {
        for (int c = 0; c < columns; c++) {
            CALayer *cell = [CALayer layer];
            cell.borderColor = CGColorCreateGenericGray(0.8, 0.8);
            cell.borderWidth = 1;  cell.cornerRadius = 4;
            cell.name = [NSString stringWithFormat:@"%u@%u", c, r];
            [cell addConstraint:
            [CAConstraint constraintWithAttribute: kCAConstraintWidth
                relativeTo: @"superlayer"
                attribute: kCAConstraintWidth
                scale: 1.0 / columns  offset: 0]];
            [cell addConstraint:
            [CAConstraint constraintWithAttribute: kCAConstraintHeight
                relativeTo: @"superlayer"
                attribute: kCAConstraintHeight
                scale: 1.0 / rows   offset: 0]];
            [cell addConstraint:
            [CAConstraint constraintWithAttribute: kCAConstraintMinX
                relativeTo: @"superlayer"
                attribute: kCAConstraintMaxX
                scale: c / (float)columns   offset: 0]];
            [cell addConstraint:
            [CAConstraint constraintWithAttribute: kCAConstraintMinY
                relativeTo: @"superlayer"
                attribute: kCAConstraintMaxY
                scale: r / (float)rows    offset: 0]];
        [grid addSublayer:cell];
}   }   }