Window Size

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:

Figure 8. Landscape view of an iOS-based screen

Landscape view of an iOS-based screen

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 Size Calculator in the Appeon Developer toolbar 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:

Figure 9. Portrait view of an iOS-based screen

Portrait view of an iOS-based screen

From the above graph, the available screen space for an application window in Portrait orientation is 766 * 965 (points). When using the Size Calculator 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.

Table 2. Window size on iPad, iPhone & iPod touch

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.

Auto-fit to Screen

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.