CODEWITHSUNDEEP
iosxcodeuser-interfaceinterface-builderxcode6
FrozenHeart
FrozenHeart

Reputation: 20746

How to correctly use constraints when both UITableView and UIImageView are presented on the same view controller

Suppose that I have the following view controller and this is how I want to see it on all iPhone:

enter image description here

enter image description here

If I run it on iPhone 6 it has the following look:

enter image description here

Here you can notice that UITableView not fit the whole screen and UIImageView doesn't placed at the bottom of the screen.

How can I achieve the required behavior via constraints in XCode 6? I thought that I need the following constraints:

But it doesn't work as expected even after auto-resolve constraints issues:

enter image description here

Thanks in advance.

Upvotes: 0

Views: 1841

Answers (2)

Varoon
Varoon

Reputation: 172

First make sure you have selected the correct size class. The 'Compact Width | Regular Height' size class must be selected in the Interface Builder. Now add the Trailing space,Leading Space, Top space and Bottom space constraints to the table view. For the image view set the view mode to Aspect fit and add the constraints : Align Center Y ,Top space,Bottom space, Leading space, Trailing space and Aspect Ratio .enter image description here

Upvotes: 1

Sam Clewlow
Sam Clewlow

Reputation: 4351

Ok, a few things here:

  • Each view needs enough constraints to define it's x and y position, and it's width and height unambiguously. To start with, go back to Interface builder and delete all of your constraints and lay out the view as you would like it to look. You want to have control over every constraint added, don't let IB automatically resolve the issues, as in all likely hood it won't do what you want.

  • Do you have an image that is the size you want it to be on screen, once you've factored in @2x, @3x etc? If so, then your job will be easier, as the width and height of the image view can be defined by the width and height of the image (ie the image view's intrinsic content size).

  • In order to use Autolayout effectively, you need to think about your view holistically, and think about how you want your views to behave when the screen size changes, be clear in your head about the behaviour.

To achieve the layout you want, I would do the following:

  1. Constrain the tableview's leading, top and trailing edges to the superview, with a constant value of 0. This means it can get wider and thinner with the device, it will stretch horizontally, but always stick to the top. This has defined the tableview's x and y position, as well as it's width (height still to go, but keep reading...)

  2. Constrain the image view to match the horizontal centre of it's superview (x position defined) and constrain it's bottom edge to the superviews bottom edge (y position defined). If've you've got the right sized asset, then that will take care of the width and height too. If not, you could go ahead give it explicit width and height constraints.

  3. Now we can constrain the tableview's bottom edge to the top of the image view, with a constant of 0 (ie touching). Note we haven't give the table view an explicit height constraint, so as the device screen grows vertically, the table view will stretch vertically.

Autolayout is hard at first. I'd recommended lots of reading to get over the initial hump, really get to know what a constraint is doing, it's limitations, and the way in which the system parses constraints to translate them into frames. This book is really good, and really helped me learn:

http://www.amazon.co.uk/Auto-Layout-Demystified-Mobile-Programming/dp/0321967194

Best of luck

Upvotes: 1

Related Questions