Use auto layout to develop UI for iphone4s through iPhone6s plus

Question

I am developing an app that should be compatible with all iphone devices starting from iphone4s through iphone6s plus (and iOS8 onwards). I am a newbie and started developing the UI based on few designs from the designers.

1) When I am developing the screens, I am using wAny and hAny in size classes and " Inferred " from " Simulated Metrics " - is this correct ?

2) In a screen, I have 4 images one beneath the other and I added constraints to each image (imageView) to maintain consistency of spacing for each device.

a. Doing so, the 4th image on the bottom is not visible at all on iphone4s simulator as it is 3.5". and the 3rd image is cropped at its bottom.

b. When I simulate the same in iphone 6s plus, there is a lot of blank space on the bottom of the screen.

How do I adjust the images to look undistorted but auto-resize with respect to the device I am rendering in?

What I tried:-

1. Used constraints for top, left, right and bottom for each image.
2. Used Aspect Fit for each image. (read somewhere that this can auto-resize images) - this approach did not work
3. Used Equal Widths to SuperView and assigned the Multiplier as 0.5. - This failed as well

Is there any responsive UI framework that I can use, like Bootstrap for Web?

Answer 1

Even though this is best handled by a UIStackView (iOS 9 and up) and possibly even a UITableView, it's also pretty easy to implement with just constraints. Here's one way I did it:

1. Set proportionate height constraints on each of the 4 views to the superview, with a multiple of 0.2

2. Set "Centered horizontally" relative to superview constraints on each of the 4 views

3. Set an aspect ratio on each of the 4 views (I used a ratio of 1.6 : 1)

4. Now, set proportional constraints between the bottom of each view and the bottom of the superview (not superview margin). Because the view heights together add up to 0.8 of the superview height, the spacing between them should add up to 0.2 of the superview height.

   Because there are a total of five spaces (one to top, one to bottom and three in between the four views), each space should be 0.04 of the superview height (0.2 / 5 = 0.04). So the top view's bottom should be its height, plus one spacing relative to the superview, or 0.24 of the superview's bottom edge. The second view's bottom should add another space and its own height, which is 0.48 of the superview's bottom edge, etc. etc.

So the bottom edge to bottom-edge of the superview constraints for each view from top to bottom should have the following multiples: 0.24, 0.48. 0.72, 0.96.

This gives you equal heights and equal spacing, plus a consistent aspect ratio, all of which adjust to various screen sizes. Below is a screenshot of the preview of this layout in all three phone sizes you are targeting:

Lastly, here is a link to the project I created for this solution, so you can see the constraints in more detail:

http://d.pr/f/17Ae7

Answer 2

The easiest way to do this is using UIStackView. You can create a vertical stack views with a certain minimum spacing in the storyboard and then add all four views you want to show. You only have to set constraints on the stack view itself. All the internal constraints will be correctly created or modified responsively by the stack view.

This is a good introduction:

https://developer.apple.com/videos/play/wwdc2015/218/

Answer 3

All you'll need to do is give the first UIImageView a fixed width and height (Equal width to equal height if its a square) try aspect ratio, then second relative to the first and the third relative to the forth and so on.