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.

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

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

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.

It will be decided by server admin. We are planning to provide a screen (preview of iPhone 5 screen) where admin can adjust and resize any objects. — Hemang, Mar 11 '16 at 18:24
It's clear all things about screen object work base on size :- http://stackoverflow.com/questions/25892207/how-to-specify-size-for-iphone-6-customised-edge-to-edge-image — Mitul Marsoniya, Mar 14 '16 at 12:26
@Hemang So when the screen size is 1080x1920, what is the size of the view? — Vasanth, Mar 14 '16 at 13:49
If you want image resolution size then referring this one :- http://stackoverflow.com/questions/25781422/image-resolution-for-new-iphone-6-and-6-3x-support-added — Mitul Marsoniya, Mar 14 '16 at 13:57
Don't use storyboard design all ui programmatically as I understood you will be making a network request and then getting sizes with story board it will be a mess. changing frames ,constraints outlets etc — Muhammad Zohaib Ehsan, Mar 14 '16 at 17:28
@Vasanth, on server, they will provide me frame based on 1080x1920. My view can be on any size, its dynamic sized so can't say exactly. But you can consider any values in between 1080x1920. — Hemang, Mar 15 '16 at 05:25
@MuhammadZohaibEhsan, that's fine. I don't see any problem with this behavior. But yes, you're right, I'm getting frames after making an API call. — Hemang, Mar 15 '16 at 05:28
@mitulmarsonia, any idea for view? I have updates my question, please do check. — Hemang, Mar 15 '16 at 05:29

score 2 · Answer 1 · answered Mar 15 '16 at 07:22

2

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

answered Mar 15 '16 at 07:22

Mitul Marsoniya

5,272
4
33
57

Thanks for the answer mitul, how to do this in code? I'm just highly curios to make this development inside my app. – Hemang Mar 15 '16 at 07:33
Here just download this demo and try to understand.This demo make base on your height and with base on aspect ratio.:-https://www.sendspace.com/file/09e7yo – Mitul Marsoniya Mar 15 '16 at 07:40
Yes, I'd a network issue. Just downloaded it. Checking now. Ty. – Hemang Mar 15 '16 at 07:48
Is there a way to do it programmatically. – Hemang Mar 15 '16 at 07:52
Yes, you follow this way for programmatically constraint :- http://stackoverflow.com/questions/12826878/creating-layout-constraints-programmatically – Mitul Marsoniya Mar 15 '16 at 07:54

score 1 · Accepted Answer · answered Mar 15 '16 at 10:43

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.

score 0 · Answer 3 · answered Mar 11 '16 at 18:59

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.

How to convert frame based on device screen size?

3 Answers3