6.8.1.PeAndroid - Actividad Puntuaciones (TabHost)

6.8.1.- Programación en Android – Actividad Puntuaciones (TabHost)

En este capítulo comenzaremos el diseño de la ActividadPuntuaciones y que nos servirá para mostrar los records tanto locales como globales (más adelante). Los datos que mostraremos serán el nombre del jugador, su puntuación y el puesto en el ranking.

Esta pantalla se podría implementar a través de un control TextView formateado adecuadamente, o de un control ListView. En este caso se ha optado por utilizar un control de pestañas para elegir entre los records locales o globales y después un diseño tipo TableLayout.

Diseño del layout

El diseño de nuestra actividad podría ser el siguiente:

Y viendo los componentes con más detalle podría ser algo similar a esto:

Creando el layout

En primer lugar vamos a poner la cabecera de nuestro layout de igual forma que hicimos con los layouts de las actividades de “Menú” y de “Ayuda”, para ello editamos el fichero res/layouts/puntuaciones.xml

Cuando tengamos la cabecera lista, vamos a añadir el control tabHost. Al añadir este control, ya nos crea automáticamente un LinearLayout, un TabWidget y un Framelayout con tres pestañas de tipo LinearLayout.

Como en principio sólo necesitamos dos pestañas, podemos borrar la tercera,

y además vamos a cambiar un poco la disposición.

Borramos las pestañas de tipo LinearLayout (tab1,tab2,tab3), y añadimos un widget de tipo ScrollView, al que llamaremos scrollView_PuntuacionesLocales. Dentro de este ScrollView crearemos un tableLayout, y lo llamaremos tableLayout_PuntuacionesLocales. Después repetiremos estes mismos pasos para añadir otro scrollview y otro tableLayout para las puntuaciones globales: scrollView_PuntuacionesGlobales y tableLayout_PuntuacionesGlobales.

Nota: Al FrameLayout le pondremos el id siguiente: @android:id/tabcontent Esto es así porque si le ponemos otro nos dará excepciones al ejecutarlo. Este identificador es el esperado por el control TabHost y hace referencia a un recurso de android. Si pusieramos @+id/tabcontent, crearíamos el recurso y no es lo que queremos.

A los controles tableLayout_PuntuacionesLocales y tableLayout_PuntuacionesGlobales, les cambiaremos las propiedades siguientes:

Propiedad	Valor
Scrollbars	Vertical
Strech colums	*

Así nos aseguramos de que nuestro layout se pueda desplazar en caso de tener más valores de los que cojan en pantalla. Aunque también podríamos tener un límite de valores que cogieran en la pantalla y no necesitar el control ScrollView.

Añadiendo nuevos recursos

Vamos a añadir los siguientes recursos de tipo string al fichero strings.xml dentro de la carpeta /res/values y /res/values-es, aquí pongo la muestra sólo del español:

Nombre recurso	Valor
strNombreJugador	Jugador
strPosicion	Posición
strPuntuacion	Puntos
strPuntuacionesLocales	Local
strPuntuacionesGlobales	Global
strMensajeEspera	Obteniendo puntuaciones...
strTituloEspera	Cargando...
strSinPuntuaciones	No hay puntuaciones.
puntuaciones (cambiar)	Records (Cambiar valor)

Las puntuaciones para nuestro “juego” algunas veces serán cargadas desde ficheros xml o desde un servidor remoto (internet), pero de momento vamos a crear un par de ficheros xml que contendrán una estructura similar a la que nos proveerían por red: XML.

Crearemos una carpeta llamada xml ( /res/xml ). Y dentro crearemos un fichero xml, al que llamaremos puntuacionesglobales.xml. En este fichero escribiremos lo siguiente:

<?xml version="1.0" encoding="utf-8"?> <puntuaciones> <puntuacion jugador="PrimerJugador" puntuacion="12345" posicion="1" /> <puntuacion jugador="Segundo" puntuacion="12344" posicion="2" /> <puntuacion jugador="3ceroundo" puntuacion="12343" posicion="3" /> <puntuacion jugador="4Segundo" puntuacion="12342" posicion="4" /> <puntuacion jugador="5Segundo" puntuacion="12340" posicion="5" /> <puntuacion jugador="6Segundo" puntuacion="12334" posicion="6" /> <puntuacion jugador="7Segundo" puntuacion="12144" posicion="7" /> <puntuacion jugador="8Segundo" puntuacion="12100" posicion="8" /> <puntuacion jugador="9Segundo" puntuacion="11344" posicion="9" /> <puntuacion jugador="10Segundo" puntuacion="2344" posicion="10" /> </puntuaciones>

También podemos crear otro fichero llamado puntuacioneslocales.xml y poner unos datos similares.

El código en xml de nuestro layout para las puntuaciones (puntuaciones.xml) quedaría así:

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="@drawable/piel_237x397"> <RelativeLayout android:id="@+id/relativeLayout1" android:layout_width="fill_parent" android:layout_height="wrap_content" > <ImageView android:id="@+id/imageView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignBottom="@+id/textView_Puntuaciones" android:adjustViewBounds="true" android:maxHeight="@dimen/dim_Titulo_Menu" android:maxWidth="@dimen/dim_Titulo_Menu" android:scaleType="fitXY" android:src="@drawable/simbolo_correcto" /> <TextView android:id="@+id/textView_Puntuaciones" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_alignParentRight="true" android:gravity="center" android:shadowColor="@color/color_Titulo_Menu_Sombra" android:shadowDx="10.0" android:shadowDy="10.0" android:shadowRadius="3.0" android:text="@string/puntuaciones" android:textColor="@color/color_Titulo_Menu" android:textSize="@dimen/dim_Titulo_Menu" android:textStyle="bold" /> <ImageView android:id="@+id/imageView2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignBottom="@id/textView_Puntuaciones" android:layout_alignParentRight="true" android:adjustViewBounds="true" android:maxHeight="@dimen/dim_Titulo_Menu" android:maxWidth="@dimen/dim_Titulo_Menu" android:scaleType="fitXY" android:src="@drawable/simbolo_incorrecto" /> </RelativeLayout> <TabHost android:id="@+id/tabhost" android:layout_width="fill_parent" android:layout_height="fill_parent" > <LinearLayout android:id="@+id/linearLayout1" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" > <TabWidget android:id="@android:id/tabs" android:layout_width="fill_parent" android:layout_height="wrap_content" > </TabWidget> <FrameLayout android:id="@android:id/tabcontent" android:layout_width="fill_parent" android:layout_height="fill_parent" > <ScrollView android:id="@+id/scrollView_PuntuacionesLocales" android:layout_width="fill_parent" android:layout_height="fill_parent" > <TableLayout android:id="@+id/tableLayout_PuntuacionesLocales" android:layout_width="wrap_content" android:layout_height="fill_parent" android:scrollbars="vertical" android:stretchColumns="*"> </TableLayout> </ScrollView> <ScrollView android:id="@+id/scrollView_PuntuacionesGlobales" android:layout_width="fill_parent" android:layout_height="fill_parent" > <TableLayout android:id="@+id/tableLayout_PuntuacionesGlobales" android:layout_width="fill_parent" android:layout_height="fill_parent" android:scrollbars="vertical" android:stretchColumns="*"> </TableLayout> </ScrollView> </FrameLayout> </LinearLayout> </TabHost> </LinearLayout>

Continuaremos en el siguiente capítulo modificando el código para configurar el control TabHost.

Ver. 1.0 – Revisión