How can I achieve a 30 button grid using autolayout storyboards? - ios

Question

So I had this working for a 12 button (4x3) grid of buttons.
I'd like all of the buttons to be equal size, common distances above and to the side of each other, and the entire grid to be centered on the device, like so:
The problem is, it looks like a jumbled mess when I build the project.
I have no problem getting the segmented control, score, or reset buttons positioned correctly, but the grid just messes everything up.
I've been using the middle tool to set up the constraints on the grid, which worked fine for the 12 button grid:
However, using this only creates infinite conflicting constraints that cannot be resolved by xcode.
I am very new to iOS and could be missing something simple, but I've been trying my best to match up to the blue auto suggested lines as much as possible here.
Thanks for any advice.

Answer 1

It would be a lot simpler just to use a UICollectionView with a UICollectionViewFlowLayout and let the flow layout create the grid for you.
But even if you're not going to do that, then still, my advice is: don't set this up in Xcode / Interface Builder; make the entire grid (and constraints if you want them) in code. It's much simpler (and more fun and less boring and, of course, less error-prone).

Answer 2

1.) Instead of setting each button up in the interface builder just create the container (a UIView) that the whole grid should fit inside. Add constraints to that container for how you would want that to expand and contract with screen size.
2.) Link that container UIView to your .h view controller class and name it gridContainer or whatever.
3.) Create a property in your .h class:
#property (strong, nonatomic) NSMutableArray *twoDimensionalArrayContainingRowsOfCardButtons;
4.) Then:
- (void)viewDidLoad {
// other stuff you're doing to set up your app
self.twoDimensionalArrayContainingRowsOfCardButtons = [NSMutableArray new];
//Do this inside the main thread to make sure all your other views are laid out before this starts
//Sometimes when you do layout stuff before the rest of the view is set up from Interface Builder you will get weird results.
dispatch_async(dispatch_get_main_queue(), ^{
[self createTwoMentionalArrayHoldingCardButtons];
[self displayCardGrid];
});
}
- (void)createTwoMentionalArrayHoldingCardButtons {
NSMutableArray *arrayWithRowsOfButtons= [NSMutableArray new];
for (int x = 0; x < 6; x++) {
NSMutableArray *arrayOfButtonsAtRowX = [NSMutableArray new];
for (int i = 0; i < 6; i++) {
CGRect rect = self.gridContainer.bounds;
CGSize cellSize = CGSizeMake(rect.size.width / 6, rect.size.height / 6);
UIButton *buttonInColumnI = [UIButton alloc] initWithFrame:CGRectMake(cellSize.width * i, cellSize.height * x, cellSize.width, cellSize.height);
[buttonInColumnI setImage:[UIImage imageNamed:#"yourCardImage"] forState:UIControlStateNormal];
[buttonInColumnI addTarget:self action:#selector(yourButtonAction:) forControlEvents:UIControlEventTouchUpInside];
[arrayOfButtonsAtRowX addObject:buttonInColumnI];
}
[arrayOfRowsOfButtons addObject:arrayOfButtonsAtRowX];
}
self.twoDimensionalArrayContainingRowsOfCardButtons = arrayWithRowsOfButtons;
}
- (void)displayCardGrid {
for (int x = 0; x < self.twoDimensionalArrayContainingRowsOfCardButtons.count; x++) {
NSMutableArray *arrayOfButtonsAtColumnsAtRowX = self.twoDimensionalArrayContainingRowsOfCardButtons[x];
for (int i = 0; i < arrayOfButtonsAtColumnsAtRowX.count; i++) {
UIButton *buttonAtColumnI = arrayOfButtonsAtColumnsAtRowX[i];
[self.gridContainer addSubview:buttonAtColumnI];
}
}
}
- (void)yourButtonAction:(UIButton *)tappedCard {
//To swap the card image on your tapped button
for (int x = 0; x < self.twoDimensionalArrayContainingRowsOfCardButtons.count; x++) {
NSMutableArray *arrayOfButtonsAtColumnsAtRowX = self.twoDimensionalArrayContainingRowsOfCardButtons[x];
for (int i = 0; i < arrayOfButtonsAtColumnsAtRowX.count; i++) {
UIButton *buttonAtColumnI = arrayOfButtonsAtColumnsAtRowX[i];
if (tappedCard == buttonAtColumnI) {
int row = x;
int column = i;
//Now you can save that the user has tapped something at this row and column.
//While you're here, you can update the card image.
[tappedCard setImage:[UIImage imageNamed:#"CardExposedImage"];
}
}
}
}
I'm writing this all in the box here without running it, so hopefully that works for you. Ended up being a few more lines than expected.
Edit: forgot to add that I separated the building of the card buttons and the displaying of them so that you could call the display method separately. With the property, you also have a retained source of all the cards so you can just fetch them out of the array and change what you need, as needed.