Adjusting button width and height according to device

Question

I am attempting to create a keypad for an app that I'm playing with. The keypad will be a standard four rows with the numbers 0 - 1, a decimal, and +/-. Nothing special. I am attempting to get it to only take up 1/2 of vertical screen space. Using constraints, I pinned the bottom left button to the left and bottom of the screen, and the bottom right button to the bottom and right of the screen. I set the width and height of the left button, and then used Aspect Ratio on that button. On the remaining bottom buttons, I control-drag left to the one next to it, and select Horizontal Spacing, Center Y, Equal Width, and Equal Height I then control drag from each of the buttons above, to the button below, and select Vertical Spacing, Center X, Equal Width, and Equal Height from the list of constraints. My thinking was that the bottom left button would adjust based on the device selected, and then all of the other buttons would adjust based on this button.

Apparently, I was wrong. The buttons are nicely set up in that they remain above and next to one another, without any spaces, but they are not taking up exactly one half of the screen. Depending on the device selected, there is proportionatally more or less space above them. Apparently, I am either missing something, or I am totally approaching this the wrong way.

Any advice on how to accomplish this task would be appreciated. I'm still learning about how constraints play with one another, but I thought that my idea was sound. Make one button adjust itself to the correct size (Aspect Ratio on the bottom left button), and then force all of the other buttons to maintain the same width, height, and distance.

Answer 1

The bottom left button is not going to adjust its size, because you gave it a fixed width and height. The buttons should not have any explicit widths or heights set on them. They should all be set to the same size, and as long as you have constraints going from the left edge to the right, that should set theirs widths. Their heights will also be set by virtue of the aspect ratio constraints.

This will cause the buttons to just their size based on the screen size, but it doesn't make them be half the height of the screen (that could only work for one screen size with a particular aspect ratio). To make the buttons take up half the vertical height of the screen, you would probably want to enclose them in a view that was that height. However, then you'll have a conflict between the aspect ratio of the buttons, and the aspect ratio of the screen. You either need to give up on the aspect ratio, or, not pin the right side of the buttons to the right side of the screen, and use an aspect ratio that will make the buttons all fit on the screen.