risposta-alla-domanda-sullo-sviluppo-web-bd.com

Dimensioni Dell'immagine dello splash screen Android per adattarsi a tutti i dispositivi

Ho un PNG a schermo intero che voglio visualizzare su splash. C'è solo un errore lì, e non ho idea di quale dimensione mettere in ogni cartella drawable (ldpi, mdpi, hdpi e xhdpi). La mia applicazione dovrebbe funzionare bene e bella su tutti i telefoni e tablet. Quali dimensioni (in pixel) dovrei creare in modo che splash visualizzi Nice su tutte le schermate?

204
arielschon12

Disconoscimento

Questa risposta è del 2013 ed è seriamente obsoleta. A partire da Android 3.2 ci sono ora 6 gruppi di densità dello schermo. Questa risposta verrà aggiornata non appena possibile, ma senza ETA. Fare riferimento alla documentazione ufficiale per tutte le densità al momento (sebbene le informazioni su dimensioni di pixel specifiche siano sempre difficili da trovare).

Ecco la versione tl/dr

  • Crea 4 immagini, una per densità dello schermo:

    • xlarge (xhdpi): 640x960
    • grande (hdpi): 480x800
    • medio (mdpi): 320x480
    • small (ldpi): 240x320
  • Leggi introduzione di 9 patch nella Guida per gli sviluppatori Android

  • Progettare immagini con aree che possono essere allungate in sicurezza senza compromettere il risultato finale

Con questo, Android selezionerà il file appropriato per la densità dell'immagine del dispositivo, quindi estenderà l'immagine secondo lo standard di 9 patch.

fine di tl; dr. Post completo avanti

Rispondo all'aspetto relativo alla progettazione della domanda. Non sono uno sviluppatore, quindi non sarò in grado di fornire codice per implementare molte delle soluzioni fornite. Ahimè, il mio intento è di aiutare i designer che sono così smarriti come me quando ho contribuito a sviluppare la mia prima app per Android.

Adatto a tutte le taglie

Con Android, le aziende possono sviluppare telefoni cellulari e tavoli di qualsiasi dimensione, con quasi tutte le risoluzioni che desiderano. Per questo motivo, non esiste una "dimensione dell'immagine giusta" per una schermata iniziale, poiché non ci sono risoluzioni fisse dello schermo. Questo pone un problema per le persone che vogliono implementare una schermata iniziale.

I tuoi utenti vogliono davvero vedere una schermata iniziale?

(A proposito, gli splash screen sono un po 'scoraggiati tra i tipi di usabilità: si sostiene che l'utente già sappia quale app ha sfruttato e il branding dell'immagine con uno splash screen non è necessario, in quanto interrompe solo l'esperienza dell'utente con un "annuncio". Dovrebbe essere usato, tuttavia, in applicazioni che richiedono un carico considerevole quando inizializzato (5s +), inclusi giochi e simili, in modo che l'utente non si blocchi chiedendosi se l'app si arresta o meno)

Densità dello schermo; 4 classi

Pertanto, date così tante diverse risoluzioni dello schermo nei telefoni sul mercato, Google ha implementato alcune soluzioni alternative e ingegnose che possono essere d'aiuto. La prima cosa che devi sapere è che Android separa TUTTI GLI SCHERMI in 4 diverse densità dello schermo:

  1. Bassa densità (ldpi ~ 120 dpi)
  2. Media densità (mdpi ~ 160 dpi)
  3. Alta densità (hdpi ~ 240 dpi)
  4. Extra-High Density (xhdpi ~ 320dpi) (Questi valori di dpi sono approssimazioni, poiché i dispositivi personalizzati avranno valori di dpi variabili)

Quello che tu (se sei un designer) devi sapere da questo è che Android sceglie fondamentalmente da 4 immagini da visualizzare, a seconda del dispositivo. Quindi, in pratica, devi progettare 4 immagini diverse (anche se più possono essere sviluppate per diversi formati come widescreen, verticale/orizzontale, ecc.).

Con questo in mente, sappi questo: a meno che non si progetta uno schermo per ogni singola risoluzione utilizzata in Android, l'immagine si allungherà per adattarsi alle dimensioni dello schermo. E a meno che l'immagine non sia fondamentalmente una sfumatura o una sfocatura, otterrai una distorsione indesiderata con lo stretching. Quindi hai fondamentalmente due opzioni: crea un'immagine per ciascuna combinazione di dimensioni/densità dello schermo o crea quattro immagini a 9 patch.

La soluzione più difficile è progettare una schermata iniziale diversa per ogni singola risoluzione. Puoi iniziare seguendo le risoluzioni nella tabella alla fine di questa pagina (ce ne sono di più. Esempio: 960 x 720 non è elencato lì). E supponendo che tu abbia alcuni piccoli dettagli nell'immagine, come un testo piccolo, devi progettare più di uno schermo per ogni risoluzione. Ad esempio, un'immagine 480x800 visualizzata in uno schermo medio potrebbe sembrare ok, ma su uno schermo più piccolo (con densità/dpi più elevati) il logo potrebbe diventare troppo piccolo, o potrebbe risultare illeggibile un testo.

Immagine a 9 patch

L'altra soluzione è creare un'immagine con 9 patch . È fondamentalmente un bordo trasparente di 1 pixel attorno all'immagine e, disegnando pixel neri nell'area superiore e sinistra di questo bordo, è possibile definire quali parti dell'immagine potranno allungare. Non entrerò nei dettagli di come funzionano le immagini con 9 patch ma, in breve, i pixel che si allineano ai contrassegni nell'area superiore e sinistra sono i pixel che verranno ripetuti per allungare l'immagine.

Alcune regole di base

  1. È possibile creare queste immagini in Photoshop (o qualsiasi software di modifica delle immagini che possa creare accuratamente png trasparenti).
  2. Il bordo di 1 pixel deve essere FULL TRANSPARENT.
  3. Il bordo trasparente a 1 pixel deve essere tutto intorno all'immagine, non solo in alto ea sinistra.
  4. puoi disegnare solo pixel neri (# 000000) in quest'area.
  5. I bordi superiore e sinistro (che definiscono l'allungamento dell'immagine) possono avere solo un punto (1px x 1px), due punti (entrambi 1px x 1px) o UNA linea continua (larghezza x 1px o 1px x altezza).
  6. Se si sceglie di utilizzare 2 punti, l'immagine verrà espansa proporzionalmente (quindi ogni punto eseguirà l'espansione a turno fino a raggiungere la larghezza/altezza finale)
  7. Il bordo 1px deve essere in aggiunta alle dimensioni del file di base previste. Quindi un'immagine 100x100 a 9 patch deve avere 102x102 (100x100 + 1px in alto, in basso, a sinistra ea destra)
  8. Le immagini a 9 patch devono terminare con * .9.png

Quindi puoi posizionare 1 punto su ciascun lato del logo (nel bordo superiore) e 1 punto sopra e sotto di esso (sul bordo sinistro) e queste righe e colonne contrassegnate saranno gli unici pixel da allungare.

Esempio

Ecco un'immagine a 9 patch, 102x102px (dimensione finale 100x100, a scopo di app):

9-patch image, 102x102px

Ecco uno zoom del 200% della stessa immagine:

the same image, magnified 2x for clarity

Notare i segni 1px in alto a sinistra e dire quali righe/colonne si espanderanno.

Ecco come appare questa immagine in 100 x 100 all'interno dell'app:

rendered into 100x100

Ed ecco cosa vorrebbe se espanso a 460x140:

rendered into 460x140

Un'ultima cosa da considerare. Queste immagini potrebbero apparire perfette sullo schermo del monitor e sulla maggior parte dei cellulari, ma se il dispositivo ha una densità di immagine molto alta (dpi), l'immagine sembrerebbe troppo piccola. Probabilmente è ancora leggibile, ma su un tablet con risoluzione 1920x1200, l'immagine appare come un quadratino molto piccolo nel mezzo. Quindi qual è la soluzione? Progetta 4 diverse immagini di avvio a 9 patch, ciascuna per un diverso set di densità. Per garantire che non si verifichi alcun restringimento, è necessario progettare nella risoluzione comune più bassa per ogni categoria di densità. Il restringimento non è desiderabile in questo caso, perché la 9 patch implementa solo lo stretching, quindi in un processo di restringimento il testo piccolo e altri elementi potrebbero perdere leggibilità.

Ecco una lista delle risoluzioni più piccole e più comuni per ogni categoria di densità:

  • xlarge (xhdpi): 640x960
  • grande (hdpi): 480x800
  • medio (mdpi): 320x480
  • small (ldpi): 240x320

Quindi progettate quattro schermate iniziali nelle risoluzioni sopra, espandete le immagini, mettendo un bordo trasparente di 1 pixel attorno al quadro e contrassegnate quali righe/colonne saranno estensibili. Tieni presente che queste immagini verranno utilizzate per QUALSIASI DISPOSITIVO nella categoria di densità, quindi l'immagine LDAP (240 x 320) potrebbe essere allungata a 1024x600 su un tablet extra large con piccola densità dell'immagine (~ 120 dpi). Quindi 9-patch è la soluzione migliore per lo stretching, a patto che tu non voglia una foto o una grafica complicata per uno splash screen (tieni a mente questi limiti mentre crei il design).

Anche in questo caso, l'unico modo per evitare che ciò si verifichi è progettare uno schermo per ciascuna risoluzione (o uno per ciascuna combinazione densità-risoluzione, se si desidera evitare che le immagini diventino troppo piccole/grandi sui dispositivi ad alta/bassa densità), o per dire l'immagine non deve allungarsi e avere un colore di sfondo apparire ovunque si verifichi l'allungamento (ricorda anche che un colore specifico reso dal motore Android probabilmente sarà diverso dallo stesso colore specifico reso da Photoshop, a causa dei profili di colore).

Spero che questo abbia avuto senso. In bocca al lupo!

390
Lucas Cerro

MODALITÀ RITRATTO

MDPI è 320x480 dp = 320x480px (1x)

LDPI è 0,75 x MDPI = 240x360px

HDPI è 1.5 x MDPI = 480x720px

XHDPI è 2 x MDPI = 640x960px

XXHDPI è 3 x MDPI = 960x1440px

XXXHDPI è 4 x MDPI = 1280x1920px

MODALITÀ PANORAMICA

MDPI è 480x320 dp = 480x320px (1x)

LDPI è 0,75 x MDPI = 360x240px

HDPI è 1,5 x MDPI = 720x480px

XHDPI è 2 x MDPI = 960x640px

XXHDPI è 3 x MDPI = 1440x960px

XXXHDPI è 4 x MDPI = 1920x1280px

MODIFICARE:

Vorrei suggerire di usare Lottie per splash screen se stai leggendo questo nel 2019

107
Ajmal Salim

PORTRAIT

LDPI: 200x320px

MDPI: 320x480px

HDPI: 480x800px

XHDPI: 720px1280px

LANDSCAPE

LDPI: 320x200px

MDPI: 480x320px

HDPI: 800x480px

XHDPI: 1280x720px

28
JRE.exe

Ho cercato la migliore e la risposta più semplice per rendere l'immagine a 9 patch. Ora rendere l'immagine della 9 patch è il compito più semplice.

Da https://romannurik.github.io/AndroidAssetStudio/index.html puoi creare un'immagine a 9 patch per tutte le risoluzioni: XHDPI, HDPI, MDPI, LDPI in un solo clic.

16
Owidat

L'uso di PNG non è una buona idea. In realtà è costoso per quanto riguarda le prestazioni. È possibile utilizzare file XML estraibili, ad esempio, background di Facebook .

Ciò ti aiuterà a rendere più fluide e veloci le tue prestazioni e, per il logo, utilizzare le immagini di patch .9.

11
Nishant Shah
Density buckets

LDPI    120dpi    .75x
MDPI    160dpi    1x
HDPI    240dpi    1.5x
XHDPI   320dpi    2x
XXHDPI  480dpi    3x
XXXHDPI 640dpi    4x

px / dp = dpi / 160 dpi
9
Zero

Nel mio caso, ho usato la lista drawable in style.xml. Con la lista dei livelli disegnabile, hai appena bisogno di una png per tutte le dimensioni dello schermo.

<resources xmlns:tools="http://schemas.Android.com/tools">
<!-- Base application theme. -->
<style name="AppTheme" parent="Android:Theme.Holo.Light.DarkActionBar">
    <item name="Android:windowNoTitle">true</item>
    <item name="Android:windowBackground">@drawable/flash_screen</item>
    <item name="Android:windowTranslucentStatus" tools:ignore="NewApi">true</item>
</style>

e flash_screen.xml nella cartella drawable.

<?xml version="1.0" encoding="utf-8"?>
 <layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android">
<item Android:drawable="@Android:color/white"></item>
<item>
    <bitmap Android:src="@drawable/background_noizi" Android:gravity="center"></bitmap>
</item>

"background_noizi" è nella cartella drawable. Spero che aiuti

3
user3295573

Qualche tempo fa ho creato un file Excel con dimensioni supportate
Spero che questo sia utile per qualcuno

Per essere sincero ho perso l'idea, ma si riferisce ad un'altra funzionalità dello schermo come dimensione (non solo densità)
https://developer.Android.com/guide/practices/screens_support.html
Per favore informami se ci sono degli errori

Link1: dimensions.xlsx

Link2: dimensions.xlsx

2
V. Kalyuzhnyu

** Se stai cercando i dettagli dello schermo per tutti i tipi di dispositivi principali **

vai a material.io

2