59

So I have an image view and a button. I need the image view to be the correct size (not look squished or stretched) on all devices and more importantly I need it to be the size of the screen. I need the button to stay in about the same place on all devices.

Back with Xcode 5 I remember auto layout fixing this problem but now that does not work. I looked at https://www.youtube.com/watch?v=G53PuA_TlXk and tried control-dragging to the view controller and centering the view both horizontally and vertically, but I can't get it to scale to the size of the screen. The video doesn't address this.

Is there a specific option I need to choose when control-dragging to keep the image view scaled? What should I do?

4 Answers 4

134

You need to do 2 things:

  1. Set up your constraints properly
  2. Choose the type of scaling you want.

Setting Up Your Constraints:

  1. Drag out an Image View and place it roughly in the center of your view.
  2. Set your size class to wAny hAny.
  3. Click on the Pin icon |-[]-| at the bottom of the screen.
  4. Turn on all four orange I-beams. Set the four constants to zero.
  5. Uncheck the Constrain to margins checkbox.
  6. Click Add 4 constraints

Add New Constraints

Choosing Your Scaling:

  1. Click on the Image View you added to your View Controller.
  2. In the Attributes Inspector on the right, choose your image.
  3. Set the Mode of the View to Aspect Fill (fill entire screen cropping top/bottom or left/right as necessary) or Aspect Fit (letter box image so that entire image is shown uncropped).

Attributes Inspector


You can view the constraints that have been created for you. In the document outline, you should see 4 constraints under your image view:

Document Outline

Click on a constraint and then view them in the Attributes Inspector on the right. Here are the 4 that I created:

Leading edge constraint

Trailing edge constraint

Top edge constraint

Bottom edge constraint

9
  • 2
    It isn't working. The image is scaled and looks how it should on the storyboard but continues to be slightly to the left and not scaled on the devices. Also, when I delete the image view and try to make a new one, it doesn't even come up on the iPhone. the screen is just white.
    – blue
    Nov 29, 2014 at 5:29
  • Have you changed the settings for size classes? You should leave those on. It should say wAny hAny at the bottom of the screen when you set up the constraints.
    – vacawama
    Nov 29, 2014 at 10:41
  • I did. I just changed them back to wAny and hAny and things are improved but still not working. Is there any way to make separate storyboards for the different devices?
    – blue
    Nov 30, 2014 at 0:30
  • 1
    I found this link about using separate storyboards in Xcode 6: stackoverflow.com/questions/26684476/…
    – vacawama
    Nov 30, 2014 at 1:35
  • You can examine the constraints that have been created for you. Click on them in the document outline and look at their settings in the Attributes Inspector on the right. I can add pictures of my 4 constraints if you'd like.
    – vacawama
    Nov 30, 2014 at 1:38
14

This is what worked for me:

View Mode:
Aspect Fill

As constraints for the image:
Align Center X to: Superview
Equal width to: Superview

The 'Equal width' property is the one that scale the image to the size of the screen.

If you want to have the button in a specific position, set constraints from it to the view, the main ones you want to consider are a top constraint and any left or right constraints. So you are telling the view where you want to position the button in relation to its sides.

Hope this helps.

1
  • 2
    +1 for getting me started, but for my image eventually I went through the reset options under Editor > Resolve Auto layout Issues with the view controller selected.
    – robm
    Sep 19, 2015 at 20:30
0

Not sure I understand "exactly" what you're after but if you want to drag an image view into the controller, and that image view to automatically fill the whole view controller background: just drag the image view component into the view controller window.

Thing is: if you see a blue bounds line around the view controller, before you drag, the image view won't fill the view controller.

You need to click anywhere on the background in the view controller pane, so the blue bounds line disappears, only then, will the image view you're dragging in, fill the whole controller background automatically.

If you find, using previews, your pics are getting squished or stretched, then, just go to the "Resolve Auto Layout Issues" menu, and click "Add missing constraints" - then all should resize to look ok on all screens.

0

In my constraints, I needed to uncheck "relative to margin".

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.