|
|
| (47 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
| |
| New for iPhone 6 and 6 Plus:
| |
| 1242x2148.png
| |
| 2208x1182.png
| |
| 750x1284.png
| |
| | |
| The resulting file structure will look something 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="SplashScreenDelay" value="500" />
| |
| <gap:splash src="{splashscreen}"/>
| |
| <gap:splash src="splash/android/426x320.png" gap:platform="android" gap:qualifier="ldpi" />
| |
| <gap:splash src="splash/android/470x320.png" gap:platform="android" gap:qualifier="mdpi" />
| |
| <gap:splash src="splash/android/640x480.png" gap:platform="android" gap:qualifier="hdpi" />
| |
| <gap:splash src="splash/android/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. Create files of your own with the same names and sizes.
| |
| | |
| Assuming you want all sizes, add the following lines to the PhoneGap configxml property:
| |
| <pre>
| |
| <preference name="SplashScreenDelay" 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>
| |