I am learning constraints and Universal Storyboard in xcode 6 and having a little bit of difficulty here.
Using Universal Storyboard, my goal is to create a UIView that fits perfectly on an iPad Simulator(768 x 1024) and iPhone 4 Simulator(_ x _) with lets say 50 pixel padding or margin on the left and right side.
I am using Universal Storyboard and auto layout and I am getting the following result on the preview
What I have done so far is just drag in a UIView into the Universal Storyboard editor, and then give it a width(768) that fills the iPad Screen, and then applied a width = 768, height = 200 constraints and a constraint to center horizontally and constraint to center vertically.
IPad screen fills width perfectly. However a closer look at my iPhone screen(Image 1), the UIView(in green)'s width do not fill to parent(its width is much bigger than its parent width)
Problem 1) Is there a way to use Universal Storyboard to create a UIView that fills its width to its parent UIView both on the iPad and iPhone?
Problem 2) If problem 1 is achievable, then how do you add a padding or margin left and right to the green UIView?
thanks, and would appreciate any suggestions, comments, or opinions.
Instead of using a width
constraint, you want to be looking at Leading Space
and Trailing Space
constraints.
You'll want to add a Leading Space
constraint from your green UIView
to its superview and set that constraint's constant to the margin you want (50
), and then do the same for Trailing Space
. You should keep your height
and center vertically
constraints as is, but you can delete your center horizontally
constraint since the Trailing Space
and Leading Space
constraints will handle centering your view already.
It should end up looking something like this: