Dimensioni dello schermo di avvio per Android
e allo stesso tempo per Cordova (aka Phonegap), React-Native e tutte le altre piattaforme di sviluppo
Format : 9-Patch PNG (recommended)
Dimensions
- LDPI:
- Portrait: 200x320px
- Landscape: 320x200px
- MDPI:
- Portrait: 320x480px
- Landscape: 480x320px
- HDPI:
- Portrait: 480x800px
- Landscape: 800x480px
- XHDPI:
- Portrait: 720px1280px
- Landscape: 1280x720px
- XXHDPI
- Portrait: 960x1600px
- Landscape: 1600x960px
- XXXHDPI
- Portrait: 1280x1920px
- Landscape: 1920x1280px
Nota: la preparazione di XXXHDPI non è necessaria e forse anche la dimensione XXHDPI a causa delle aree ripetute delle immagini a 9 patch. D'altra parte, se vengono utilizzate solo le dimensioni Verticali, le dimensioni dell'app potrebbero essere inferiori. Più immagini significano che è necessario più spazio.
Fai attenzione
Penso che non ci sia una dimensione esatta per tutti i dispositivi. Io uso Xperia Z 5" . Se si sviluppa un'applicazione multipiattaforma-WebView si dovrebbe considerare un sacco di cose (se schermo ha pulsanti di navigazione softkey o no, ecc.) Pertanto, penso che ci sia solo una soluzione adeguata. La soluzione è a preparare una schermata iniziale di 9 patch (trova l' How to design a new splash screenintestazione sotto)
- Crea schermate iniziali per le dimensioni dello schermo sopra come 9 patch . Dai nomi ai tuoi file con suffissi .9.png
- Aggiungi le righe seguenti nel tuo file config.xml
- Aggiungi il plug-in della schermata iniziale, se necessario.
- Esegui il tuo progetto.
Questo è tutto!
Codice specifico di Cordova
Da aggiungere righe nel config.xml per schermate iniziali a 9 patch
<preference name="SplashScreen" value="screen" />
<preference name="SplashScreenDelay" value="6000" />
<platform name="android">
<splash src="res/screen/android/ldpi.9.png" density="ldpi"/>
<splash src="res/screen/android/mdpi.9.png" density="mdpi"/>
<splash src="res/screen/android/hdpi.9.png" density="hdpi"/>
<splash src="res/screen/android/xhdpi.9.png" density="xhdpi"/>
</platform>
Da aggiungere righe nel file config.xml quando si utilizzano schermate iniziali non -9 patch
<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-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"/>
</platform>
Come progettare una nuova schermata iniziale
Descriverei un modo semplice per creare una schermata iniziale adeguata usando questo modo. Supponiamo che stiamo progettando uno schermo 1280dp x 720dp - xhdpi (x-large). Ho scritto a scopo di esempio quanto segue;
In Photoshop: File -> Nuovo in una nuova finestra di dialogo imposta i tuoi schermi
Larghezza: 720 pixel Altezza: 1280 pixel
Immagino che le dimensioni di cui sopra indicano che la risoluzione è di 320 pixel / pollice. Ma per assicurarti di poter modificare il valore di risoluzione su 320 nella finestra di dialogo. In questo caso Pixel / pollice = DPI
Congratulazioni ... Hai un modello di schermata iniziale 720dp x 1280dp.
Come generare una schermata iniziale di 9 patch
Dopo aver progettato la schermata iniziale, se si desidera progettare la schermata iniziale 9-Patch, è necessario inserire uno spazio di 1 pixel per ogni lato. Per questo motivo dovresti aumentare di +2 pixel la larghezza e l'altezza delle dimensioni della tua tela (ora le dimensioni delle tue immagini sono 722 x 1282).
Ho lasciato lo spazio vuoto di 1 pixel su ogni lato come indicato di seguito.
Modifica delle dimensioni della tela utilizzando Photoshop:
- Apri un file png della schermata iniziale in Photoshop
- Fai clic sull'icona del lucchetto accanto al nome "Sfondo" nel campo Livelli (per lasciare vuoto invece di un altro colore come il bianco) se c'è come il sotto: - Cambia le dimensioni della tela dal menu Immagine (Larghezza: da 720 pixel a 722 pixel e Altezza: da 1280 pixel a 1282 pixel). Ora, dovrebbe vedere uno spazio di 1 pixel su ogni lato dell'immagine della schermata iniziale.
Quindi puoi usare C: \ Program Files (x86) \ Android \ android-studio \ sdk \ tools \ draw9patch.bat per convertire un file di 9 patch. Per questo apri la tua schermata iniziale sull'app draw9patch. Dovresti definire il tuo logo e le aree espandibili. Notare la linea nera nella seguente schermata iniziale di esempio. Lo spessore della linea nera è di appena 1 px;) Le linee nere sui lati sinistro e superiore definiscono l'area di visualizzazione obbligatoria della schermata iniziale. Esattamente come il tuo progetto. Le linee destra e inferiore definiscono l'area aggiungibile e rimovibile (aree che si ripetono automaticamente).
Fallo e basta: ingrandisci il bordo superiore dell'immagine sull'applicazione draw9patch. Fare clic e trascinare il mouse per tracciare una linea. E premi MAIUSC + clic e trascina il mouse per cancellare la linea.
Se sviluppi un'app multipiattaforma (come Cordova / PhoneGap) puoi trovare al seguente indirizzo quasi tutte le dimensioni dello splash screen del sistema operativo mabile. Fare clic per le dimensioni della schermata iniziale di Windows Phone , WebOS , BlackBerry , Bada-WAC e Bada .
https://github.com/phonegap/phonegap/wiki/App-Splash-Screen-Sizes
E se hai bisogno delle dimensioni delle icone delle app IOS, Android ecc. Puoi visitare qui .
IOS
Format : PNG (recommended)
Dimensions
- Tablet (iPad)
- Non-Retina (1x)
- Portrait: 768x1024px
- Landscape: 1024x768px
- Retina (2x)
- Portrait: 1536x2048px
- Landscape: 2048x1536px
- Handheld (iPhone, iPod)
- Non-Retina (1x)
- Portrait: 320x480px
- Landscape: 480x320px
- Retina (2x)
- Portrait: 640x960px
- Landscape: 960x640px
- iPhone 5 Retina (2x)
- Portrait: 640x1136px
- Landscape: 1136x640px
- iPhone 6 (2x)
- Portrait: 750x1334px
- Landscape: 1334x750px
- iPhone 6 Plus (3x)
- Portrait: 1242x2208px
- Landscape: 2208x1242px