How to make uiview's width fit to the width of the parent view with some padding for both iphone and ipad using universal storyboard in xcode 6?

Question

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.

Goal should look like this:

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.

Observe result:

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)

Questions:

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.

Reconnoitre

Answer 1

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:

Nimesh

Yup. You basically want to add constraints that look exactly like the "50px" lines drawn on the diagram in your question. Auto layout can work out the width from there. (You can add leading/trailing space constraints easily in IB by control-dragging horizontally from your UIView to the containing view.) The WWDC videos on Auto Layout are excellent, by the way, and have a lot of tips on how to add/view constraints. – Worry

Thanks Mike, your example is very helpful. Also thanks Matt for the WWDC video suggestion.^^. By the way, I have an outlet to the green UIView and I tried to print out its frame... it prints <UIView: 0x7fa8343109d0; frame = (16 200; 500 200); autoresize = RM+BM; layer = <CALayer: 0x7fa834310aa0>> ... I tried to print the green UIView's frame on different simulators, I get the same width. How can this be? I thought they are suppose to be different width due to the constraints and different device resolution(iphone 4s,iphone 5, iphone5s, ipad, ipad retina...etc) – Reconnoitre

@xiaowoo, when are you printing the frame? If you're doing it in viewDidLoad, on somewhere similar, before the view is laid out and displayed on screen, then it'll have whatever size if defined in your storyboard. – Nimesh

thanks again Mike for pointing me to the right direction. You are absolutely correct that viewDidLoad prints the predefined storyboard value.^^. – Reconnoitre

Mike & @xiaowoo, if we want to make sure the frame has the device's dimensions and not the Universal Storyboard's dimensions, where do we call the code if not viewDidLoad? – Phonograph

The leading space and trailing space are grayed out for me. No hope in sight. – Coachwhip