CODEWITHSUNDEEP
iosxcodeautolayout
T. Kearsley
T. Kearsley

Reputation: 307

Xcode 8.1 Auto Layout

Hi there I am currently trying to get the following Scene to scale correctly for any scene. iPhone 7 View

This is currently how it looks on a iPhone 7 Plus:

iPhone 7 Plus

I managed to get it to scale the blue background correctly by adding the following constraints: Background Constraints

However, I don't know how to get the UIImageView, UITextField and UI Label to scale in the same way. I Want them to keep the same proportions as they have now on the iPhone 7 view. I have looked for youtube tutorials but none seem to show how to introduce a way to have these items scale as I want them to.

Any help is much appreciated, Thanks.

Upvotes: 0

Views: 143

Answers (1)

Schomes
Schomes

Reputation: 156

You can add constraints between UIImageViews, Labels, the window, etc. by holding control and clicking-and-dragging between two elements. For example,

UIImageView: add these constraints:

  • Vertical Spacing to Layout Guide (This constrains the top of the image to the top of the window)
  • Leading Space to Container Margin (Left side of image stays 'connected' to the left side of the window)
  • Trailing Space to Container Margin (Right side of image stays 'connected' to the right side of the window)
  • Vertical Spacing (vertical spacing between the image and the Label)

You can use this same idea to constrain the Label and Text Field to the left side of the window and to keep the vertical spacing between the UIImageView, Label, and Text Field consistent on all devices.

Upvotes: 1

Related Questions