UI Button Grid View - Spacing between Cells (UIButtons)

Question

I was wondering how I could set a size for the spacing between the UI Buttons in the grid. At the moment I know how to change the sizing of the buttons but this changes the overall size of the grid instead of just the buttons. Included are some screenshots of the application at the moment (ignore the UI Button borders). The code is as follows:

- (void)setupBoard:(GameBoard *)board;
{
NSUInteger rows = [[currentGame mainBoard] rows];
NSUInteger cols = [[currentGame mainBoard] columns];
CGSize cellSize = { gridView.frame.size.width/ cols, gridView.frame.size.height/ rows          };
CGPoint insertPoint = CGPointZero;

for (int x = 0; x <= rows; x++) {
    for (int y = 0; y <= cols; y++) {
        UIButton *newButton = [UIButton buttonWithType:UIButtonTypeCustom];
        CGRect newButtonFrame = { insertPoint, cellSize };
        [newButton associateValue:[NSNumber numberWithInt:x] withKey:@"xrow"];
        [newButton associateValue:[NSNumber numberWithInt:y] withKey:@"ycol"];
        [newButton setFrame:newButtonFrame];
        [newButton setSelected:NO];
        [newButton setBackgroundColor:[UIColor colorWithRed:(164.0/255.0)   green:(240.0/255.0) blue:(254.0/255.0) alpha:1.0]];
        [[newButton layer] setCornerRadius:5.0f];
        [[newButton layer] setBorderColor:[[UIColor colorWithRed:(0.0/255.0) green:(0.0/255.0) blue:(0.0/255.0) alpha:0.5] CGColor]];
        [[newButton layer] setBorderWidth:5.0f];
        [newButton addTarget:self action:@selector(toggleCellState:) forControlEvents:UIControlEventTouchUpInside];
        [gridView addSubview:newButton];
        [newButton setAlpha:0.10];
        insertPoint.x += cellSize.width;
    }
    insertPoint.x   = 0;
    insertPoint.y += cellSize.height;
}

}

Don't hesitate if you want see more of the code.

Answer 1

You can use the following code to insert a padding of 3 on each side of the button. This involves reducing the cell size by 6.

    CGFloat padding = 3;
    cellSize.width -= 2*padding; //new code
    cellSize.height -= 2*padding; //new code

    for (int x = 0; x <= rows; x++) {
        insertPoint.y += padding; //new code

        for (int y = 0; y <= cols; y++) {
            insertPoint.x += padding; //new code

            UIButton *newButton = [UIButton buttonWithType:UIButtonTypeCustom];
            CGRect newButtonFrame = { insertPoint, cellSize };
            [newButton associateValue:[NSNumber numberWithInt:x] withKey:@"xrow"];
            [newButton associateValue:[NSNumber numberWithInt:y] withKey:@"ycol"];
            [newButton setFrame:newButtonFrame];
            [newButton setSelected:NO];
            [newButton setBackgroundColor:[UIColor redColor]];
            [[newButton layer] setCornerRadius:5.0f];
            [[newButton layer] setBorderColor:[[UIColor blueColor] CGColor]];
            [[newButton layer] setBorderWidth:5.0f];
            [newButton addTarget:self action:@selector(toggleCellState:) forControlEvents:UIControlEventTouchUpInside];
            [gridView addSubview:newButton];
            [newButton setAlpha:0.10];

            insertPoint.x +=  padding+cellSize.width; //updated code
        }
        insertPoint.x   = 0;

        insertPoint.y +=  padding+cellSize.height; //updated code
   }