Páginas

martes, 8 de mayo de 2012

[MDE Lab] ANDROID: Tabs

Para una primera parte del proyecto decidí hacer una barra de Tabs para elegir entre los 2 posibles módulos que el usuario tiene al momento de ejecutar mi aplicación, entonces, después de mucho intentar ahora les mostraré como realizar esta tarea.

1. Creamos un proyecto en Eclipse


Abrimos Eclipse y creamos un nuevo proyecto Android:


Despues introducimos el nombre de nuestro proyecto y damos siguiente, este se llamara TabTuto, damos click en next.


A continuacion elegimos la API de Android con la cual trabajaremos, en mi caso elijo la API 2.3.3 que es compatible con mi celular, damos clic en next.


Por ultimo agregamos la informacion de nuestra aplicacion


2. Creamos las Tabs


Cada tab necesita su clase independiente, entonces necesitamos crear archivos .java diferentes para cada tab y necesitamos crear tantos archivos como tabs queremos tener.
Entonces, para crear las tabs, tenemos que crear nuevas clases:


Y le ponemos un nombre, en este caso las pondré numeradas, es decir Tab1, Tab2, ..., TabN


Y este es el código que debemos colocar a cada clase que hemos creado para cada Tab, cuidando por supuesto cambiar el nombre para las clases de las Tabs. Cada tab es una actividad, es decir, una ventanita individual en el teléfono. Como es una prueba lo único que agregaremos a la ventana sera un TextView.



Lo siguiente es agregar las actividades de cada Tab al archivo AndroidManifest.xml, como son 3 Tabs entonces agregamos 3 actividades.



3. Creamos el contenedor de las Tabs


En el archivo principal del código, vamos a teclear el siguiente código, con el agregaremos las Tabs al contenedor de la ventana principal.



Y por ultimo, pero no menos importante, debemos configurar el main.xml para que se muestren las tabs correctamente en nuestra ventana principal. Convertimos la ventana en un TabHost y le agregamos un LinearLayout vertical para acomodar nuestras tabs con el mismo tamaño y hacia la derecha. Agregamos el Widget de las tabs y cada tab contiene un FrameLayout para mostrar su contenido.



4. Prueba

Solo nos queda probar nuestro codigo, en las barras de herramientas damos clic en el boton Run As... y en la ventana emergente seleccionamos la opcion Android Application, con ello se abrira nuestro emulador de Android.



Y este debe ser nuestro resultado final.



Espero les haya servido el minitutorial, saludos :)

Referencias

Android Developer: TabWidget

2 comentarios: