Buscar este blog

martes, 10 de abril de 2012

Auto Ajustar tamaño de aplicaciones al terminal

Siguiendo el tutorial de Developer Android podemos ver las diferentes resoluciones
de pantallas existentes, asi como su dentidad, el siguiente grafico es muy 
ilustrativo. 
 
 
Por lo que para hacer aplicaciones que se autoajusten al terminal debemos crear la 
siguiente estructura de directorios para los layaout. En el caso de no crearse 
alguno Android cargaria por defecto la carpeta "layout"
 
res/layout/             // layout for normal screen size ("default")
res/layout-small/       // layout for small screen size
res/layout-large/       // layout for large screen size
res/layout-xlarge/      // layout for extra large screen size
res/layout-xlarge-land/ // layout for extra large in landscape orientation 
 
Una vez creado la estructura de carpetas, creariamos el layout (xml) y lo 
copiariamos a todas las carpetas modificando para cada tamaño (small,normal..etc) 
los parametros que queramos ajustar a cada pantalla, indicando el tamaño dp. 
Pongamos un ejemplo:
Para una pantalla Small
  <WebView android:id="@+id/webview"
        android:layout_width="533dp"
        android:layout_height="fill_parent">
  </WebView>
 
Para una  normal es:
  <WebView android:id="@+id/webview"
        android:layout_width="400dp"
        android:layout_height="fill_parent">
  </WebView> 
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

Una formula de calculo de los pixel en cada resolucion es la siguiente
px= dpi/160

Por lo que con px calculado

dp=tamaño px total/px (calculados de antes)

Siguiendo el ejemplo anterior, para una pantalla small de 240dpi de ancho habría
 una proporción de 1.5px reales por cada 1px de la pantalla del terminal, para una
normal de 400 dpi habría 2px por cada 1px.
Por lo que Si la imagen que queremos colocar en el ejemplo es de 800 x 600, 
calcularemos el ancho para cada pantalla así:

small --> dp=800/1.5 = 533dp
normal --> dp=800/2 = 400dp

Que son los datos que se pueden ver se usarón en el ejemplo

De la misma manera para adaptar las imagenes habria que crear la siguiente 
estructura y copiar
 a cada una las imagenes adecuadas:
res/drawable-mdpi/my_icon.png        // bitmap for medium density
res/drawable-hdpi/my_icon.png        // bitmap for high density
res/drawable-xhdpi/my_icon.png       // bitmap for extra high density
 
 
Articulo original 

No hay comentarios:

Publicar un comentario