|
|
| (53 intermediate revisions by 2 users not shown) |
| Line 1: |
Line 1: |
| SplashScreens are displayed when your app starts. The way they work depends on the platform you are running on.
| | '''''Starting with AppStudio 8, SpashScreens are created automatically. |
| | | ''''' |
| == Web Apps ==
| |
| | |
| Splash screens only work on iOS. They are not supported on Android. To have them work effectively, you need to supply images for all the supported screen sizes.
| |
| | |
| Here's how to add splash screens:
| |
| | |
| # Add 'splash' to the manifest.
| |
| # Add folder named 'splash' to your project directory.
| |
| # Add a folder named 'ios' to the new 'splash' folder.
| |
| # In the ios folder, put the following files:
| |
| 320X460.png
| |
| 640x920.png
| |
| 640x1096.png
| |
| 748x1024.png
| |
| 768x1004.png
| |
| 1496x2046.png
| |
| 1536x2008.png
| |
| | |
| The resulting file structure will look like this:
| |
| [[File:Splashscreen.png]]
| |
| | |
| == PhoneGap Apps ==
| |
| | |
| The default SplashScreen is set in Project Properties. It is called PhoneGap SplashScreen. The same structure can be used as in Web Apps. Here's how it could look:
| |
| | |
| [[File:Splashscreen1.png]]
| |
| | |
| The Web App images can be in the same folder.
| |
| | |
| === Android ===
| |
| | |
| A similar file structure is needed as for web apps, but the screen sizes are different:
| |
| | |
| Create a folder in your Splash folder called Android. Add the following files:
| |
| | |
| 960x720.png
| |
| 640x480.png
| |
| 470x320.png
| |
| 426x320.png
| |
| | |
| Add the following lines to the PhoneGap configxml property:
| |
| <pre>
| |
| <preference name="splash-screen-duration" value="500" />
| |
| <gap:splash src="{splashscreen}"/>
| |
| <gap:splash src="426x320.png" gap:platform="android" gap:qualifier="ldpi" />
| |
| <gap:splash src="470x320.png" gap:platform="android" gap:qualifier="mdpi" />
| |
| <gap:splash src="640x480.png" gap:platform="android" gap:qualifier="hdpi" />
| |
| <gap:splash src="960x720.png" gap:platform="android" gap:qualifier="xhdpi" />
| |
| </pre>
| |
| | |
| === iOS ===
| |
| A similar file structure is needed as for web apps, but the screen sizes are different. See the file names and sizes as they appear in the configxml property:
| |
| | |
| Assuming you want all sizes, add the following lines to the PhoneGap configxml property:
| |
| <pre>
| |
| <preference name="splash-screen-duration" value="500" />
| |
| <!-- iPhone and iPod touch -->
| |
| <gap:splash src="{splashscreen}"/>
| |
| | |
| <gap:splash src="splash/ios/Default.png" gap:platform="ios" width="320" height="480" />
| |
| <gap:splash src="splash/ios/Default@2x.png" gap:platform="ios" width="640" height="960" />
| |
| | |
| <!-- iPhone 5 / iPod Touch (5th Generation) -->
| |
| <gap:splash src="splash/ios/Default-568h@2x.png" gap:platform="ios" width="640" height="1136" />
| |
| | |
| <!-- iPad -->
| |
| <gap:splash src="splash/ios/Default-Portrait.png" gap:platform="ios" width="768" height="1024" />
| |
| <gap:splash src="splash/ios/Default-Landscape.png" gap:platform="ios" width="1024" height="768" />
| |
| | |
| <!-- Retina iPad -->
| |
| <gap:splash src="splash/ios/Default-Portrait@2x.png" gap:platform="ios" width="1536" height="2048" />
| |
| <gap:splash src="splash/ios/Default-Landscape@2x.png" gap:platform="ios" width="2048" height="1536" />
| |
| </pre>
| |
Starting with AppStudio 8, SpashScreens are created automatically.