How to convert frame based on device screen size?

Question

I'm working on a dynamic app in which I'm getting CGRect separately (x, y, width, height) values from a web service for each of the UI objects inside a view.

On server, they will set frames based on following size (1080 x 1920), so lets say, if I'll get a CGRect with following values: (200, 20, 100, 100) then it should be fit into device based on device size and server specified size.

1. So with case of iPhone 5 - new frame will be same 200, 20, 100, 100.

2. So with case of iPhone 6 (375 x 667) - new frame will be ?

3. So with case of iPhone 6+ (414 x 736) - new frame will be ?

The main thing is that, whatever the frame will be received into the app for a particular UI object, it should be looks exactly as in admin panel specially for margins.

For a note,

I'm setting UI with AutoLayout in Storyboard only.

Any suggestion?

This is an example:

Example 1:

|  _________________  |
| |                 | |
| |                 | |
| |                 | |
| |                 | |
| |_________________| |
|                     |

Example 2:

|          _________  |
|         |         | |
|         |         | |
|         |         | |
|         |         | |
|         |_________| |
|                     |

By above examples, I'm trying to explain that, by whatsoever frame will be coming from server, if this looks like above on server, the similar would be on device, but it should be based on device CGRect .

Answer 1

Frame change base on the screen size and ratio iPhone 4s,5,6,6+.

Here you need to change frame size by screen so here you have "frames based on following size (1080 x 1920)" it means you have iPhone 6+ frame now see that bellow attached image set base on aspect ratio.

1). iPhone 5 frame (200,20,100,100)
2). iPhone 6 frame (200,20,155,155)
3). iPhone 6+ frame (200,20,194,194)

Screen ration with screen resolution. I get From This Website.

imgur .com/7zi1q.png

Answer 2

You can use these two methods to get server and device specific CGRect .

- (CGFloat) convertServerXorWidthValueToDeviceValueXorWidth:(CGFloat)sValue {
    CGFloat currentWidth = [UIScreen mainScreen].bounds.size.width;
    CGFloat value = ceilf((currentWidth * sValue) / 1080);
    return value;
}

- (CGFloat) convertServerYorHeightValueToDeviceValueYorHeight:(CGFloat)sValue {
    CGFloat currentHeight = [UIScreen mainScreen].bounds.size.height;
    CGFloat value = ceilf((currentHeight * sValue) / 1920);
    return value;
}

Hope this will help you.

Answer 3

I would say the frame for iPhone 6 is (234, 23, 117, 117) and iPhone 6 Plus is (258, 25, 129, 129).

How I calculated? New width = (old width * new device width) / old device width

(100 * 375) / 320 = 117

same thing for other values

If using auto layouts you have to update the constraints once you receive the new values.