This worked for me. I had the HARDEST time getting this to work on iPad and iPhone devices.
Everything would be fine until I added the UIImageView. SAVE THAT ONE for last.
Here are the steps that worked for me using XCODE 5.1.
After doing each one of these steps you should NOT get a red or yellow icon notification in UIBuilder.
Select Name label.
Anchor it’s LEFT and TOP edges as well as make the HEIGHT fixed.
Select Name textfield. Set it’s LEFT, TOP and RIGHT anchors. Give it a FIXED height.
Select Serial label. Give it a LEFT, TOP anchor and a fixed height.
Select Serial text field. Give it left, top and right anchor with a fixed height.
– follow the same pattern with the VALUE row components –
Select ‘date’ LABEL and give it actors on left, right and top. Give it a fixed height.
NOW SELECT THE TOOLBAR.
Give it anchors at the left, bottom and right. Give it a fixed height.
NOW select the image and give it 4 anchors on the top, bottom, left and right. With aspect ratio set it will adjust to fill the space as expected.
Hope this helps someone.
Things I’ve discovered the hard way.
If AFTER you’ve made an edit you get an ORANGE, RED or YELLOW, warning or drawing in the frame do a CTRL-Z and UNDO your last edit.
AutoLayout wants AS MANY AS POSSIBLE constraints when you make an edit to an UI element in the view.
A FIXED HEIGHT is acceptable but I would NOT SUGGEST getting in the habit of doing a FIXED LENGTH and FIXED HEIGHT for your labels. If you have to support internationalization the font height will work but NOT the length.
The two chapters on auto layout are not easy. Hang in there but don’t expect to rip thru those sections in an hour each.