Esqueleto de la aplicación para admitir varias pantallas


92

Como sabemos, Android viene con varios dispositivos que tienen diferentes características, resolución y tamaño de pantalla, por lo que al desarrollar una aplicación que admita pantallas múltiples (pequeñas y grandes), existe un obstáculo de tamaño y diseño.

Esto conduce a diferentes combinaciones de tamaños de pantalla, resoluciones y DPI y crea un gran desafío al diseñar y desarrollar para dispositivos Android. Mientras que algunos otros fabricantes (que no son Android) tienen diferentes resoluciones y DPI, comparten el mismo tamaño de pantalla y las resoluciones siguen la misma relación de aspecto. Por lo tanto, se puede crear una imagen que se ajuste a los dispositivos que no sean Android.

Mi pregunta es si existe un flujo o arquitectura adecuados que uno debería seguir para cumplir con el requisito.

ingrese la descripción de la imagen aquí

Recuerde que tenemos tabletas de diferentes tamaños y resoluciones.

Soy consciente de que Android Developer contiene esta información, pero mi punto de vista es de implementación.

Por lo que sé, lo que entendí es que para diseñar gráficos de Android, incluso el programador debe conocer el concepto de diseño.


13
¿Están seguros de que esta pregunta no es constructiva?
Mohammed Azharuddin Shaikh

6
Creo que es muy constructivo. Me gustaría saber las razones de los votos negativos.
Lazy Ninja

11
@MKJParekh tome MicroMax Funbook gsmarena.com/micromax_funbook_p300-4701.php ¿ 7", 480X800, Ldpi (133 dpi) puede decirme en qué categoría (drawble-large o Ldpi o si Android v3.0 sw-480) caerá?
Mohammed Azharuddin Shaikh

1
@LazyNinja la razón de los votos negativos son los locos y la gente loca. Quienes piensan que solo pueden hacer preguntas constructivas: p
AZ_

1
@AZ_ :) Usamos esta estructura res en la carpeta res drawable drawable-hdpi drawable-hdpi-v11 drawable-hdpi-v9 drawable-large drawable-large-hdpi drawable-ldpi drawable-mdpi drawable-mdpi-v11 drawable-small drawable- xhdpi drawable-xhdpi-v11 drawable-xxhdpi drawable-xxhdpi-v11 layout layout-small layout-sw530dp layout-sw720dp layout-xlarge values ​​values-sw530dp values-sw720dp values-v14 values-xlarge y utiliza dimensiones bien definidas en xml de la carpeta de valores . FYKI nuestra aplicación admite más de 5000 tipos de dispositivos.
MKJParekh

Respuestas:


147

Finalmente creé una estructura que maneja diseños e íconos para múltiples pantallas.

Android generaliza las pantallas de los dispositivos en categorías según dos parámetros:

  • Tamaño de pantalla, el tamaño físico de la pantalla (medido en diagonal)
  • Densidad de pantalla, la densidad física de píxeles de la pantalla (en píxeles por pulgada o ppi) `

Para determinar el tamaño y la densidad de la pantalla rápidamente, instale la aplicación " What's my Size " para Android.

Tamaño de pantalla

Android define cuatro tamaños de pantalla generalizados:


 Qualifier           Size

 small               ~3 inches (approx) 
 normal              ~4 inches (approx) 
 large               Exceeds 4 inches    
 xlarge              Exceeds 7 inches  
  • La mayoría de los teléfonos se clasifican como pequeños o normales (aproximadamente de 3 a 4 pulgadas en diagonal). Pero ahora, hay muchos teléfonos con pantalla grande como Galaxy S4, HTC One, Xperia Z
  • Una tableta pequeña como la Samsung Galaxy Tab se clasifica como grande (más de 4 pulgadas)
  • Extra grande se aplica a dispositivos grandes, por ejemplo, tabletas grandes

Android define cuatro densidades de pantalla generalizadas:


 Qualifier         Description         Nominal value

 ldpi              low density          120 ppi
 mdpi              medium density       160 ppi
 hdpi              high density         240 ppi
 xhdpi             extra high density   320 ppi

Típicamente:

  • el tamaño de la pantalla tiene mayor impacto en el diseño de su aplicación
  • La densidad de pantalla tiene un mayor impacto en su imagen y recursos gráficos.

Aquí se enumera la diferencia porcentual de la pantalla del dispositivo

  • Ldpi- 75%
  • Mdpi- 100% (base según el sitio del desarrollador de Android)
  • Hdpi- 150%
  • XHdpi- 200%

ingrese la descripción de la imagen aquí

Pero como sabemos ahora, la mayoría de los dispositivos vienen con 480X800, así que lo considero un dispositivo basado, por lo que nuestro nuevo cálculo será como este

  • Ldpi- 50%
  • Mdpi- 66,67%
  • Hdpi- 100%
  • XHdpi- 133,33%

lo que significa que el primer icono y diseño se crearán solo para 480X800 y luego para los de descanso (es decir, Ldpi, Mdpi, Xhdpi).

Hay imágenes que son comunes para todos los diseños y deben ser uniformes en color y forma (sin forma compleja, sin curva), por lo que para este tipo de imagen estamos creando 9patchpara colocarla en la carpeta "dibujable (sin sufijo)". Para crear una imagen de 9Patch, puede usar DrawNinePatch o BetterNinePatch

Ahora simplemente cambie el nombre de sus imágenes según los estándares de Android y complete su aplicación con hdpiy luego simplemente tome la drawable-hdpicarpeta y Abra Adode Photoshop (recomendado) cree una Acción de tamaño múltiple (solo cambie el tamaño de acuerdo con la proporción porcentual) una vez creada la Acción para todos los tamaños y luego simplemente haga Automatice por lotes y proporcione el origen (drawable-hdpi) y el destino (drawable-ldpi, drawable-mdpi, drawable-xdpi).

La razón por la que insisto en que uses Photoshop porque cambiará el tamaño de tu imagen automáticamente con Acciones y un punto más es que no necesitas cambiar el nombre del archivo (le asignará el mismo nombre que el original).

Una vez que haya completado la creación de todas las imágenes, actualice su proyecto y pruébelo.

A veces, puede haber la posibilidad de que el diseño que admite la pantalla (xhdpi, hdpi, mdpi) se corte en una pantalla pequeña (ldpi), por lo que para manejar esto simplemente cree una carpeta de diseño separada (diseño pequeño) y agréguela ScrollView(principalmente). Eso es.

Tabletas Las tabletas se clasifican en dos tamaños.

  1. 7 "(1024X (600-48 (barra de navegación))) = 1024X552 (dibujable-grande)
  2. 10 "(1280X (800-48 (barra de navegación))) = 1280X752 (dibujable-xlarge)

En esto, necesitamos crear una imagen para la pantalla y ponerlas en consecuencia.

Entonces, en general, tendremos esta carpeta en nuestra aplicación para admitir múltiples pantallas.

drawable
drawable-ldpi
drawable-mdpi
drawable-hdpi
drawable-xhdpi
drawable-large
drawable-xlarge

será una combinación más calificativa con Screen size and Screen density

drawable-large-ldpi
drawable-large-mdpi
drawable-large-hdpi
drawable-large-xhdpi

más calificador con Screen density and Version

drawable-ldpi-v11
drawable-mdpi-v11
drawable-hdpi-v11
drawable-xhdpi-v11

y más calificador con Screen size and Version

drawable-large-v11
drawable-xlarge-v11

y más calificador con Smallest width concept(SW)

 drawable-sw???dp

Además, en Android V3.0 Honeycomb, introdujeron un nuevo concepto de SW(smallest width)en qué dispositivo se clasifican en ancho de pantalla, por lo que si estamos creando una carpeta con nombre drawable-sw360dp, el dispositivo con 720dp (ya sea ancho o alto) usará los recursos de esta carpeta.

por ejemplo, para encontrar el sufijo Samsung Galaxy S3 dp to drawable-sw? dp
Con referencia al cálculo de DP , si desea admitir su diseño o dibujable en S3, el cálculo dice

px = Ancho del dispositivo = 720
dpi = Densidad del dispositivo = 320

fórmula dada

    px = dp * (dpi / 160)

intercambiando fórmula porque tenemos el valor de px

    dp = px / (dpi / 160)

ahora poniendo valor,

     dp= 720 / (320/160);
     dp=360. 

entonces drawable-sw360dp que hará el trabajo

Obtenga la configuración de su dispositivo de GsmArena. De la misma manera, también puede crear una carpeta de acuerdo con la versión de la API de Android del dispositivo, es decir, drawable-hdpi-v11`, por lo que el dispositivo que tiene API11 y es Hdpi utilizará estos recursos.

Consejos adicionales:

  • Utilice diseños relativos, dp, sp y mm

    Unidades dp : píxeles independientes del dispositivo normalizados a 1 píxel físico en una pantalla de 160 ppi, es decir, densidad media. Escalado en tiempo de ejecución. Utilizar para las dimensiones del elemento de la pantalla

    unidades sp : píxeles escalados, especificados como valores de punto flotante, basados ​​en unidades dp pero además escalados para la configuración de preferencia de tamaño de fuente del usuario. Escalado en tiempo de ejecución. Usar para tamaños de fuente

    siempre debe usar RelativeLayout para diseños; AbsoluteLayout está obsoleto y no debe utilizarse.

  • Utilice formatos de imagen adecuados: PNG frente a JPEG

    Android "prefers" PNG for bitmap image files, "accepts" JPEG, and "discourages" GIF.

    Sin embargo, PNG y JPEG no son equivalentes. Tienen diferentes compensaciones de calidad y PNG no siempre es lo mejor:

    JPEG puede ofrecer reducciones del tamaño de archivo de hasta un 50% en comparación con PNG, lo cual es significativo si su aplicación utiliza muchas imágenes

    Un archivo JPEG "con pérdida" de mayor calidad puede verse mejor que un PNG "sin pérdida" altamente comprimido, para el mismo tamaño de archivo

  • Agregue etiquetas a sus imágenes y gráficos para depurar

  • Utilice el elemento soportes-pantallas

  • Configure sus emuladores con valores de dispositivo reales

    Convencionalmente, los sistemas de escritorio se muestran a 72ppi (Mac) o 96ppi (Windows, Linux). En comparación con los dispositivos móviles, las pantallas de escritorio son siempre de baja densidad.

    Configure siempre sus emuladores de Android para que imiten los valores reales del dispositivo y configúrelos siempre a escala para emular la densidad del dispositivo.

    En Eclipse, es fácil crear múltiples emuladores (en la barra de menú de Eclipse, seleccione Ventana> Administrador AVD> Nuevo ) configurados con valores para dispositivos reales:

    Asigne un nombre al emulador para el dispositivo real que está emulando. Especifique la resolución, no utilice tamaños genéricos incorporados. Establezca la densidad del dispositivo para que coincida con el dispositivo real (en el panel Hardware, establezca la propiedad de LCD abstraída en la densidad real, siempre un valor entero).

    Cuando inicie el dispositivo, siempre seleccione Escalar pantalla a tamaño real y escriba la dimensión real de la pantalla en pulgadas.

    Si no establece la densidad del dispositivo, el emulador se establece de forma predeterminada en baja densidad y siempre carga recursos específicos de ldpi. La resolución (dimensiones en píxeles) será correcta, pero los recursos de imagen que dependen de la densidad no se mostrarán como se esperaba.

    Por supuesto, nada de lo que haga reproducirá una calidad de imagen de mayor densidad en una pantalla de escritorio de menor densidad.

Estos son los datos recopilados durante un período de 7 días que finaliza el 1 de octubre de 2012. Para ver las estadísticas más recientes sobre la versión de la plataforma Android, visite aquí.

Basado en el tamaño de la pantalla

ingrese la descripción de la imagen aquí

Basado en la densidad de la pantalla

ingrese la descripción de la imagen aquí


2
Para Samsung Galaxy Tab 7" tenemos que mantener las imágenes bajo dibujable a gran-IPAP lo contrario la imagen se consigue estirado o encogido.
Rajpara

@rajpara hay muchas combinaciones y permutación, incluiremos todos estos casos más adelante.
Mohammed Azharuddin Shaikh

1
vea @AlexBonel, estoy de acuerdo con usted, pero mi lema principal es darme cuenta de cómo se pueden hacer las cosas cuando se trata de soporte multipantalla. Se puede modificar / manipular este flujo / concepto porque lo anterior es para aclarar el problema inicial. Además, yo también hago modificaciones basadas en el diseño de la aplicación. Tu publicación me da la sensación de que entendiste el concepto. Espero que entiendas mi punto.
Mohammed Azharuddin Shaikh

1
Buena respuesta. Después de buscar mucho y tantos días por qué ocurren estas excepciones, obtuve esta publicación como la mejor respuesta con un gran ejemplo y explicación. Por ejemplo, considere una tableta Halo Value de 7 pulgadas. PPI = 133. Resolución = 480 * 800. Tamaño = 7 'pulgadas. Si consideramos mdpi como base, debería tomar la dimensión definida en valores-sw480 pero está tomando dimensión de valores-sw600. No entiendo por qué está pasando esto. Realmente muchas gracias por tu publicación. Ahorre pérdidas de tiempo y despeje la confusión. Creo que esto debería estar en el sitio oficial de Android. Le agradezco su esfuerzo.
Smeet

1
Creo que esta es la mejor respuesta que he visto. Estoy buscando esa respuesta desde hace mucho tiempo. Y finalmente lo conseguí. Gracias a todos por contribuir con esta respuesta para hacerla más comprensible.
Hiren Dixit

1

Los diseñadores deben crear diseños básicos de

base size of mdpi devices * density conversion factor of highest supported density bucket
El tamaño de la pantalla base es de 320 X 480 px y los segmentos de densidad son los siguientes:

  • ldpi: 0,75
  • mdpi: 1.0 (densidad base)
  • hdpi: 1,5
  • xhdpi: 2.0
  • xxhdpi: 3,0
  • xxxhdpi: 4.0

Y para abordar el espacio adicional disponible en los dispositivos Android, debe usar componentes extensibles en ambas direcciones (horizontal y verticalmente). La información detallada está disponible aquí:

http://vinsol.com/blog/2014/11/20/tips-for-designers-from-a-developer/

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.