2

I am migrating from Android to iOS (Swift). In Android UI elements are scaled up or down (height and width using "dp", layout_weight e.t.c) according to device size.

However I find this VERY difficult to achieve with Auto Layout's constraints, I want the elements in my UI to scale according to device size.

For example, in the shared image below, asides the compression of images to fit the screen width, every UI element has the same size, only looks like UI elements have been duplicated with same specs on all screensenter image description here

This might help others in their migration from Android to Swift (I only pinned the width of the 2 ugly ImageViews below)

P.S: This is what I'm trying to replicate guys, this view to fit properly on all screens. Sorry for the blur, I'm not in charge of this project

]

Peter Hornsby
  • 4,208
  • 1
  • 25
  • 44
Okikioluwa
  • 113
  • 9

1 Answers1

1

There's a zen to the AutoLayout. Let me see if I can give you some direction.

You'll want to test every UI on the smallest simulator available (iPhone 4S). This will let you know if you need to adjust your elements' minimum size.

Now for a top-to-bottom review of your UI posted:

  1. "Profile" looks fine
  2. To make the top-left and top-right boxes resize with screen size, you'll want to give a constraint to the superview on left and right sides respectively. Then you'll want to make a horizontal constraint between the two (to maintain a space between them. Then you'll want to set them to equal widths. You can also set aspect ratio constraints for each one.
  3. Your forms look fine. I can give more guidance here if the look you're after doesn't match the image you posted.
  4. For the views below the form, you'll probably want to follow #2 above.

As for the height issue, set a constraint from your bottom view to the superview's bottom. There might be crowding, interface builder might yell. Chances are, you'll need to set the horizontal spacing constraints from = to >=.

olympia
  • 362
  • 2
  • 20
  • 1
    The new thing which I also found remarkable here is the usage of aspect ratio, I also used a technique which I set a constraint equals the SuperView height and used a smaller multiplier to scale. However this does not affect text – Okikioluwa Feb 10 '16 at 15:52
  • @user1576390 note that you can set the size by autolayout and use [this solution](http://stackoverflow.com/questions/4865458/dynamically-changing-font-size-of-uilabel) to resize text (it has to be done by code) – olympia Feb 10 '16 at 15:59