Lazy River Software - IOS Template Kit

iOS Tempate Kit V1.0

This stack includes useful scripts for creating and resizing iOS stacks for multiple devices and orientations. This stack is a part of the iOS Kit along with the iOS UINavigationBar Kit.

Here are a few of the possible strategies for deploying to Mobile devices for all of the possible sizes and resolutions available.

1.) The first one uses one Stack with multiple cards, one for each device. The stack is sized to the iPad since that is the largest size. For the iPhone3GS/iPhone Retina/iPod the extra space is 'cut off' as it were and seems to work just fine. Then in the preOpenStack use code to determine which device we are launching on and Go to that card. All shared code can be at the stack level and this way seems pretty fast.

2.) The second uses one Main Stack with multiple subStacks, one for each device. This way each subStack can be sized to the right device size. Then in the preOpenStack use code to determine which device we are launching on and Go to that subStack. The shared code is harder to deal with (library) since each device has its own stack code and then the main stack also has its stack code as well. But this way is cleaner and if you start with the iPad and get everything organized and coded then it is easier to duplicate the stack and resize it and change the layout for each other device.

3.) Use one stack with one card for all devices and orientations. This one is the hardest to both code for and layout. But in the end it is only one card and one stack so it is very clean.

Now, with both of the first two approaches there are three alternate ways to handle device rotation-orientation.
A.) The first is by having both orientations available on the same card and via code moving/rearranging the controls to that particular orientation. Having both on the same card requires a lot more coding to handle the layout/rearranging but requires less coding when making changes to the projects functionality - you just have to change the functionality code for controls just once for either orientation. Ê

B.) The same as (A) above except but we layout controls so that they can are available for both orientations at the same time. This is easier to show than describe. But if the card is large enough to encompass both orientations then when the device rotates from Vertical to Horizontal the bottom is cut off and the area to the right of the Vertical space is now visible during the Horizontal View and when rotating from Horizontal to Vertical the the right side is cut off and the bottom is now visible. This requires duplicating the controls that are cut off on the right so they are also available on the bottom part so that both are always available regardless of orientation but one or the other is not seen. ( I have a very successful app done in xCode this way and this is actually the easiest way of the three to handle orientation if your layout allows for this. i.e. No pictures or fields will be cut off at the bottom or side.)

C.) Or lastly by having two cards per orientation per device (for either (1) single stacks or (2) multiple substacks - above) where the first card is the vertical orientation and the second card is the horizontal orientation. Using two cards, one for each orientation, for each device allows for laying out both orientations ahead of time (good for fine tuning the UI) and requires much less coding to handle the layout but it does require a lot more code when making a change to the functionality - unless all of the code is handled at the stack level and with behaviors (which is preferable anyway). Then when orientation changes just switch cards to that orientation. This requires the most amount of cards etc. but for visual displaying of controls is the best way.

For the stack One Orientation per Card sizes use:
iPod Ê320 x 480 & 480 x 320 Ê-- No Status Bar
iPod Ê320 x 460 & 480 x 300 Ê-- Status Bar showing
iPhone3GS Ê320 x 480 & 480 x 320 Ê-- No Status Bar
iPhone3GS Ê320 x 460 & 480 x 300 Ê-- Status Bar showing
iPhoneRetina Ê640 x 960 & 960 x 640 Ê-- No Status Bar
iPhoneRetina Ê640 x 920 & 960 x 600 Ê-- Status Bar showing
iPad Ê768 x 1024 & 1024 x 768 Ê-- No Status Bar
iPad Ê768 x 1004 & 1024 x 748 Ê-- Status Bar showing

For the stack Two Orientations per Card sizes use:
iPod Ê480 x 480 -- Has room at bottom and side for when Status Bar is hidden
iPhone3GS Ê480 x 480 -- Has room at bottom and side for when Status Bar is hidden
iPhoneRetina Ê960 x 960 -- Has room at bottom and side for when Status Bar is hidden
iPad Ê1024 x 1024 -- Has room at bottom and side for when Status Bar is hidden