iOS Question Scaling Photographic Assets For Different Screens

[RichardN]

Maybe somebody could give me a reality check on this as my head is starting to hurt!

There are now 4 'Families' of iOS screen aspect ratios:

iPhone 4/4x at 1:1.5
All the iPads at 1:1.333
iPhone X at 1:2.165
The rest at 1:1.777 (16:9)

I am creating portrait & landscape .jpg assets for each family to fill the full screen width and remaining height below the Navigation Bar. In all devices the Navigation bar is a constant 48 logical points high.

So... in the case of the iPhone X in portrait orientation:

Screen pixels are 1125 wide x 2436 high. Rendered at 3x gives...
a logical resolution (points) of 375 x 812
Deducting 48pts from the height for Navigation Bar = 375 x (812-48) = 375 x 764 points.
Convert back to pixels (x3) = 1125 x 2292 pixels size for the jpg asset.

Of course only one portrait/landscape asset for each 'Family' sized at the largest member of that family then scaled using ImageView MODE_FILL.

Did I get that right ?

 

[Erel]

In all devices the Navigation bar is a constant 48 logical points high.

Not in landscape. It depends on the device size.

Why not use an ImageView with MODE_FIT? This way the image will not be distorted and it will almost fill the screen.

 

[RichardN]

Yes I should have used MODE_FIT, however....

The iPad screens are all 4/3 aspect ratio. For a portrait photo to fill the screen perfectly beneath the Navigation Bar (based on the largest iPad Pro) it should be a size of:

1034 x (1366 - 48) pts = 1034 x 1318 pts.

Upscale to pixels (x2) = 2068 x 2636 image

Load this image into a ImageView scaled to 0-100%x and 0-100%y and you get white bands on the left & right sides suggesting the aspect ratio is incorrect. Of course you can get rid of it by using MODE_FILL but you introduce distortion to the image.

......................

The Nav-Bar height also seems to vary in portrait mode. If I Log the 100% x 100% ImageView dimensions in Page_Resize the system reports 1024x704 pts in landscape and 768x960 pts in portrait agreeing with the device full screen size of 1024x768 pts (iPad Pro 9.5"). However, in portrait orientation the dimensions do not infer a Navigation Bar size of 48px but....

1024-960 = 64 pts

How can this be? How can the correct aspect ratio of an image be determined when the Nav-Bar height appears to vary even in portrait orientation?

 

[Erel]

I've ran this code on the iPad Pro (9.7 inch) simulator:

Private Sub Page1_Resize(Width As Int, Height As Int)
   Log(GetDeviceLayoutValues)
   Log(Width)
   Log(Height)
End Sub

The page size is 768 * 960

 

[RichardN]

I get precisely the same values on the hardware device.

This information, whilst useful, does not get me any closer to determining a common graphic aspect ratio to perfectly fit in the client area beneath the Navigation bar... because the height of the Navigation Bar differs with different devices within each aspect ratio family.

I believe you are saying (in a roundabout way) that it cant be done?

.....................

Workaround: If you work backwards from the values obtained from Log(Width) & Log(Height) to determine the graphic aspect ratio and make the longest side of the graphic the same as the longest side on the largest iPad then it fills the area exactly using MODE_FIT.

Will it do the same on other devices of the same screen aspect ratio? I don't know because I can only test with the iPad Pro 9.7"

 

[Erel]

I'm not saying that it is not possible, just that there are many different screen sizes and aspect ratios and I don't think that it is a good idea to try to exactly match all of them.

MODE_FIT works in the same way that LoadBitmapResize with KeepAspectRatio = True works. It sets the image size to the maximum possible size while keeping the aspect ratio.

https://www.b4x.com/android/forum/threads/82693/#content