Cuando estás aprendiendo a desarrollar aplicaciones en cualquier sistema operativo es recomendable que sigas la tendencia de aquellas que ya están consolidadas, esas aplicaciones que fueron tomadas cómodamente y sin mucha complicación por los usuarios finales de las mismas, de esta manera facilitas la incursión de tus propias aplicaciones al mercado virtual. Por supuesto que no es obligatorio que lo hagas, pero es una buena práctica mientras te conviertes en un pez dentro de este mar de la informática. En Android no es la excepción y por eso hoy traemos un modo de diseño casi consolidado y muy utilizado para que lo apliques a tus desarrollos; sigue y conoce de qué se trata.
En Google y más específicamente en nuestro querido Android, quieren que los desarrolladores realicen unas aplicaciones con diseños agradables, funcionales, prácticas y que tengan una misma tendencia en cuanto a personalidad Android se refiere. Eso quiere decir que no tengas botones desproporcionados, textos volando sin que indiquen algo importante, iconos que reflejen lo que realmente representan sin necesidad de explicaciones extensas y que tu aplicación tenga un orden agradable para que los usuarios no tengan que leer un manual de uso de la misma.
Una de las aplicaciones que han tenido una gran aceptación por parte de los usuarios de Android según afirma la misma gente de Google, es la aplicación para Twitter. Esta aplicación si la vemos es muy práctica, sencilla de entender por los usuarios y las calificaciones dadas en el Market no lo desmienten.
Lo destacable de esta aplicación y lo cual nos interesa en estos momentos, aparte de su estética, es que esta divida en 4 secciones generales que abarcan toda la funcionalidad de la aplicación, pero dentro de cada una de esta sección encontrarás más funciones detalladas con las cuales el usuario puede interactuar. Estas 4 secciones o pestañas le dan aspecto limpio haciendo que el usuario sepa a donde ir cuando desee realizar alguna acción determinada. Este tipo de diseño por pestañas es una tendencia ya que también aplicaciones conocidas como Hotmail, GetJar y hasta la tienda de Samsung App la adopten para su uso (por solo mencionar las más usuales).
Estas aplicaciones demuestran que cuando se adopta un diseño que es aceptado por los usuarios, se crea una tendencia y es motivo por el cual hoy te traemos un ejemplo muy sencillo del uso de las pestañas en tus aplicaciones y que podría ser una plantilla para tus aplicaciones, modificando únicamente nombre e imágenes descriptivas.
La explicación de este tema de las pestañas la haremos paso a paso desarrollando explicando el uso de cada una de las características principales que necesitaremos para hacer este tipo de diseño, como son TabHost, TabWidget y FrameLayout:
La definición de un TabHost según la página oficial de Android es: Contenedor para una vista de ventanas con pestañas. Este objeto tiene dos hijos: un conjunto de etiquetas en las que el usuario hace clic para seleccionar una pestaña específica y un objeto FrameLayout que muestra el contenido de esta pestaña. Los elementos individuales suelen controlarse con un objeto contenedor, en lugar de establecer los valores de los elementos propios de los hijos.
El TabHost es el elemento raíz o principal del layout de la actividad principal, es como el molde de la aplicación, el cual esta dividió en 2 partes principales y personalizables, la primera es donde estarán las pestañas que vamos a utilizar en nuestra aplicación, la cual se llama TabWidget. La segunda parte principal es donde estará el contenido que realiza cada pestaña y el cual es un FrameLayout.
http://developer.android.com/reference/android/widget/TabHost.html
La definición de un TabWidget según la pagina oficial de Android es: un atributo que muestra una lista de las etiquetas de la pestaña que representa cada página de ficha de recogida de los padres. El objeto contenedor de este Widget es TabHost. Cuando el usuario selecciona una pestaña, este objeto envía un mensaje al contenedor principal, TabHost, para indicarle que debe cambiar la página mostrada. Por lo general no se utilizan muchos métodos directamente en este objeto. El TabHost contenedor se utiliza para agregar etiquetas, agregar el controlador de devolución de llamada, y gestión de devoluciones de llamada. Puede llamar a este objeto para recorrer la lista de las pestañas, o para modificar el diseño de la lista de la ficha, pero la mayoría de métodos se deben llamar en el objeto contenedor TabHost.
Así que básicamente un TabWidget es un elemento que contiene las pestañas con las cuales se interactua cuando la aplicación esta corriendo. http://developer.android.com/reference/android/widget/TabWidget.html
Por último según Android un FrameLayout está diseñado para bloquear un área en la pantalla para mostrar un solo elemento. Por lo general el FrameLayout deben ser usado para sostener un punto de vista uno elemento hijo porque es difícil organizar puntos de vista del elemento hijo de una manera que sea escalable a diferentes tamaños de pantalla sin que los hijos se superponen entre sí. Se pueden añadir varios elementos hijos a un FrameLayout y el control de su posición con la propiedad gravity del FrameLayout modificando el atributo android: layout_gravity.
En resumidas cuentas es el contendor de lo que quiero mostrar en cada pestaña, ya sean botones, textos, cajas, imágenes, videos etc. http://developer.android.com/reference/android/widget/FrameLayout.html
Con estas definiciones ya claras, empezaremos a crear nuestro proyecto en el cual mostraremos una aplicación que tenga 4 pestañas con 4 diferentes actividades en la que mostraran el texto que indica que se encuentra en la actividad seleccionada con un simple TextView. No haremos nada en las pestañas para no alargar el post, tú decides que va en cada una de las pestañas dependiendo de las necesidades de la aplicación que este haciendo. Por último personalizamos las 4 pestañas con iconos representativos, en uno mostraremos el símbolo de un explorador, en la otra mostraremos el símbolo de Skype, en la otra el símbolo de la red Wi-Fi y en la última se encontrará el símbolo de Bluethoot, todos estos a modo de ejemplo pero que tu lo podrás personalizar a tu acomodo.
1. Creamos un nuevo proyecto el cual llamamos Pestanas, utilizamos la versión 2.3 de Android, llamamos el paquete como com.androideity.pestanas y nombramos a la actividad principal MainActivity.
2. En segunda instancia creamos las 4 actividades que utilizaremos en la aplicación llamándolas Pestana1.class, Pestana2.class, Pestana3.class, Pestana4.class dentro del paquete com.androideity.pestanas. Al mismo tiempo creamos el respectivo layout para cada actividad con el mismo nombre representativo de la actividad: pestana1.xml, pestana2.xml, pestana3.xml, pestana4.xml. Así nuestro proyecto va tomando la siguiente forma:
3. Con nuestros archivos creados, pasamos a vincular los layout a las respectivas actividades, en los cuales simplemente escribiremos un texto con el nombre de la pestaña que representara. Lo que debemos hacer es mas fácil verlo en las siguientes imágenes:
4. Como has visto en entregas anteriores aquí en Androideity, debemos vincular cada una de las actividades al Manifiesto para que puedan ser llamadas y poder trabajar con estas, así que procedemos a incluirlas en el archivo AndroidManifest.xml de la siguiente manera:
5. Perfecto, hasta este momento ya tenemos nuestra “carpintería” terminada, ahora a lo que vinimos. Vamos a modificar nuestro layout principal main.xml para que contenga los recursos necesarios que nos permiten utilizar las pestañas en nuestro proyecto. En primera medida definimos el TabHost que contendrá los elementos principales de la actividad. En segunda instancia creamos un LinearLayout vertical para contener ordenadamente los 2 elementos principales que son el TabWidget y el FrameLayout. El detalle del archivo lo encuentras en la siguiente imagen:
6. Con nuestros elementos listos y creados agregamos a nuestro proyecto las imágenes de los iconos que representaran las funciones de cada una de las 4 pestañas que vamos a utilizar. Para nuestro caso elegimos unos al azar y comunes para mostrarte un ejemplo, pero tu elijes el que mas se acomode a tus necesidades.
Es recomendable tener 2 imágenes para cada una de las pestañas, una que sea la que se muestra cuando se ha seleccionado la pestaña y otra igual pero que represente que la pestaña no esta seleccionada. En mi caso use una imagen a color para representar la pestaña seleccionada y la misma imagen pero de color gris para mostrar cuando la pestaña NO esta seleccionada. Tu puedes colocar la que quieras, pero te recomendamos que sean imágenes representativas y que constituyan la esencia del programa y en lo posible en archivos .png para que se transmita las transparencias; las imágenes con sus respectivos nombres representativos que utilice para este proyecto te las muestro a continuación:
7. Pero como hacemos para mostrar una imagen cuando pulse sobre la pestaña correspondiente y otra cuando no este activa la pestaña? Lo que debes haces es crear un recurso, el cual es un archivo .xml que le indique que imagen usar en cada caso. Veamos como debe ser el archivo para la primera imagen:
Aquí en este archivo es la mayor parte conocida por los post publicados anteriormente aquí en Androideity, lo destacable de estas líneas es: android:state_selected=”true” la cual indica que la imagen que se vincula dentro de este <ítem> es la que va a ser la que será mostrada cuando sea pulsada la respectiva pestaña, en nuestro caso muestra el archivo pestana1_color, y por defecto el otro archivo se mostrara cuando la pestaña no se encuentre a la vista del usuario, que para nuestro caso es pestana1_gris. Lo mismo se hace para los demás archivos de la siguiente manera:
Todos estos archivos tanto las imágenes como los recursos, deben ir en la carpeta res/drawable o en mi caso la deje en la res/drawable-mdpi debido a que mi dispositivo que utilizo para probar las aplicaciones tiene una resolución de mediana densidad de pixeles. Así que mi archivo sigue viéndose de la siguiente manera:
8. Para terminar con nuestra aplicación, necesitamos codificar la actividad principal que llamamos MainActivity.class para que haga toda la magia y nos muestre nuestras lindas pestañas en acción; así que vamos por partes explicando:
8.1 En primera instancia te mostramos los importes necesarios para que funcione la aplicación, así como el inicio de la clase principal que extiende a TabActivity y se muestra el layout main.xml que ya mostramos previamente:
8.2 Ahora creamos nuestro TabHost (explicado previamente), asi como un Tab.Spec llamado spec que contendrá las especificaciones de nuestra pestaña a mostrar, también creamos el intent que usaremos para llamar cada una de las 4 actividades que ya creamos, y por ultimo en esta sección llamamos a los recursos que creamos, los cuales son los iconos de las pestañas y sus respectivos .xml:
8.3 Ahora llamamos un nuevo intent que mostrara la respectiva actividad creada, configuramos las características de nuestra pestaña en donde primero ira el nombre que la identifica, después ira el texto que se mostrara encima del icono que llamamos con la función res.getDrawable haciendo referencia al respectivo archivo que ya creamos y finalizando esta línea de código hacemos un setContent(intent) para el previo intent creado.
Pero esto no se mostraría si no le hemos cargado las respectivas especificaciones a nuestro contenedor de tablas y esto lo hacemos con la línea de código tabHost.addTab(spec).
8.4 Las líneas de código anterior debemos repetirlas para cada una de las pestañas que deseemos crear, las cuales en nuestro caso son 4. Así que el código respectivo de las mismas es el siguiente:
9. Terminamos guardando compilando y enviando al emulador o al dispositivo en el cual hacemos las respectivas pruebas y el resultado te lo mostramos en las siguientes imágenes, en una aparecen las pestañas sin imagenes y la siguiente con el proyecto terminado.
Para terminar hemos realizado un video que complementa la explicación y muestra paso a paso como se desarrolla este proyecto:
Espero que te sea de ayuda este tema para tus futuras aplicaciones, espera pronto nuevos temas sobre esta fabulosa plataforma Android.
Nota: Si detectas algún error en el código, en la explicación, escrito o en el video, por favor escríbenos y con mucho gusto la corregimos. Agradecemos tu ayuda.
Nota 2: No te dejamos el código porque queremos que gastes teclado y aprendas escribiendo. Pero si necesitas algún código mostrado en este post, con mucho gusto te lo haré llegar.
Comparte este post
