Como nos dicen en Android Labs, para crear una interfaz con pestañas o tabs, necesitaremos usar un TabHost y un TabWidget. El TabHost será el nodo raíz de nuestro layout, que tendrá el TabWidget para mostrar las pestañas, y un FrameLayout para enseñar el contenido de las pestañas.
Existen dos formas de implementar un IU con pestañas: en una sola Activity o en una Activity por pestaña. Este último método es el más indicado ya que tendremos separadas las funcionalidades, y lo utilizaremos para este ejemplo.
Los pasos resumidos son:
- Crear el proyecto con Eclipse indicando la Activity HelloTabWidget
- Crear 3 Activity's más: ArtistsActivity, AlbumsActivity y SongsActivity. Poniendo en cada método onCreate de las 3 Activity un TextView identificativo
- Para cada pestaña necesitamos dos imágenes, una para cuando está activada y otra para cuando no (en la página de Android Labs sólo vemos la imagen del micro, podemos coger otras para realizar el ejemplo). Además necesitamos un fichero XML, que hace de selector para realizar precisamente esa acción. Tanto las imágenes como los ficheros XML se guardan en res/drawable
- Crear o copiar el contenido del fichero main.xml
- Modificar la Activity principal, HelloTabWidget, para que herede de TabActivity en vez de Activity
- Copiar todo el código del método onCreate
- Cambiar el tema de la aplicación
- Ejecutar aplicación
Los puntos clave de este ejemplo (bajo mi punto de vista) son:
- El selector: La manera de mostrar una imagen para cuando la pestaña está activa o no se realiza en un fichero XML, y un fichero por Activity. El tag es <selector> y dentro muestra los items que puede mostrar. Con el atributo android:state_selected="true" indicamos cuál es la imagen/item a mostrar cuando la pestaña está activa. Este recurso (fichero XML), se lo tenemos que pasar al método setIndicator a cada Tab.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- When selected, use grey -->
<item android:drawable="@drawable/ic_tab_artists_grey" android:state_selected="true" />
<!-- When not selected, use white-->
<item android:drawable="@drawable/ic_tab_artists_white" />
</selector>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- When selected, use grey -->
<item android:drawable="@drawable/ic_tab_artists_grey" android:state_selected="true" />
<!-- When not selected, use white-->
<item android:drawable="@drawable/ic_tab_artists_white" />
</selector>
- main.xml: Vemos que la vista empieza y acaba por con el TabHost. Después de indicar el xmlns, id y forma de relleno, vemos un LinearLayout. Dentro de ésto vemos lo importante, un TabWidget y un FrameLayout. El TabWidget ocupa a lo ancho el mismo espacio que su parent, y a lo alto el espacio necesario para mostrarse entero, es decir, el tamaño de la imagen.
- onCreate: Conseguimos los recursos, el TabHost con getTabHost (método específico de la clase TabActivity). Creamos un TabHost.TabSpec, que sirve para indicar las propiedades de una pestaña. Esta variable la vamos reutilizando una vez añadimos una pestaña al TabHost con addTab(spec).
- Themes: En el ejemplo lo único que hace este tema es no mostrar el título de la aplicación. Pero se pueden hacer muchísimas más cosas. Más info aquí.
- En el código del ejemplo hay un fallo, en el método onCreate indica mTabHost.addTab(spec); cuando quiere decir tabHost.addTab(spec);.
- No os olvidéis de cada pestaña tiene dos imágenes y un XML (selector), y que desde el XML se hace referencia al recurso de la imagen (<item android:drawable="@drawable/nombre_imagen"/>). Y que todo va dentro del directorio res/drawable/.
- Y tampoco os olvidéis de incluir las 3 Activity en el fichero main.xml.
No hay comentarios:
Publicar un comentario