doc(android): various improvements including size specs (#280)

* Add size specs for Android Splash Screens
* doc(android): add splashscreen details

Co-authored-by: Mosab A <47486787+mosabab@users.noreply.github.com>
This commit is contained in:
エリス 2020-06-30 22:46:35 +09:00 committed by GitHub
parent 050f29cfca
commit 2ee4ff97ff
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -34,6 +34,11 @@ This plugin displays and hides a splash screen while your web application is lau
- [Supported Platforms](#supported-platforms) - [Supported Platforms](#supported-platforms)
- [Platform Splash Screen Image Configuration](#platform-splash-screen-image-configuration) - [Platform Splash Screen Image Configuration](#platform-splash-screen-image-configuration)
- [Example Configuration](#example-configuration) - [Example Configuration](#example-configuration)
- [Android-specific Information](#android-specific-information)
- [Image Layout](#image-layout)
- [`density`](#density)
- [Image Sizing Table](#image-sizing-table)
- [Example Android Configuration](#example-android-configuration)
- [iOS-specific Information](#ios-specific-information) - [iOS-specific Information](#ios-specific-information)
- [Launch Storyboard Images](#launch-storyboard-images) - [Launch Storyboard Images](#launch-storyboard-images)
- [Designing Launch Storyboard Images](#designing-launch-storyboard-images) - [Designing Launch Storyboard Images](#designing-launch-storyboard-images)
@ -100,7 +105,6 @@ projectRoot
```xml ```xml
<platform name="android"> <platform name="android">
<!-- you can use any density that exists in the Android project -->
<splash src="res/screen/android/splash-land-hdpi.png" density="land-hdpi" /> <splash src="res/screen/android/splash-land-hdpi.png" density="land-hdpi" />
<splash src="res/screen/android/splash-land-ldpi.png" density="land-ldpi" /> <splash src="res/screen/android/splash-land-ldpi.png" density="land-ldpi" />
<splash src="res/screen/android/splash-land-mdpi.png" density="land-mdpi" /> <splash src="res/screen/android/splash-land-mdpi.png" density="land-mdpi" />
@ -126,7 +130,6 @@ projectRoot
<splash src="res/screen/ios/Default@3x~universal~anyany.png" /> <splash src="res/screen/ios/Default@3x~universal~anyany.png" />
<splash src="res/screen/ios/Default@3x~universal~anycom.png" /> <splash src="res/screen/ios/Default@3x~universal~anycom.png" />
<splash src="res/screen/ios/Default@3x~universal~comany.png" /> <splash src="res/screen/ios/Default@3x~universal~comany.png" />
</platform> </platform>
<!-- Configuration using MRT concept (Recommended, see "Windows-specific information" section for details): --> <!-- Configuration using MRT concept (Recommended, see "Windows-specific information" section for details): -->
@ -144,6 +147,56 @@ projectRoot
<preference name="SplashScreenDelay" value="10000" /> <preference name="SplashScreenDelay" value="10000" />
``` ```
### Android-specific Information
To effectively create your Android SplashScreen assets, it is important to understand the idiom and sizes used for the assets.
Android defined its assets by the image's layout and `density`.
#### Image Layout
- `land` short for landscape mode
- `port` short for portrait mode
#### `density`
The image's density refers to the number of pixels per square inch. Android, interchangeably refers to this as DPI.
Not all devices have the same pixel size so it is important to create images for all DPI to ensure that the quality of the image for each device is great.
If not all DPI images are considered, some devices might not show a SplashScreen or will use an incorrect DPI image that can result in a blurry scaled image.
#### Image Sizing Table
| size | portrait | landscape |
| :-----: | :-------: | :-------: |
| ldpi | 200x320 | 320x200 |
| mdpi | 320x480 | 480x320 |
| hdpi | 480x800 | 800x480 |
| xhdpi | 720x1280 | 1280x720 |
| xxhdpi | 960x1600 | 1600x960 |
| xxxhdpi | 1280x1920 | 1920x1280 |
#### Example Android Configuration
```xml
<platform name="android">
<splash src="res/screen/android/splash-land-hdpi.png" density="land-hdpi" />
<splash src="res/screen/android/splash-land-ldpi.png" density="land-ldpi" />
<splash src="res/screen/android/splash-land-mdpi.png" density="land-mdpi" />
<splash src="res/screen/android/splash-land-xhdpi.png" density="land-xhdpi" />
<splash src="res/screen/android/splash-land-xxhdpi.png" density="land-xxhdpi" />
<splash src="res/screen/android/splash-land-xxxhdpi.png" density="land-xxxhdpi" />
<splash src="res/screen/android/splash-port-hdpi.png" density="port-hdpi" />
<splash src="res/screen/android/splash-port-ldpi.png" density="port-ldpi" />
<splash src="res/screen/android/splash-port-mdpi.png" density="port-mdpi" />
<splash src="res/screen/android/splash-port-xhdpi.png" density="port-xhdpi" />
<splash src="res/screen/android/splash-port-xxhdpi.png" density="port-xxhdpi" />
<splash src="res/screen/android/splash-port-xxxhdpi.png" density="port-xxxhdpi" />
</platform>
```
### iOS-specific Information ### iOS-specific Information
Launch storyboard images are sized based on scale, idiom, and size classes. It supports all devices, and can be used with split-screen/slide-over multitasking. Launch storyboard images are sized based on scale, idiom, and size classes. It supports all devices, and can be used with split-screen/slide-over multitasking.