martes, 21 de febrero de 2012

Crear UI para diferentes tamaños de pantallas.

Desarrollo sobre la plataforma Android:



Hola a todos nuevamente, espero que estén bien ;) otra vez voy a escribir sobre un tema un poco avanzado, no es demasiado complicado de comprender, pero si muy útil. Escribo porque estuve lidiando un rato sobre este problema, el tema es el siguiente, como sabemos la plataforma Android funciona sobre diferentes dispositivos, los mismos poseen pantallas con diferentes densidades, tamaños, etc. Al testear nuestra aplicación si no tenemos la costumbre de realizarlo con emuladores que posean diferentes características de pantalla, podríamos caer en el error de que la UI se ve correctamente en todo dispositivo, pero esto necesariamente no debe ser así. Ya que una imagen o un texto, no se veran igual en un movil como por ejemplo un Samsung Galaxy S2 a un Samsung i5500 (que es el que poseo para testear los programitas jeje)
Este problema, posee una solución que no es demasiado compleja, y ahora vamos a verla, lo primero es crear un proyecto Android en nuestro IDE Eclipse, y debería verse así:



Ahora lo que deberemos crear, dentro de la carpeta res/ de nuestro proyecto dependiendo al tipo de pantalla al que nos queremos referir, con estos nombre:

layout-small
layout-normal
layout-large
layout-xlarge


Y debería quedar como se ve en la imagen, ahora se deben preguntar, porque esos nombres, para que sirve esto etc, etc. Bueno, aunque como dije que esto es sencillo, la explicación no es tan fácil, porque se deben tener algún conceptos, para entenderlo.

Términos y conceptos.

Tamaño de la pantalla:
-
Tamaño físico real, medido en diagonal de la pantalla.
-
Para simplificar, en Android se han dividido todos los tamaños de pantalla reales, en cuatro tamaños generalizados: small, normal, large, and extra large.

Densidad de pantalla:

La cantidad de píxeles en un área física de la pantalla, normalmente conocida como dpi(puntos por pulgada). Por ejemplo, una "baja" densidad de pantalla tiene menos píxeles dentro de un área física determinada, en comparación con la densidad de una pantalla "normal" o "de alta densidad".
Para simplificar, los grupos de todas las densidades de pantalla reales en Android se dividen en cuatro densidades generalizadas: low, medium, high, and extra high.

Orientación:
La orientación de la pantalla desde el punto de vista del usuario. Esta es horizontal o vertical, lo que significa que la relación de aspecto de la pantalla o es de ancho o
alto,respectivamente. Tenga en cuenta que no sólo los diferentes dispositivos operan en diferentes orientaciones por defecto, pero puede cambiar la orientación en tiempo de ejecución cuando el usuario gira el dispositivo.( estas dos orientaciones son: landscape o portrait).

Resolución
El número total de pixel
es físicos sobre una pantalla. Al añadir soporte para múltiples pantallas, las aplicaciones no trabajan directamente con la resolución, las aplicaciones solo deben estar pensadas para que se vean correctamente según el tamaño de pantalla y la densidad, según lo especificado por los tamaños de pantallas generalizados y grupos de densidades.

Densidad de píxeles Independiente(dp)
Una unidad de pixel virtual que se debe utilizar en la definición de diseño de la interfaz de usuario, para expresar las dimensiones de diseño o de la posición de una manera independiente de la densidad.
El
dp es equivalente a un píxel físico en una pantalla de 160 dpi, que es la densidad de línea de base asumida por el sistema para una pantalla de densidad “mediun”. Durante la ejecución, el sistema de forma transparente maneja cualquier ampliación de las unidades dp, según sea necesario, en base a la densidad real de la pantalla en uso. La conversión de las unidades de DP a píxeles de la pantalla es simple: px = dp * (dpi / 160). Por ejemplo, en una pantalla de 240 dpi, un 1 dp es igual a 1,5 pixeles físicos. Usted siempre debe usar unidades dp la hora de definir la interfaz de usuario de la aplicación, para garantizar la correcta visualización de la interfaz de usuario en las pantallas con diferentes densidades.

Rango de pantallas soportados

El soporte que se da sobre los diferentes tamaños de pantallas y división, como antes se a mencionado, es el que se muestra en la imagen:


Estos son los tamaños que tendrían las pantallas en unidades dp.


              xlarge pantallas de al menos 960dp x 720dp
             large pantallas de al menos 640dp x 480dp
             normal pantallas de al menos 470dp x 320dp
             small pantallas de al menos 426dp x 320dp



Bueno, una vez leído estos conocimientos básicos, creo que ya comprenden el porque les hice crear esas carpetas, con esos nombres en particular, esto en resumen lo que hará es que nuestro Android pueda elegir la UI de las que hemos diseñado, la que mejor se adapte a la pantalla del móvil en la que se instale.


Para darse cuenta de lo mismo(como se ve en la imagen), nuestro IDE Eclipse detecta como si lo haría nuestro Android en que carpeta se encuentra el layout a editar, así que como se ve, de forma predeterminada el que se encuentra en la carpeta layout-large, se pone en Editing config: “Large Screen” tamaño de pantalla 5.1in WVGA.

De la misma manera lo hará con el layout en layout-normal(3.7in WVGA(Nexus One)) y layout-small(en 2.7in QVGA) así que de esta manera, simplemente con crear en cada carpeta de esas un archivo .xml con el mismo nombre. Donde diseñaremos el mismo layout pero para diferentes tamaños de pantallas, esto hará que nuestro SO Android elija la versión de layout que mas le conviene para cada tamaño de pantalla que tengan los dispositivo donde se instalen. Debemos tener en cuenta que esto lo podemos hacer también con las diferentes orientaciones de pantallas en las que este nuestro dispositivo (portrait y landscape). En ese caso, podríamos crear 8 archivos .xml del mismo layout (4 tamaños de pantallas diferentes x 2 orientaciones de pantallas) Tengan en cuenta que no siempre es necesario realizar tantas versiones del mismo layout, para eso recomiendo crear uno, para un tamaño de pantalla, después verlos con otras versiones de pantallas y en diferentes VM, así comprueban que el funcionamiento sea el óptimo para el usuario.

Como verán el tema es bastante amplio, esto seria una de las buenas practicas de programación sobre Android, y esta en las recomendación que indican desde la documentación oficial, que como siempre recomiendo leer , para ampliar los conocimientos adquiridos en mis post. Espero que les allá gustado, y que les servido de algo.



Documentación Oficial:

Saludos a todos, Gabriel E. Pozo