CODEWITHSUNDEEP
iosxcodeautolayoutgrid-layoutaspect-ratio
Zonker.in.Geneva
Zonker.in.Geneva

Reputation: 1499

Really struggling with Autolayout - 4 buttons arranged 2x2

I have a fairly simple scene in my Storyboard, but I can't manage to arrange the four orange buttons with Autolayout.

scene with four buttons

I've been trying to get this right for a week. I've searched online and I must not have the right keywords, because I haven't found anything that applies.

Everything but the orange buttons are behaving correctly for all devices.

The orange buttons should be arranged in a 2x2 grid.

I want the distance between the "Question" label and the first row of buttons to be the same distance between the second row of buttons and the "Home" button.

I want the orange buttons to retain the same aspect ratio, and I want them to grow/shrink as much as possible, but they should remain centered horizontally and vertically between "Question" and "Home" and the left/right edges.

Upvotes: 1

Views: 931

Answers (2)

Sparr
Sparr

Reputation: 371

You can only do so much using the storyboard. You will either have to insert an outlet and manually manage the frame sizes, or you can programmatically use autolayout to mimic your intended behavior. I can help you with the programmatic part if you are open for it.

Upvotes: 0

Darren
Darren

Reputation: 25619

Use container views to divide and conquer the layout.

Start with top, middle, and bottom views:

Initial Layout

The middle view constraints are:

  • Center X in container
  • Center Y in container
  • Aspect ratio 1:1
  • Leading/Trailing/Top/Bottom space = 10, 250 priority
  • Leading/Trailing/Top/Bottom space >= 10, 1000 priority

This will give you support for both landscape and portrait orientations:

enter image description here

Now you can add the 4 grid views inside of the middle view:

enter image description here

The grid views will have equal widths and heights to each other, and set the spacing between the views to taste.

Upvotes: 3

Related Questions