7.0.1.-
Programación en Android – Actividad Juego (II) –
Diseño del layout.
Tras una breve pausa vamos a
continuar con nuestra actividad Juego. Anteriormente habíamos
creado una clase para realizar las preguntas (o sus enunciados),
ahora veremos el diseño de nuestra actividad.
Objetivo:
El objetivo del diseño de
nuestra actividad es el de mostrar un contador de tiempo, así
como una serie de preguntas que se irán alternando a medida
que el usuario pulse en los botones correspondientes de verdadero o
falso.
Diseño
El esquema de nuestra actividad y su
vista final sería el siguiente:
Y visto con un poco más de
detalle:
Como se puede observar, no es un
layout nada complicado, pero también podemos observar que
hemos introducido dos widgets nuevos: un Chronometer y
un TextSwitcher, hablaremos
de los dos con más detenimiento más adelante, de
momento continuaremos configurando nuestro layout.
Añadiendo
recursos
Al
igual que con todo nuevo layout, en este también debemos de
añadir nuevos recursos, vamos a verlos:
Recursos
de tipo String:
Recurso
|
Valor
|
tl_tiempo
|
Tiempo:
|
tl_NoHayMasPreguntas
|
-
FIN -
|
tl_Pregunta
|
Pregunta:
|
formatoTiempoActualJuego
|
kk:mm:ss
|
formatoTiempoActualJuegoCorto
|
mm:ss
|
formatoTiempoActualJuegoSegundos
|
ss
|
Recursos
de tipo Dimension:
Recurso
|
Valor
|
Descripción
|
dim_BotonJuegoCorrectoI
|
100dp
|
Tamaño
para los botones.
|
dim_Texto_Pregunta
|
30dp
|
Tamaño
para el texto de la pregunta
|
dim_Texto_TiempoActual
|
30dp
|
Tamaño
para el texto del cronómetro.
|
dim_Texto_Tiempo
|
20dp
|
Tamaño
para el TextLabel de "Tiempo:"
|
dim_Espaciado_Boton_CorrectoI
|
20dp
|
Espaciado
desde el borde al boton.
|
dim_Espaciado_Pregunta
|
30dp
|
Espaciado
a la pregunta.(Superior)
|
dim_TL_Pregunta
|
20dp
|
Tamaño
para el TextLabel "Pregunta:"
|
Recursos
de tipo Color:
Recurso
|
Valor
|
color_Texto_TiempoActual
|
#0FF
|
color_TL_Tiempo
|
#0F0
|
color_Texto_Pregunta
|
#FF0
|
color_TL_Pregunta
|
#0F0
|
Con
estos recursos ya podemos comenzar a preparar nuestro layout.
Editando
el Layout
Abrimos el layout de “juego.xml”,
y vamos a añadir recursos:
1-De base utilizaremos un
LinearLayout (LL_Juego):
Propiedad
|
Valor
|
Descripción
|
ID
|
@+id/LL_Juego
|
Identificador.
|
Background
|
@drawable/piel_237x397
|
Imagen
para el fondo.
|
Keep
Screen On
|
true
|
Para
que mantenga la pantalla encendida.
|
Layout
height
|
fill_parent
|
Alto.
|
Layout
width
|
fill_parent
|
Ancho.
|
2-Añadimos al layout LL_Juego
lo siguiente: un TextView (TV_Tiempo), un widget de cronómetro
-Chronometer- (CR_Cronometro) y un
RelativeLayout (RL_Juego)
TextView
|
||
Propiedad
|
Valor
|
Descripción
|
ID
|
@+id/TV_Tiempo
|
Identificador.
|
Gravity
|
Center
|
Alineación.
|
Text
|
@string/tl_Tiempo
|
Texto.
|
Text
Color
|
@color/color_TL_Tiempo
|
Color
|
Text
Size
|
@dimen/dim_Texto_Tiempo
|
Tamaño.
|
Layout
height
|
wrap_content
|
Alto.
|
Layout
width
|
fill_parent
|
Ancho.
|
Chronometer
|
||
Propiedad
|
Valor
|
Descripción
|
ID
|
@+id/CR_Cronometro
|
Identificador.
|
Gravity
|
Center
|
Alineación.
|
Text
|
Texto.
|
|
Text
Color
|
@color/color_Texto_TiempoActual
|
Color
|
Text
Size
|
@dimen/dim_Texto_TiempoActual
|
Tamaño.
|
Layout
height
|
wrap_content
|
Alto.
|
Layout
width
|
fill_parent
|
Ancho.
|
Relative Layout (RL_Juego)
|
||
Propiedad
|
Valor
|
Descripción
|
ID
|
@+id/RL_Juego
|
Identificador.
|
Layout
height
|
match_parent
|
Alto.
|
Layout
width
|
match_parent
|
Ancho.
|
3-A este RelativeLayout
(RL_Juego) le añadiremos lo siguiente: un LinearLayout
(LL_Juego2), un ImageButton (IBOTON_Correcto) y otro
ImageButton (IBOTON_Incorrecto).
Linear Layout (LL_Juego2)
|
||
Propiedad
|
Valor
|
Descripción
|
ID
|
@+id/LL_Juego2
|
Identificador.
|
Orientation
|
Vertical
|
Orientación.
|
Weight
sum
|
100
|
Se
utiliza para repartir el peso de los controles hijos. (como si
fuera el 100%)
|
Layout
height
|
wrap_content
|
Alto.
|
Layout
width
|
match_parent
|
Ancho.
|
ImageButton (IBOTON_Correcto)
|
||
Propiedad
|
Valor
|
Descripción
|
Adjust
View Bounds
|
true
|
|
ID
|
@+id/IBOTON_Correcto
|
Identificador.
|
Max
height
|
@dimen/dim_Boton_JuegoCorrectoI
|
Altura
maxima.
|
Min
height
|
@dimen/dim_Boton_JuegoCorrectoI
|
Altura
mínima.
|
Max
width
|
@dimen/dim_Boton_JuegoCorrectoI
|
Anchura
maxima.
|
Min
width
|
@dimen/dim_Boton_JuegoCorrectoI
|
Anchura
mínima.
|
On
Click
|
onClickBoton_Correcto
|
Método
al que llamar al ser pulsado.
|
ScaleType
|
fitXY
|
Forma
de ajustar el tamaño.
|
Src
|
@drawable/simbolo_correcto
|
Imagen.
|
Layout
align parent bottom
|
true
|
Alineado
abajo.
|
Layout
align parent left
|
true
|
Alineado
Izquierda.
|
Layout
margin bottom
|
@dimen/dim_Espaciado_Boton_CorrectoI
|
Espacio
al margen inferior.
|
Layout
margin left
|
@dimen/dim_Espaciado_Boton_CorrectoI
|
Espacio
al margen izquierdo.
|
Layout
height
|
wrap_content
|
Alto.
|
Layout
width
|
wrap_content
|
Ancho.
|
ImageButton
(IBOTON_Incorrecto)
|
||
Propiedad
|
Valor
|
Descripción
|
Adjust
View Bounds
|
true
|
|
ID
|
@+id/IBOTON_Incorrecto
|
Identificador.
|
Max
height
|
@dimen/dim_Boton_JuegoCorrectoI
|
Altura
maxima.
|
Min
height
|
@dimen/dim_Boton_JuegoCorrectoI
|
Altura
mínima.
|
Max
width
|
@dimen/dim_Boton_JuegoCorrectoI
|
Anchura
maxima.
|
Min
width
|
@dimen/dim_Boton_JuegoCorrectoI
|
Anchura
mínima.
|
On
Click
|
onClickBoton_Incorrecto
|
Método
al que llamar al ser pulsado.
|
ScaleType
|
fitXY
|
Forma
de ajustar el tamaño.
|
Src
|
@drawable/simbolo_incorrecto
|
Imagen.
|
Layout
align parent right
|
true
|
Alineado
a la derecha.
|
Layout
align top
|
@+id/IBOTON_Correcto
|
Alineado
superior a este objeto.
|
Layout
margin bottom
|
@dimen/dim_Espaciado_Boton_CorrectoI
|
Espacio
al margen inferior.
|
Layout
margin right
|
@dimen/dim_Espaciado_Boton_CorrectoI
|
Espacio
al margen derecho.
|
Layout
height
|
wrap_content
|
Alto.
|
Layout
width
|
wrap_content
|
Ancho.
|
4-Al LinearLayout (LL_Juego2)
que hay dentro del RelativeLayout (RL_Juego) le añadiremos
lo siguiente: un control (widget) TextView
(TV_Pregunta), y un TextSwitcher (TS_TextoPregunta).
TextView (TV_Pregunta)
|
||
Propiedad
|
Valor
|
Descripción
|
ID
|
@+id/TV_Pregunta
|
Identificador.
|
Gravity
|
Center
|
Alineación.
|
Text
|
@string/tl_Pregunta
|
Texto.
|
Text
Color
|
@color/color_TL_Pregunta
|
Color
|
Text
Size
|
@dimen/dim_TL_Pregunta
|
Tamaño.
|
Layout
height
|
wrap_content
|
Alto.
|
Layout
width
|
match_parent
|
Ancho.
|
Layout
weight
|
25
|
"Peso"
de esta vista, como al parent le asignamos 100, y a este 25,
estamos indicando que se cogerá el 25% para esta vista.
|
TextSwitcher
(TS_TextoPregunta)
|
||
Propiedad
|
Valor
|
Descripción
|
Animate
First View
|
true
|
Indica
si se aplica la animación a la primera vista.
|
ID
|
@+id/TS_TextoPregunta
|
Identificador.
|
In
animation
|
@anim/desplazamiento_entrada_izquierda
|
Animación
para el texto entrante.
|
Out
animation
|
@anim/desplazamiento_salida_derecha
|
Animación
para el texto saliente.
|
Layout
Gravity
|
Center
|
Alineación
del layout
|
Layout
height
|
wrap_content
|
Alto.
|
Layout
width
|
fill_parent
|
Ancho.
|
Layout
weight
|
75
|
"Peso"
de esta vista, como al parent le asignamos 100, y a este 75,
estamos indicando que se cogerá el 75% para esta vista.
|
TextSwitcher:
El TextSwitcher es
un control que nos permite cambiar el texto realizando una animación
cada vez que se llame al método setText(“...”).
Así le aplicará al texto que ya hay la animación
asignada en “Out animation”, y al texto que acabamos de
establecer (con setText) le aplica la animación indicada en
“In animation”.
Ficheros
de animación:
Dentro de la carpeta res/anim
debemos de crear dos ficheros, que contendrán las
animaciones a aplicar, aquí se indican dos animaciones de
ejemplo, pero podéis experimentar y crear las vuestras
propias. Se pueden utilizar todas las transformaciones y efectos que
a cualquier animación de tipo tween (En caso de duda ver el
capítulo en el que hablábamos de esto: Actividad
Splash).
fichero de animación
de entrada: desplazamiento_entrada_izquierda.xml
|
<?xml
version="1.0"
encoding="utf-8"?>
<translate
xmlns:android="http://schemas.android.com/apk/res/android"
android:fromXDelta="100%p"
android:toXDelta="0%p"
android:duration="@android:integer/config_longAnimTime"/>
|
fichero de animación
de salida: desplazamiento_salida_derecha.xml
|
<?xml
version="1.0"
encoding="utf-8"?>
<translate
xmlns:android="http://schemas.android.com/apk/res/android"
android:fromXDelta="0"
android:toXDelta="-100%p"
android:duration="@android:integer/config_longAnimTime"
/>
|
Un
último recurso
Para que funcione el TextSwitcher,
debemos crear un fichero en la carpeta de layouts, este nuevo layout
será dónde se configure el TextView que
aparecerá. Posteriormente, este layout lo “inflaremos”
y lo asignaremos al TextSwitcher:
Añadimos un nuevo layout, y
por el momento no quitamos la etiqueta de LinearLayout que
añade el Eclipse, ya
que así nos será más fácil poder
configurar el TextView.
Añadimos a este layout un TextView,
y lo configuramos como nos guste, posteriormente lo que haremos será
quitar las referencias al LinearLayout, ya que si no nos provocará
un error de excepción en el programa.
El
código en XML sería así:
vista_ts_textopregunta.xml
|
<?xml
version="1.0"
encoding="utf-8"?>
<!--
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
-->
<TextView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textColor="@color/color_Texto_Pregunta"
android:gravity="center"
android:textSize="@dimen/dim_Texto_Pregunta"/>
<!--
</LinearLayout> -->
<!--HAY
QUE QUITAR LA PARTE DEL LINEAR LAYOUT o PRODUCE UNA EXCEPCIÓN-->
|
Podéis
quitar los comentarios (<!-- … →) ya que los dejé
como ejemplo.
Continuaremos
en el próximo capítulo comenzando a escribir el código
para hacer funcionar la actividad.
Ver.
1.0 – Revisión 24/05/2012
No hay comentarios:
Publicar un comentario