AutoLayout on Xcode7

Question

I am having a lot of trouble understanding the Autolayout and how it is working phenomenally for everyone else but me. The problem is, the constraints when they end up working for me for one resolution eg for iPad, fail to comply with another like iPhone4s or something, and consequently either this leads to conflicting constraints or not work at all the way I want them to (eg the button will appear way near the text field on iPad and not very near on iPhone). I have read Raywenderlich's Adaptive Layout tutorial as well as Steven Lipton's book on Autolayout (Practical AutoLayout) and still facing a lot of trouble. Please help me out. Its so demotivating that I want give up coding altogether and end up becoming a monk or something... x(

EDIT

So to help you out further, I'll explain how somethings are not working for me with the help of some snapshots. My original idea was to show 4 views each containing a text field which would transition in through CoreAnimation on the press of a specific button. The view of ViewController has an image in the background, a back button, 4 views, a progress bar and a button to show each view. The problems are as follows; though the whole view seems appropriate on the simulator, I can see conflicts in the terminal of xcode.

image with all elements:

image with conflicts:

But somehow if I resolve the conflicts, the autolayout doesn't function as required on all devices. eg

no conflicts but next button is hiding on tap of textfield in iPhone4s:

where as in the case of iPad no conflicts and Next button is very much accessible:

How can I treat this to work on all devices the same and coherently. Please help out thanks.

Answer 1

One thing to understand is that AutoLayout won't solve all your problems for screen sizes that differ a lot (and I still have the impression that the size classes are cumbersome to use). I normally stick with two different xibs for phone and tablet, connected to the same view controller. And if you can, drop iOS 7 support, that removes a lot of headaches concerning AutoLayout.

EDIT

By all means , DO USE auto layout . What I said is just that often it's better to have two different xibs for greatly different resolutions, but of course use auto layout in both of them.

Answer 2

Few things which I want to share from my experience about Auto-layout.

1. If you want an element to appear at a particular position (20 points from right side and 40 points from top) you need to adjust button in storyboard and add trailing and top constraints. Xcode will give you suggestion to fix height/width of element. Resize element or add height and width constraints if you want exactly same height width as in storyboard.
2. If you want en element to expand/ contract according to height width of different screen size add -leading, -trailing, -top, and bottom constraints.
3. Important: When we "pin" elements (eg button) (top, bottom, leading, trailing) these constraints are added relative to other elements (eg some other button). In this case make sure other elements have constraints. Otherwise Xcode will give error of missing constraints.
4. Do not add missing constraints as Xcode is suggesting because Xcode will add some constraints which will result in unexpected sizes.

Now Regarding your problem: When keyboard appears either you can move your view up (Relative to height of keyboard. This answer will help you if you want to achieve this without changing constraints programmatically. Otherwise if you have correctly added constraints than create and IBOutlet of top constraint of top most element and subtract a constant of keyboard height (150) from that constraints's constant. And also you need to add keyboard height (150) in that constraint's constant when keyboard disappears.

Answer 3

The issue you have with the next button being hidden by the keyboard is not directly related to auto-layout, though auto-layout can help managing it. The issue is simply that you are using more space on screen than is available.

There are several ways to solve this issue:

• you can embed your content in a scrollview, so users can scroll the screen up and down if the contents of the scroll view exceed the available height. Auto-layout will help here: you'll set a constraint from the bottom of the scroll view to the bottom layout guide, add an outlet to that constraint, and in your code you can observe keyboard hide/show/change notifications and adjust the constant of that constraint accordingly

• you adjust your layout so that everything is always visible, even with the keyboard up, without changing the position of anything whether the keyboard is up or not. That means you don't use any of the space where the keyboard will show up

• you adjust your layout dynamically based on the presence of the keyboard. This will combine a constraint like the one in the first option with other constraints to move things around when that one moves.

Before you do anything, think about how you want things to look like in the different scenarios. Then build the constraints that will give this result. Auto-layout cannot guess for you what you want to do, you need to have a precise idea of the layout you want.