Solving Adpative and fluid layout issue

Question

With my application, I've noticed that between different devices from the iPhone SE > iPhone 7+ there seemed to be extra white space with the AutoLayout rules I applied.

The best example of this is an image view on my welcome screen as you can see in the image below. As the device gets larger the space towards the bottom gets larger, to solve this issue what I'm trying to do is push the image down to accommodate for the extra space.

To fix this issue what I tried to do was apply an inequality constraint which would increase the space at the top of the image view by more than 45pts if possible but I seem to be getting an inequality constraint error as you can see below.

The other method which I've tried is to add priority constraints and combine this with inequality constraints as well as you can see in the image below but this is having no effect on my image in terms of pushing it down on larger devices where there is more space.

What is the best way to resolve an issue like this and are there any useful links or tutorials anyone can suggest to help me get a better understanding of this issue?

Answer 1

The issue is that the constraint is ambiguous - your top constraint is saying that the the image top must be greater than or equal to an offset from the top layout guide. There are an infinite number of possible values that would satisfy this. Auto layout needs the constraints to resolve to single values so that it knows exactly where things need to be placed.

Priorities are used to indicate which value to take when there are multiple constraints giving a result for the same element - e.g. if there were two constraints specifying the top value for your image, the priorities would allow auto layout to decide which one to use.

To allow your layout to adapt to different screen heights, you could try removing the top constraint, and instead aligning the image vertically with an offset from the parent view's 'center Y', ie. something like:

Or you could put all the elements in a wrapper view and align that view to the main view's center X and center Y (assuming you want it centered, if not add an offset).

Hope that makes sense, and helps!

Answer 2

That's why I only use SnapKit.

Interface Builder works, but it's a huge pain to manage. If you have a bug, you're going to click and point and click and point hundreds of times before you find what's wrong. You end up having to be extremely disciplined as it is very easy to create a giant mess of constraints in IB. And whenever you need more control, you still have to programmatically modify the constraints anyway.

Don't make your life hard. Use SnapKit and never look back. It's free, open source, etc etc