Friday, April 1, 2016

Android - Ejercicio Curso 2: Juguetería en Tablet

En el post anterior, realizamos el ejercicio del una juguetería en Celular.  Funcionando de la siguiente manera

En la primera pantalla seleccionamos "Metegol" y muestra el detalle de un metegol.
En la segunda pantalla seleccionamos "Monopatín" y muestra el detalle de un monopatín.

Repasamos los contenidos:
  • Fragments
  • ListView
  • Pantallas Master - Detail
Podemos descargar de GitHub el Tag v1.0.3 que representa esta versión:

https://github.com/PabloEzequiel/Android/releases/tag/v.1.0.3

En este post, vamos a extender el ejercicio para que se vea también correctamente en Tablets.





Paso 4: Objetivo: Soportar resoluciones de pantallas mas grandes (Tablet)

En este paso 4, seguramente el último de este post, vamos a agregar la posibilidad de soportar distintas resoluciones de pantallas: Tablet y Celular

Para esto debemos:

a) Elegir algún mecanismo para determinar si nos encontramos en una tablet o no.
b) Crear un nuevo Layout específico para tablet
c) Podemos agregar imágenes también (de distintos tamaños)

Como los componentes están en el repositorio de GitHub, y vamos a crear un nuevo Tag para identificar al paso 4, simplemente vamos a comentar que agregamos:

Agregamos:
- un nuevo layout especifico para tablet. Lo llamaremos también main_activity.xml pero en una nueva carpeta, con la palabra mágica layout-sw600dp  que es una indicación al motor de android que si estamos en una pantalla mas grande a los 600p tomará esta versión de main_activity.xml

¿Que diferencias incluiríamos específicas para Tablet?

Básicamente dos: cambiaremos el título y el linear layout que contiene los Fragments serían horizontales.

Agregamos un nuevo Android Virtual Device (AVD) que sea de tipo tablet:


y volvemos a ejecutar la aplicación, seleccionando el AVD de la tablet y queda:
Observemos las diferencias entre los dos layout:

Celulares: layout/main_activity.xml

Tablet: layout-sw600dp/main_activity.xml
Compartimos la versión en GitHub para cubrir este paso extra:


Cerrando el ejercicio:

Después de estos 4 pasos, vamos hacer el merge de este branch y cerramos el ejercicio.










Labels: , ,

0 Comments:

Post a Comment

Subscribe to Post Comments [Atom]

<< Home