iOS Constraints on Grid of Equal Width/Height Buttons cause positioning and size to vary

Question

I'm updating my Calculator app to use new dynamically sized buttons and having a problem with the constraints. The contains should work fine as far as I can tell, but Xcode complains about misplaced views. The values it gives for the misplaced views are not proper and if I try to fix them, then it just causes more views to be "misplaced."

In the screenshot below, the first multi-colored row (orange, green, pink, yellow, red) is a row of UILabels. They should all have equal widths with 0 spacing between them and the edges of the screen. They are in a container view (Xcode label is "Register Label View", shown in a screenshot below that one.) The Register Label View container has a fixed height constraint.

Then below that, is another container view ("Keypad View") and inside that is a 5x8 grid of views (the buttons on my calculator). The buttons should all have the same widths and all have the same heights. In my storyboard, they are 64x58 which fits perfectly within my 320x464 Keypad View. (320/5 = 64, and 464/8=58).

Below is a screenshot of the Storyboard warnings. Notice the last two items are Dynamic Buttons (in the Keypad View) and it says that one of them is expected to be 63 wide and the other is expected to be 65 wide. That's not correct. They are all supposed to be 64 wide and they all have an Equal Widths constraint.

One of the labels also seems to have the same problem where Xcode expects one of them to be 63 wide, but they should all be 64 wide.

You can see in the Storyboard that the buttons all line up nicely without overlapping (based on their frames), but when I run it in the Simulator, you can see them overlapping each other by one pixel in different directions on each row:

The way I set up the constraints: I arranged them all using their frame (x,y,w,h) in the storyboard, then I selected them all, and added constraints like this:

But then it immediately complains that several of the items are misplaced. What am I doing wrong? How can I make this work properly?

Answer 1

Ok, I figured out how to make it work with only constraints. There were just too many interconnected dependencies and the system couldn't handle it. I was selecting the entire grid of buttons and adding Equal Heights and Equal Widths constraints to all of them, which meant each button was dependent upon every other button.

Instead, I did it row by row. I selected one row:

I applied the Equal Heights and Equal Widths constraints to each item in that row. Then I did the same to Row 2, then Row 3, etc. So, each row was depending only on itself. However, those constraints weren't enough to define the UI completely, because the Height was still undefined.

So, then I selected the first column (i.e. first item in each row) and applied Equal Widths and Equal Heights constraints to those items. Then all of the constraints behaved properly and I didn't receive any Misplaced Views warnings.

I believe this worked because the constraints on the columns could resolve the Height of each row and then row could resolve it's own Widths without having to interact with any other row.

Answer 2

The small amount of code below (and setting the cell size and minimum spacings in the storyboard) will give you your keyboard using a collection view.

@interface ViewController () <UICollectionViewDataSource, UICollectionViewDelegate, UICollectionViewDelegateFlowLayout>
@end

@implementation ViewController

-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
    return 40;
}

-(UICollectionViewCell *) collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
    UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"Cell" forIndexPath:indexPath];
    cell.contentView.backgroundColor = (indexPath.row % 2 == 0)? [UIColor colorWithRed:180/255.0 green:210/255.0 blue:254/255.0 alpha:1] : [UIColor colorWithRed:50/255.0 green:167/255.0 blue:85/255.0 alpha:1];
    return cell;
}

This gives the following result,