How to pin two views together using constraints

Question

My view controller has only two elements, a tab bar and an image view and I just want to simply put the tab bar at the bottom of the screen with the image view above it, with the bottom of the image view pinned to the top of the tab bar.

The image view will contain an image that only has interesting content at the bottom of it, hence on a smaller screen the top of the image can simply be "chopped off" i.e. the y origin of the image view will be 0 on a 568 screen but a negative value on a smaller screen.

Something I thought would be so simple and straight forward it would take just 10 seconds, but I'm getting constraint errors and don't know why.

For the tab view I added the following four constraints: - width 320 - height 49 - 0 on the left - 0 on the bottom (connected to the Bottom Layout guide)

Then for the image view I added the following four constraints: - width 320 - height <= 519 - 0 on the left - 0 on the bottom (connected to the Tab bar)

I thought if the tab bar is pinned to the bottom of the screen and has a fixed height, and the bottom of the image view is pinned to the top of the tab bar and has a <= value for its height it would work out. But obviously not as I get these errors:

Answer 1

Why don't you reset the constraints of the view controller to suggested constraints. Xcode 5 has improved auto layout a lot.

To get the top of the image to be clipped set the content mode to bottom. This will ensure the image stays fixed to the bottom of the image view clipping the top.