17.4.12

Tutorial Android parte 17: TimePicker en Android

Vamos a seguir traduciendo los artículos del blog del sitio de desarrolladores de Android. El código fuente de este ejemplo lo podéis encontrar en el siguiente enlace:

http://developer.android.com/resources/tutorials/views/hello-timepicker.html

En este tutorial vamos a aprender a utilizar el control TimePicker. Este control sirve para que el usuario seleccione una hora de una forma más intuitiva y sencilla.



Tras seleccionar la hora, ésta se almacenará en un TextView.



Creando la aplicación

Abrimos Eclipse y seleccionamos el workspace que queramos (en mi caso yo selecciono C:\Android\workspaces\0001 prueba\V_0_0_0_0).

Para crear un nuevo proyecto:
- Ir a File -> New -> Project.
- Seleccionar un proyecto "Android Project" y pulsar Next.
- Rellenar los campos con los siguientes valores:

Project name: HelloTimePicker
Build target: (El que queráis, yo en este caso he marcado...) Android 1.5
Application name: Hello, TimePicker!
Package name: com.example.hellotimepicker
Create Activity: HelloTimePicker

- Hacer click en Finish.

Abrimos el fichero res/layout/main.xml e insertamos el siguiente código:



El TextView será el que almacenará el valor de la hora seleccionada. El botón será el que lanzará el TimePicker cuando se pulse.

Agregamos todas las librerías que vamos a necesitar en la clase principal HelloTimePicker.java:

import android.widget.Button;
import android.widget.TextView;
import java.util.Calendar;
import android.view.View;
import android.app.TimePickerDialog;
import android.widget.TimePicker;
import android.app.Dialog;

Para poder agregar ahora las siguientes variables a la misma clase:

private TextView mTimeDisplay;
private Button mPickTime;
private int mHour;
private int mMinute;
static final int TIME_DIALOG_ID = 0;

Ahora vamos a modificar el código OnCreate de la siguiente forma:



En el método OnCreate, hacemos que la variable mTimeDisplay haga referencia al TextView donde se mostrará la hora. Y la variable mPickTime haga referencia al botón que se pulsará para lanzar el TimePicker. También indicamos que al pulsarse se llamará a showDialog() pasándole un identificador para identificar el TimePicker que se quiere utilizar. Y por último se lee la hora actual y se guarda en las variables mHour y mMinute para mostrarlas en el método updateDisplay() en el TextView.

Ahora vamos a añadir el código del método updateDisplay() que básicamente lee los valores de la hora almacenados en nHour y mMinute y los guarda en el TextView en formato hh:mm.

El método pad lo único que hace es poner un cero por la izquierda si la hora o los minutos son menores de 10.



A continuación, agregamos a la clase un TimePickerDialog.OnTimeSetListener que se llamará cuando el usuario seleccione la hora en el TiemPickerDialog. Al hacerlo, se actualizarán los valores de las variables mHour y mMinute con el valor seleccionado por el usuario y se llamará a updateDisplay() para que se actualice el valor del TextView.



Y a continuación, definimos lo que se hará cuando se llame a showDialog agregando el método onCreateDialog. Cuando se llame a showDialog y se pase el identificador de nuestro TimePicker, se abrirá un nuevo TimePickerDialog al que se le pasará el objeto mTimeSetListerner que acabamos de crear, la variable mHour y mMinute. El último parámetro (false) es para indicar si el formato es de 24 horas o no (cuenta solo hasta 12).



Pues ya está el código. Lanzamos la aplicación desde el menú Run -> opción Run:



Si pulsamos el botón nos permitirá saber la hora:



Al pulsar en Set se actualiza el TextView.




El código fuente del ejemplo podéis descargároslo de la siguiente dirección en nuestro repositorio de código:

Código fuente tutorial Android Parte 17.


Tutorial desarrollado por Grupo Libre y Extremo (Talavera de la Reina - Toledo - Spain).

2 comments:

  1. Enhorabuena por tu tutorial! no podría estar mejor explicado! :)

    ReplyDelete
  2. como cambio el onCreateDialog si quiero usar el timepicker y el datepicker

    ReplyDelete