«

»

oct 10 2011

Soporte para múltiples pantallas

Uno de los principales si no el principal problema que deriva de la famosa fragmentación de Android es la diferencia entre las distintos tipos de pantallas existentes para la amplia gama de dispositivos para los que desarrollaremos. Esto hace que a la hora de programar nuestras interfaces debamos de tener en cuenta conceptos como densidades, resoluciones y tamaño si queremos conseguir que nuestras aplicaciones se vean correctamente en todos los dispositivos. En este post te contaremos los detalles a tener en cuenta a la hora de ponernos manos a la obra con el diseño e implementación de las interfaces para nuestras aplicaciones.

Antes que nada deberemos tener claros varios conceptos:

  • Tamaño de pantalla: Tamaño físico real medido como la diagonal de la pantalla. Para simplificar se clasificaran en cuatro tamaños generalizados (pequeño, normal, grande y extra grande).
  • Densidad de pantalla: Se refiere a la cantidad de pixeles que caben en un área de la pantalla. Usualmente se mide en dpi (dots per inch, puntos por pulgada). Por ejemplo, dos pantallas con la misma resolución la que tuviera mayor tamaño tendría menor densidad pues la misma cantidad de pixeles se repartirían en un área mayor. Al igual que antes y para simplificar las densidades se agruparan en cuatro grupos (baja, media, alta, extra alta).
  • Orientación: Es la orientación de la pantalla desde el punto de vista del usuario. Es decir horizontal (landscape) o vertical (portrait), lo que significa que la proporción de aspecto es ancho o alto según el caso. En este caso el detalle a destacar que esta característica no se limita a diferenciar entre distintos dispositivos, sino que puede llegar a cambiar en tiempo de ejecución si el usuario gira el teléfono (aunque podemos evitar que esto suceda).
  • Resolución: Número total de pixeles de la pantalla medido en el numero de columnas y filas que ocupan. Al agregar soporte para múltiples pantallas, las aplicaciones no trabajan directamente con la resolución, sino que trabajaremos únicamente con el tamaño de pantalla y la densidad.
  • Pixel independiente de la densidad (dp): Una unidad de pixel virtual que se debe utilizar en la definición de diseño de interfaz de usuario, para expresar las dimensiones de diseño o la posición de una manera independiente de la densidad. El dp es equivalente a un pixel físico en una pantalla de 160 dpi (densidad media). Siempre debe indicar las medidas en dp’s en la definición de la interfaz de usuario de su aplicación, para garantizar la correcta visualización en las pantallas con diferentes densidades.

A la hora de preparar nuestras aplicaciones para distintas pantallas es interesante ojear la web oficial de Google que nos proporcionara información acerca de cuales son los tipos de pantallas más usados y comprobar si verdaderamente merece la pena el esfuerzo de optimización para unos determinados dispositivos con un mercado mínimo.

Otra información interesante es la siguiente tabla en la que podemos comprobar la relación entre densidad, tamaño y resolución:

Una vez asimilados estos conceptos básicos pasamos a la miga:

A partir de Android 1.6 (API Level 4) se nos proporciona soporte para poder optimizar nuestras aplicaciones para múltiples tamaños y densidades de pantalla. Indicar a que tamaños y densidades damos soporte y proveer diferentes layouts y bitmaps para los distintos casos serian algunas de las opciones que se nos proporcionarían.

A la hora de mostrar un bitmap en nuestras pantallas este variara su tamaño de visualización en función de la densidad, para solucionarlo se nos proporciona la posibilidad de clasificar nuestros recursos gráficos (mediante distintas carpetas, drawable-hdpi, drawable-mdpi, drawable-ldpi) en función de las necesidades. Otra solución para algunos casos es el uso de imágenes 9-patch.

Otro problema con el que nos encontramos es que a la hora de diseñar una interfaz si luego la visualizamos en pantallas de mayor tamaño es posible que no aprovechemos bien el espacio o que en una más pequeña no nos quepa todo en la pantalla y deseamos organizarla de distinta manera o simplemente modificar las medidas de los elementos. Para ello se nos proporciona la posibilidad de definir layouts en función del tamaño y así solventar estos casos. Al igual que en el caso anterior tendremos distintas carpetas para almacenar nuestros recursos en función de los tamaños.

A partir de Android 3.2 (API Level 13) los grupos de tamaño están obsoletos y en su lugar se debe usar la configuración swdp para definir el ancho mínimo requerido por los layouts. Por ejemplo, si su requiere por lo menos 600dp de ancho de pantalla, debe colocarlo en la carpeta “sw600dp”. Además de sw tenemos disponible w (width) y h (height).

A continuación mostramos todos los calificadores que podemos usar para clasificar nuestros recursos:

Si aun así decidimos no dar soporte para algún tipo de pantalla o configuración podemos indicarlo en el Manifest y así nos aseguramos de que nuestra aplicación se instale solo en dispositivos donde tenemos la seguridad de que se vaya a mostrar bien. Para mas informacion al respecto recomiendo visitar la web oficial.

Y con esto hemos acabado, en un próximo artículo os indicaremos buenas prácticas a la hora de diseñar nuestras interfaces.

 

Acerca del autor

JMPergar

Mobile Developer at @BeRepublic & Founder of @AndroCode. Silver Speaker & Member of Core Team at @GDGBarcelona.

  • http://www.jhsilva.com jhsilva

    Androcode,

    Muchas gracias por el trabajo. Me has quitado varias dudas….

    Saludos