Launch Images
In Orientations III, we introduced the "Supported Device Orientations" setting on the Summary panel for the HelloWorld project. Recall that it helps iOS determine the orientation the app should be launched in. However, it didn't seem all that useful, because once it is running, HelloWorld automatically rotates to whatever position the iPhone is held in.
The brief period while the app is launching is essentially "dead time" for the app. No code is being executed, and by default iOS will display simple black screen. We can use this time to throw up a brief "splash screen" to let the user know HelloWorld is loading. This is also called the Launch Image.*
The "Launch Images" setting for HelloWorld appears on the Summary panel as well:
The iOS Human Interface Guidelines specify the launch image should be a 320 x 480 PNG file. Right-click the empty "Launch Image" and then "Select File" to choose an image for the HelloWorld app. Xcode will save the file as Default.png and place it at the root of your project folder.
Build and run the app in iOS Simulator:
Yay! HelloWorld has a shiny new launch image. Confirm that after a moment the "spash screen" disappears and the app launches as expected. If the image flashes too quickly, you may slow down the launch by selecting Debug > Toggle Slow Animations from the iOS Simulator menu.
Supported Interface Orientations
So what about those "Supported Device Orientations"? Remember the buttons on the Summary panel correspond to the values of the "Supported Interface Orientations" array on the Info panel. Let's try de-selecting "Portrait" on the Summary panel and see what happens. The two "Landscape" values are all that should remain:
In order, these are the values of the array:
Notice the "Portrait" values refer to the Home button on the top or bottom, while the "Landscape" values refer to appearing on the left or the right. It is useful then to speak in terms of these interface orientations:
*Officially, the Launch Image guidelines state that a "splash screen" should be avoided.
**If the "Supported Interface Orientations" array is empty, BHB is the default launch orientation.
Build and run the app in iOS Simulator:
Yay! HelloWorld has a shiny new launch image. Confirm that after a moment the "spash screen" disappears and the app launches as expected. If the image flashes too quickly, you may slow down the launch by selecting Debug > Toggle Slow Animations from the iOS Simulator menu.
Supported Interface Orientations
So what about those "Supported Device Orientations"? Remember the buttons on the Summary panel correspond to the values of the "Supported Interface Orientations" array on the Info panel. Let's try de-selecting "Portrait" on the Summary panel and see what happens. The two "Landscape" values are all that should remain:
In order, these are the values of the array:
- Landscape (left home button)
- Landscape (right home button)
Notice the "Portrait" values refer to the Home button on the top or bottom, while the "Landscape" values refer to appearing on the left or the right. It is useful then to speak in terms of these interface orientations:
- BHB = Bottom home button
- THB = Top home button
- LHB = Left home button
- RHB = Right home button
Build and run the app in iOS Simulator. The virtual iPhone will start in the LHB position:
This makes sense since LHB is the first entry in the "Supported Interface Orientations" array. The Status Bar is in the correct position, but notice the Launch Image did not rotate.
Let's continue. Press the virtual Home button to stop HelloWorld. The virtual phone should rotate to the BHB position automatically. Launch HelloWorld again:
This time the image is upright, but the Status Bar appears on the left. Proceeding with the exploration, press the Home button to stop the app again, and then rotate the iPhone to RHB position. Launch HelloWorld again:
This time the Status Bar is upside-down and the image still hasn't rotated. Finally, repeat the process to launch HelloWorld from the THB position:
The image is upside-down and the Status Bar off to the side. (Remember HelloWorld will correctly auto-rotate after the launch sequence ends.)
A few lessons can be gleaned from this exercise:
- Status Bar only regards first element of the "Supported Interface Orientations" array.**
- If other positions are listed, they are ignored -- even if phone is positioned correspondingly.
- iOS Simulator also uses first element to determine virtual iPhone rotation.
- Launch Image disregards "Supported Interface Orientations".
- Fixed in Portrait (BHB) orientation relative to the Home button.
- Will not auto-rotate to match other positions.
Take our example. Even though RHB is listed as the second "Supported Interface Orientation", the Status Bar always launched in LHB mode, even when held in RHB. And the image remained fixed.
Bearing these in mind, it is easy to see that we only want HelloWorld to launch in the BHB position. Furthermore, we do not need to worry about any of the others. Re-enable "Portrait" on the Summary panel and disable the rest. Build and run the app in iOS Simulator. It will launch with BHB position:
And then to THB and launch again:
Finally around to LHB and launch again:
Yay! HelloWorld now launches correctly in all orientations.
*Officially, the Launch Image guidelines state that a "splash screen" should be avoided.
**If the "Supported Interface Orientations" array is empty, BHB is the default launch orientation.