How do I get the auto-layout to work correctly in xcode?

Question

I am attempting to get the auto-layout to work correctly. For some reason, when I change the size of the device, all of the images and buttons are out of place and don't resize at all. This is true for the 3.5 inch screen, as well as the ipad retina. When I run the simulator, the app shows exactly how it shows in storyboard. Auto-layout should be resizing everything so that this does not happen. please help!

Answer 1

After a long night of struggling, I figured out what I needed to do. I was setting the individual view controllers to have a simulated size of 4.7inch. This made it hard for the constraints to scale across all devices since I was setting the constraints for a specific screen size. However, this would be the way to go if using size classes.

I solved my issue by using the standard 600 X 600 canvas that is available before choosing a specific size. This way, I was able to set constraints that scaled down for the smaller screens, and scaled up for the larger/HD screens. This works perfectly with auto-layout. Hope that helps someone!

Answer 2

The issue is that constraints don't scale. When you set a constraint height to 200 it will always be 200, even if the screen is only 100 high. So what you need to do is try to set constraints that makes the size dynamically rather then set the constraint height/widths yourself.

For instance, on your first label under the UIImageView set the constraints leading and trailing to 20, then set the label constraint to center horizontally on the UIImageView. No other constraints for the label. This will cause the label to shrink in width since its set to be 20 away from each side. The height will not change since there is nothing "pushing" it to shrink since you are missing a few constraints, but basically you need to use the top, bottom, leading, and trailing, constraints to the UIViewController view in order to "scale" the elements.

If you'd like I could try and set the constraints for you if you upload the project and you can then watch how I did.

Edit

It's hard for me to know what kind of behaviour you'd want, but something has to scale or change size in your set up. The easiest would be to resize the UIImageView. It's basically impossible to make it look exactly alike in every screen size, though, so you'll have to play around a bit with constraints until you understand how they work and how to adjust them according to what you want. One way is to create the layout you want and then connect them to code and scale them depending on size of the screen (this is a bit of a pain, I did that in a project recently and it took a bit of time and effort).

The easiest approach is to make the UIImageView to change its size when it needs to, and add extra space in the bottom. Here is a demo project I threw together earlier. Download here

Answer 3

Profile pic

1) first you set the profile pic image center horizontal to the content view

2) set height and width for the profile pic

3)set top space constraints to content view

Change Profile pic label

1)set central horizontal to profile pic

2)set width and height

3)set vertical space between profile pic

Challenges Accepted label

1) set vertical space to profile pic label

2) set Leading space to container

3) set height

and do same for the below two content . i didnt tested. check it and try