How to implement Auto Layout to fit a StackView with UIButtons inside UIView?

Question

I create a custom Numpad keyboard through xib and stuck on its proper layout.

NumpadView has 4 rows in total: 3 rows with 5 buttons and 1 last row with 4 buttons.

Here is how it looks in a xib now:

I want to make all the UIButtons round with Aspect Ratio 1:1 and for NumpadView to be able to fit all buttons properly regardless of the height it can be initialized with.

I found a great answer with a similar problem on Stack Overflow: CLICK and followed it. On the upper screenshot you can see constraints I made based on its best answer.

The problem I have:

UIButtons don't change the size and fit the NumpadView frame (by height):

And If I will add a top constraint to a GridView then Aspect Ratio on UIButtons doesn't work:

I need the NumpadView to be able to fit all UIButtons inside and the buttons should stay round regardless of NumpadView height. How can I modify the Auto Layout to be able to solve this task?

Test project to play with: Github

Answer 1

The problem is not with your height, its with your width. It doesn't work because your main UIStackView (vertical) has leading and trailing constraint with constant of 10 it overrides the ratio you set and causes the stretch of the buttons.

The solution is to add a center constraint between that UIStackView and its superview, and change its leading, trailing constraint to greater or equal. That will provide the solution you need.

Also, I noticed that you set the button cornerRadius on setup(), Moving it to override func layoutSubviews() will fix another issues you may encounter.