CODEWITHSUNDEEP
iosxcodeswiftinterface-builderuistoryboard
Dominic
Dominic

Reputation: 95

Using Auto-Layout in Interface Builder/Storyboards to create a grid type layout

I am trying to create a grid type layout using Interface Builder/Storyboards. I am using a UIImageView as a background picture and placing UIButtons over the areas of the image that I want to be interactive. No matter what constraints I try I cannot seem to get the buttons to their proper spots. I have attached screen shots from Xcode 6, and well as provided a link to the project on GitHub. Thank you so much to anyone that can provide some insight.

Edit

After taking Matt's advice from the comments I created a layout using the images as the actual buttons. It works really well, but I can seem to get the buttons to constrain to each other properly. I have attached a few images of what I'm getting now. If anyone has any idea what's going on that would be great! Also the GitHub Repository has been updated as well.

As a note, I am intentionally leaving the black bar at the bottom.

View that I see on iPhone 4/4s

Upvotes: 2

Views: 1687

Answers (2)

SwiftArchitect
SwiftArchitect

Reputation: 48514

Follow the horizontal+vertical edge-to-edge definition principle

  1. Each object must have an edge-to-edge constraint. i.e. you must be able to virtually draw a line of constraints for any object to define it's edges.
  2. Rule #1 must be respected horizontally & vertically

As an example, and assuming you do not want your buttons to resize:

  • pick an intrinsic width for each button
  • align left-most margin of left-most button to container
  • add an horizontal spacing constraint for each button to the one to the left
  • assign a right-most margin of right-most button to container
  • pick appropriate priorities

Repeat vertically.

Upvotes: 1

Vitalii Gozhenko
Vitalii Gozhenko

Reputation: 9354

Please look into shared XIB.

You can achieve it via proportional to superview width or height constraint, +- constant for padding.

https://dl.dropboxusercontent.com/u/48223929/AutolayoutExampleView.xib enter image description here

Upvotes: 1

Related Questions