Let's now have a close look at the layout of an iOS-based device screen (taking iPad 2 as example). It will help us calculate the available screen space for the application window.
In Landscape orientation:
From the above graph, we understand that window size is not equal to the screen size. The application cannot use the entire screen space, because iOS adds a status bar (20 points in height) and Appeon Workspace adds a title bar (38 points in height), a top border (1 point in height), a left border (1 point in width), and a right border (1 point in width) around the application. Therefore, in Landscape orientation, the space available for the application on iPad 2 is 1022 * 709 (points).
Now let's use the formula to convert it to PBUs, which is 4672 * 2836 (PBUs). This means, if you set the window size to 4672 * 2836 PBUs and then set the window state to Maximized, the window will exactly fill up the available screen space in landscape orientation on iPad 2.
In Portrait orientation:
From the above graph, the available screen space for an application window in Portrait orientation is 766 * 965 (points). When using the formula to convert it to PBUs, we get 3502 * 3860 PBUs.
Now that we understand the available screen space for application window, we can calculate the window size for the other iOS-based devices. The following table lists the window size (in full screen view) on iPad, iPhone, & iPod touch, measured in both PBUs and Points.
|
Device |
Width to deduct |
Height to deduct |
Landscape |
Portrait |
||||||
|---|---|---|---|---|---|---|---|---|---|---|
|
Width (pt) |
Height (pt) |
Width (PBU) |
Height (PBU) |
Width (pt) |
Height (pt) |
Width (PBU) |
Height (PBU) |
|||
|
iPad 2 |
-(1+1) |
-(20+38+1) |
1022 |
709 |
4672 |
2836 |
766 |
965 |
3502 |
3860 |
|
iPad 3 or 4 |
-(1+1) |
-(20+38+1) |
1022 |
709 |
4672 |
2836 |
766 |
965 |
3502 |
3860 |
|
iPad mini |
-(1+1) |
-(20+38+1) |
1022 |
709 |
4672 |
2836 |
766 |
965 |
3502 |
3860 |
|
iPhone 4 or 4S |
-(1+1) |
-(20+38+1) |
478 |
261 |
2185 |
1044 |
318 |
421 |
1454 |
1684 |
|
iPhone 5 |
-(1+1) |
-(20+38+1) |
566 |
261 |
2587 |
1044 |
318 |
509 |
1454 |
2036 |
|
iPod touch 4 |
-(1+1) |
-(20+38+1) |
478 |
261 |
2185 |
1044 |
318 |
421 |
1454 |
1684 |
|
iPod touch 5 |
-(1+1) |
-(20+38+1) |
566 |
261 |
2587 |
1044 |
318 |
509 |
1454 |
2036 |
Notes:
-
Width to deduct: - (Left Border + Right Border)
-
Height to deduct: - (iOS Status Bar + Title Bar + Top Border [+ MicroHelp Status Bar])
MicroHelp Status Bar exists in the MDI frame only when the window type is set to MDIHelp. The height of MicroHelp Status Bar is 20 points.
-
By setting the window to the above width and height and setting the window state to Maximized in the PB IDE, the window will exactly fill up the available screen space on the target device at runtime. By setting the window state to Maximized, the window title bar will merge into the Appeon Workspace title bar at runtime, otherwise it will display under the Appeon Workspace title bar, in such case you will need to deduct both the Appeon Workspace title bar (38 points) and the window title bar (38 points) in the height direction when calculating the window size.
Except for setting the window size to fixed values which will exactly fill up the screen space, you can also take advantages of the UI resizing tools to enable the window to automatically fit with the screen. These UI resizing tools are described in Mobile UI Design.
