En este tutorial vamos a crear una aplicación más compleja, la aplicación va a consistir en crear un contador de cafés, para ello vamos a necesitar indicarle el tiempo que vamos a tardar en tomarnos el café, tendremos que mostrar los café tomados y un botón iniciar para que empiece el contador a contar marcha atrás.
También me ha parecido interesante añadirle un contador que empiece desde -10 y luego muestre el exceso consumido.
En esta aplicación vas a aprender:
- A manejar un contador de tiempo (CountDownTimer)
Espero que le guste, para cualquier error o cualquier duda que usted tenga no dude en comentar.
¡ Saludos !
Enlaces de interés:
Puede descargar si lo desea el código fuente de este proyecto.
Aquí podrás obtener ayuda de como usar la clase CountDownTimer en la guía para usuarios oficial de Android.
Pasos a seguir:
1. Crea la interfaz gráfica como mejor te parezca, más adelante te dejo un ejemplo de interfaz para que te puedas guiar. Recuerda que esta interfaz será una actividad puesto que dentro de la actividad tendremos que programar todas las funciones
Elementos más importantes de la interfaz:
- TextView
- LinearLayout
- Button
El código de esta interfaz se muestra a continuación:
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" > <LinearLayout android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="wrap_content" android:padding="10dip"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="20dip" android:text="Brews: " /> <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="None" android:gravity="right" android:textSize="20dip" android:id="@+id/brew_count_label" /> </LinearLayout> <LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="horizontal" > <TextView android:id="@+id/textView1" android:layout_width="144dp" android:layout_height="wrap_content" android:text="Brews que faltan:" android:textSize="20dip" /> <TextView android:id="@+id/TxtVRestante" android:layout_width="fill_parent" android:layout_height="42dp" android:gravity="right" android:text="None" android:textSize="20dip" /> </LinearLayout> <LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="0.91" android:gravity="center" android:orientation="horizontal" android:padding="10dip" > <Button android:id="@+id/brew_time_down" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="-" android:textSize="40dip" /> <TextView android:id="@+id/brew_time" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="0:00" android:textSize="40dip" android:padding="10dip" /> <Button android:id="@+id/brew_time_up" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="+" android:textSize="40dip" /> </LinearLayout> <Button android:id="@+id/brew_start" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_gravity="bottom" android:text="Start" /> </LinearLayout>
3. Ahora vamos a programar, la parte más importante de esta aplicación, para ello declare todos los campos más importante en la parte superior de la clase, para tener una mayor comodidad, puesto que en los próximos proyecto que hagamos serán más complejos es necesario ir adquiriendo una forma de programar que nos facilite el entendimiento del código cuando este sea muy extenso.
public class BrewClockActivity extends Activity implements OnClickListener { // CAMPOS ///////////////////////////////////////////////////////////////// protected Button brewAddTime; protected Button brewDecreaseTime; protected Button startBrew; protected TextView brewCountLabel; protected TextView brewTimeLabel; protected TextView txtCuentAtras; protected int brewTime = 3; protected CountDownTimer brewCountDownTimer; protected int brewCount = 0; protected int cuentaAtras = -10; protected boolean isBrewing = false; // FIN CAMPOS ///////////////////////////////////////////////////////////////////
4. Establecemos las propiedades para acceder a los campos.
public TextView getTxtCuentAtras() { return txtCuentAtras; } public int getCuentaAtras() { return cuentaAtras; } public void setCuentaAtras(int cuentaAtras) { this.cuentaAtras = cuentaAtras; txtCuentAtras.setText(String.valueOf(cuentaAtras)); }
5. En el método onCreate damos memoria a los campos creados en la clase.
/** * Se crea cuando se inicia la actividad */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); // INICIALIZACIÓN DE CAMPOS //////////////////////////////////////////////// brewAddTime = (Button) findViewById(R.id.brew_time_up); brewDecreaseTime = (Button) findViewById(R.id.brew_time_down); startBrew = (Button) findViewById(R.id.brew_start); brewCountLabel = (TextView) findViewById(R.id.brew_count_label); brewTimeLabel = (TextView) findViewById(R.id.brew_time); txtCuentAtras = (TextView) findViewById(R.id.TxtVRestante); // FIN INICIALIZACIÓN DE CAMPOS //////////////////////////////////////////////
6. Creamos un método con el que podamos mostrar al usuario los minutos que nos pasa el contador en forma de entero.
/** * Muestra los minutos * * @param minutes Los minutos. */ public void setBrewTime(int minutes) { if(isBrewing) return; brewTime = minutes; if(brewTime < 1) brewTime = 1; brewTimeLabel.setText(String.valueOf(brewTime) + "m"); }
7. Creamos un método que muestre al usuario el número de cafés que se ha tomado.
/** * Establece el número de brews que se ha tomado e informa al usuario. * @param count El número de cafés */ public void setBrewCount(int count) { brewCount = count; brewCountLabel.setText(String.valueOf(brewCount)); }
8. Creamos un método para que empiece a contar el contador de tiempo para el café.
/** * Empieza el contador */ public void startBrew() { // Crea un nuevo contador brewCountDownTimer = new CountDownTimer(brewTime * 60 * 1000, 1000) { @Override public void onTick(long millisUntilFinished) { brewTimeLabel.setText(String.valueOf(millisUntilFinished / 1000) + "s"); } @Override public void onFinish() { isBrewing = false; setBrewCount(brewCount + 1); setCuentaAtras(cuentaAtras + 1); brewTimeLabel.setText("Brew Up!"); startBrew.setText("Start"); } }; brewCountDownTimer.start(); startBrew.setText("Stop"); isBrewing = true; }
9. También tenemos que crear un método para finalizar el contador.
/** * Para el contador */ public void stopBrew() { if(brewCountDownTimer != null) brewCountDownTimer.cancel(); isBrewing = false; startBrew.setText("Start"); }
10. Completamos de programar el método onCreate para poder suscribirnos a lo eventos de los botones además de establecer los valores iniciales.
/** * Se crea cuando se inicia la actividad */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); // INICIALIZACIÓN DE CAMPOS //////////////////////////////////////////////// brewAddTime = (Button) findViewById(R.id.brew_time_up); brewDecreaseTime = (Button) findViewById(R.id.brew_time_down); startBrew = (Button) findViewById(R.id.brew_start); brewCountLabel = (TextView) findViewById(R.id.brew_count_label); brewTimeLabel = (TextView) findViewById(R.id.brew_time); txtCuentAtras = (TextView) findViewById(R.id.TxtVRestante); // FIN INICIALIZACIÓN DE CAMPOS ////////////////////////////////////////////// // Subcripción ha eventos brewAddTime.setOnClickListener(this); brewDecreaseTime.setOnClickListener(this); startBrew.setOnClickListener(this); // Establece los valores iniciales setBrewCount(0); setBrewTime(3); setCuentaAtras(-10); }
11. Finalmente terminamos de programar los eventos de los botones.
/** Evento OnClick **/ /* (non-Javadoc) * @see android.view.View.OnClickListener#onClick(android.view.View) */ public void onClick(View v) { if(v == brewAddTime) setBrewTime(brewTime + 1); else if(v == brewDecreaseTime) setBrewTime(brewTime -1); else if(v == startBrew) { if(isBrewing) stopBrew(); else startBrew(); } }
12. Al final todo este código unido quedaría así.
package com.example.brewclock; import android.app.Activity; import android.os.Bundle; import android.os.CountDownTimer; import android.view.View; import android.view.View.OnClickListener; import android.widget.Button; import android.widget.TextView; public class BrewClockActivity extends Activity implements OnClickListener { // CAMPOS ///////////////////////////////////////////////////////////////// protected Button brewAddTime; protected Button brewDecreaseTime; protected Button startBrew; protected TextView brewCountLabel; protected TextView brewTimeLabel; protected TextView txtCuentAtras; protected int brewTime = 3; protected CountDownTimer brewCountDownTimer; protected int brewCount = 0; protected int cuentaAtras = -10; protected boolean isBrewing = false; // FIN CAMPOS /////////////////////////////////////////////////////////////////// public TextView getTxtCuentAtras() { return txtCuentAtras; } public int getCuentaAtras() { return cuentaAtras; } public void setCuentaAtras(int cuentaAtras) { this.cuentaAtras = cuentaAtras; txtCuentAtras.setText(String.valueOf(cuentaAtras)); } // MÉTODOS ///////////////////////////////////////////////////////////////////////////////////////////// /** * Se crea cuando se inicia la actividad */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); // INICIALIZACIÓN DE CAMPOS //////////////////////////////////////////////// brewAddTime = (Button) findViewById(R.id.brew_time_up); brewDecreaseTime = (Button) findViewById(R.id.brew_time_down); startBrew = (Button) findViewById(R.id.brew_start); brewCountLabel = (TextView) findViewById(R.id.brew_count_label); brewTimeLabel = (TextView) findViewById(R.id.brew_time); txtCuentAtras = (TextView) findViewById(R.id.TxtVRestante); // FIN INICIALIZACIÓN DE CAMPOS ////////////////////////////////////////////// // Subcripción ha eventos brewAddTime.setOnClickListener(this); brewDecreaseTime.setOnClickListener(this); startBrew.setOnClickListener(this); // Establece los valores iniciales setBrewCount(0); setBrewTime(3); setCuentaAtras(-10); } /** * Muestra los minutos * * @param minutes Los minutos. */ public void setBrewTime(int minutes) { if(isBrewing) return; brewTime = minutes; if(brewTime < 1) brewTime = 1; brewTimeLabel.setText(String.valueOf(brewTime) + "m"); } /** * Establece el número de brews que se ha tomado e informa al usuario. * @param count El número de cafés */ public void setBrewCount(int count) { brewCount = count; brewCountLabel.setText(String.valueOf(brewCount)); } /** * Empieza el contador */ public void startBrew() { // Crea un nuevo contador brewCountDownTimer = new CountDownTimer(brewTime * 60 * 1000, 1000) { @Override public void onTick(long millisUntilFinished) { brewTimeLabel.setText(String.valueOf(millisUntilFinished / 1000) + "s"); } @Override public void onFinish() { isBrewing = false; setBrewCount(brewCount + 1); setCuentaAtras(cuentaAtras + 1); brewTimeLabel.setText("Brew Up!"); startBrew.setText("Start"); } }; brewCountDownTimer.start(); startBrew.setText("Stop"); isBrewing = true; } /** * Para el contador */ public void stopBrew() { if(brewCountDownTimer != null) brewCountDownTimer.cancel(); isBrewing = false; startBrew.setText("Start"); } /** Evento OnClick **/ /* (non-Javadoc) * @see android.view.View.OnClickListener#onClick(android.view.View) */ public void onClick(View v) { if(v == brewAddTime) setBrewTime(brewTime + 1); else if(v == brewDecreaseTime) setBrewTime(brewTime -1); else if(v == startBrew) { if(isBrewing) stopBrew(); else startBrew(); } } }
Para aprender más:
CountDownTimer
Planificar una cuenta atrás hasta un momento en el futuro, con las notificaciones regulares en intervalos a lo largo del tiempo.
Un ejemplo sencillo para que puedas entender mejor su uso:
new CountDownTimer(30000, 1000) { public void onTick(long millisUntilFinished) { mTextField.setText("seconds remaining: " + millisUntilFinished / 1000); } public void onFinish() { mTextField.setText("done!"); } }.start();
FIN
No hay comentarios:
Publicar un comentario