domingo, 4 de mayo de 2014

Android Soporte para Múltiples Pantallas 2/2

Nota: Si aun no has leído la primera parte da clic aquí.
Todas las imágenes son tomadas del IDE Eclipse.

Tamaño de la pantalla: A partir de Android 3.2 se introduce un nuevo enfoque para el tamaño de las pantallas, incorporando nuevos selectores numéricos con respecto a lo que se venía trabajando. descritos por tres números (selectores numéricos) representados de la siguiente manera:

 Width dp: Anchura de la pantalla del dispositivo, el ancho cambia cuando la orientación de la pantalla es cambiada.

Height dp: Altura de la pantalla del dispositivo, esta altura cambia cuando la orientación de la pantalla es cambiada.

Smallest Width dp: El ancho más pequeño del dispositivo, para el diseño de la app este es la menor anchura que se puede encontrar en cualquier rotación de la pantalla siendo este el más importante de los tres números que describen el tamaño de la pantalla.

Los números típicos para el ancho dp en pantallas son:

320: Una pantalla de teléfono
480: Una tablet Tweener
600: Una tablet de 7”
720: Una tablet de 10”

Estos nuevos selectores numéricos pueden seleccionar los recursos de diseño utilizando el Smallest Width dp (sw), Width dp, Height dp o combinaciones entre ellos.

Para ilustrar mejor lo anterior, pongamos un ejemplo; queremos implementar una interfaz para tablet, recordemos que su ancho mínimo es de 600dp, entonces tendríamos lo siguiente:

Primero debemos crear un nuevo archivo XML, para esto nos ubicamos en nuestro proyecto, entramos a File > New (Alt + Shift + N) > Other … (Ctrl + N) > Android; de las opciones desplegadas seleccionamos Android XML Layout File, clic en Next. Nos aparece la siguiente ventana, ingresamos el nombre del archivo, debe ser en minúscula y podemos seleccionar el tipo de elemento, en este caso solo agregaremos el nombre y dejaremos el resto por defecto.
Esta resaltado un Warning generado porque ya existe un archivo con el nombre de activity_main.xml, lo pasaremos por alto. click en Next. Nos aparece la siguiente ventana donde aparecen los calificadores disponibles. 

Seleccionamos el calificador Smallest Screen Width (Resaltado) y clic en el botón de selección (Resaltado). Aparece la siguiente ventana.


Primero debemos agregar el valor para Smallest Screen Width recordemos que queremos dar soporte a una tablet de 7” para ello ponemos el valor de 600 que nos cambia el nombre del calificador escogido a sw600dp y por último no indica el Folder en el cual se va a guardar. Clic en Finish. Al terminar si la carpeta donde va a guardarse no existe la crea y tenemos lo siguiente en la estructura de nuestro proyecto.


Si queremos hacer lo mismo pero para tablet de 10” debes repetir todos los pasos anteriores reemplazando el Smallest Screen Width de 600 por 720 y con esto se adiciona un nuevo recurso:

Para tener en cuenta, Android utilizara el recurso que esté más cerca al ancho más pequeño, del dispositivo sin que el recurso sea más grande.

Para hacer un diseño que nos dé soporte al cambiar de orientación utilizaremos el selector de Ancho (Screen Width) siguiendo los mismo pasos anteriores.

Instalación NodeJS

Ingresamos a la página oficial de NodeJS donde lo descargaremos  https://nodejs.org/en/download/ Escogemos el instalador que se ajuste a ...