Implementar un reloj contador descendente en Android

Anuncio:

Hola! Hoy os traemos un nuevo post sobre desarrollo Android, en esta ocasión vamos a ver cómo se implementa un reloj contador descendente.

Para este caso no tenemos una implementación «oficial» gráfica, así que nos toca implementarlo a nosotros.

Para comenzar, vamos a ver cómo quedaría al final, por supuesto, vosotros ajustais los estilos a vuestro gusto 🙂

Bien, una vez visto el resultado, sigamos con el XML de la vista:

Básicamente, tendríamos un TextView para los minutos y segundos, y uno para el carácter ‘:’ de separación.

Ahora vamos con la parte Java, que serán, principalmente 2 clases:

Actividad MuestraContador, encargada de, como su nombre indica, mostrar el contador:

public class MuestraContador extends AppCompatActivity {
  TextView minutes;
  TextView seconds;

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    ..
    minutes = (TextView) findViewById(R.id.layoutTemporizador).findViewById(R.id.textViewMinuteCountdown);
    seconds = (TextView) findViewById(R.id.layoutTemporizador).findViewById(R.id.textViewSecondCountdown);

    new CountDown(120000, 1000, getApplicationContext(), this).getTimer().start();
  }

  public void updateMinutes(String min) {
    minutes.setText(min);
  }

  public void updateSeconds(String sec) {
    seconds.setText(sec);
  }
...
}

En esta clase, inicializamos el contador y creamos los métodos encargados de ir cambiando el valor de los TextView.

Ahora, vamos con la clase CuentaAtras:

public class CuentaAtras {

    CountDownTimer timer;

    public CountDown(final long milliseconds, long interval, final Context context, final UpdateTimer activity){

        activity.updateMinutes(String.valueOf(Utils.milisecondsToMinutes(milliseconds)));
        activity.updateSeconds(String.valueOf(Utils.milisecondsToSeconds(milliseconds)));

        timer = new CountDownTimer(milliseconds, interval) {

            public void onTick(long millisUntilFinished) {

                String minutesLeft = String.valueOf(Utils.milisecondsToMinutes(millisUntilFinished));
                String secondsLeft = String.valueOf(Utils.milisecondsToSeconds(millisUntilFinished));

                activity.updateMinutes(minutesLeft.length() < 2 ? "0" + minutesLeft : minutesLeft);
                activity.updateSeconds(secondsLeft.length() < 2 ? "0" + secondsLeft : secondsLeft);
            }

            public void onFinish() {
                activity.updateMinutes("0");
                activity.updateSeconds("00");
                Toast.makeText(context, R.string.chrono_completed, Toast.LENGTH_LONG).show();
            }
        };
    }

    public CountDownTimer getTimer(){
        return timer;
    }

}

El método onTick será llamado cada vez que el contador cambie de estado, le hemos especificado 120000 milisegundos (2 minutos) y que decremente en 1000 milisegundos (1 segundo) cada vez. El método onFinish será llamado cuando lleguemos a 0.

Para que quede algo más bonito, se le añade un "0" a los números en caso de que sean menos de 10, en vez de "0:9" tendríamos "00:09".

Las funciones millisecondsToMinutes y millisecondsToSeconds se definen como:

public class Utils {

    static public int milisecondsToMinutes (long miliseconds){
        return (int) ((miliseconds / (1000*60)) % 60);
    }

    static public int milisecondsToSeconds (long miliseconds){
        return (int) ((miliseconds / 1000) % 60);
    }

}

Este código está hecho a modo de ejemplo, lo ideal sería que la clase MuestraContador implementase una interfaz con los métodos para actualizar los TextView, así pordríamos reutilizar el componente mucho más.

Espero que os sea de ayuda.

Saludos!

• Android