BunjiX

Je commence aujourd’hui une nouvelle catégorie. Je vais tenter de poster assez fréquement des tutoriels Android sur des problématique que je rencontre moi même pour mes développements.

Pour commencer voici une implémentation du widget Chronometer. Ce widget correspond simplement à un Timer.

Voici à quoi va ressemblé le tutoriel de ce jour :

Commençons par le layout xml :

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:orientation="vertical" android:layout_width="fill_parent"
	android:layout_height="fill_parent">

	<Chronometer android:layout_width="wrap_content"
		android:layout_height="wrap_content" android:textSize="40dip"
		android:layout_gravity="center_horizontal" android:id="@+id/chrono" />
	<Button android:id="@+id/Button01" android:layout_height="wrap_content"
		android:text="@string/bt_start" android:layout_width="fill_parent"
		android:layout_marginLeft="50dip" android:layout_marginRight="50dip"
		android:onClick="startChrono" />
	<Button android:id="@+id/Button02" android:layout_height="wrap_content"
		android:text="@string/bt_stop" android:layout_width="fill_parent"
		android:layout_marginLeft="50dip" android:layout_marginRight="50dip"
		android:onClick="stopChrono" />
	<Button android:id="@+id/Button03" android:layout_height="wrap_content"
		android:text="@string/bt_continue" android:layout_width="fill_parent"
		android:layout_marginLeft="50dip" android:layout_marginRight="50dip"
		android:onClick="continueChrono" />
	<Button android:id="@+id/Button04" android:layout_height="wrap_content"
		android:text="@string/bt_reset" android:layout_width="fill_parent"
		android:layout_marginLeft="50dip" android:layout_marginRight="50dip"
		android:onClick="resetChrono" />
</LinearLayout>

Nous avons donc ici 4 boutons (start, stop, continue, reset)  pour le contrôle du widget Chronometer. On peut voir dans ce code l’utilisation du paramètre

android:onClick="startChrono"

(ne s’utilise qu’a partir de Android 1.6) où startChrono est le nom de la fonction qui va être appelé au clic sur le boutton.

Passons maintenant au code java de la classe principale Chronometre qui est une Activity:

public class Chronometre extends Activity implements OnChronometerTickListener {
   @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        ((Chronometer)findViewById(R.id.chrono))
                .setOnChronometerTickListener(this);
    }

Notre activity implémente le listener OnChronometerTickListener qui se déclenche à chaque incrément du chronomètre. Voici l’implémentation de la méthode :

@Override
public void onChronometerTick(Chronometer chronometer) {
	long elapsedTime = SystemClock.elapsedRealtime() - chronometer.getBase();
	int min = (int)(elapsedTime/60000);
	int sec = (int) ((elapsedTime/1000) % 60);
	String time = min<10? "0" + min : String.valueOf(min);
	time += ":";
	time += sec<10? "0" + sec : String.valueOf(sec);
	((Chronometer)findViewById(R.id.chrono)).setText(time);
}

Pour initialiser un chronomètre il faut lui donnée une date/heure T de départ. Nous verrons plus bas comment, mais ce qu’on voit ici c’est que pour récupérer le temps passé (et donc celui à afficher), il faut simplement soustraire la date/heure T de départ avec la date/heure T courante, ce qui s’illustre avec la ligne 3.
Ensuite le reste n’est que simple traitement pour afficher le temps écoulé au format que vous voulez.

Dans notre interface nous avons 4 boutons pour le démarrage, l’arrêt, le reset et le continue, il faut donc implémenter les 4 actions :

startChrono va initialiser le chrono à la date/heure T correspondant au temps passé depuis l’allumage du smartphone – SystemClock.elapsedRealtime() puis le démarrer.

public void startChrono(View target) {
	((Chronometer)findViewById(R.id.chrono))
                .setBase(SystemClock.elapsedRealtime());
	((Chronometer)findViewById(R.id.chrono)).start();
}

Pour stopChrono et continueChrono pas besoin de commentaire je pense.

public void stopChrono(View target) {
	((Chronometer)findViewById(R.id.chrono)).stop();
}

public void continueChrono(View target) {
	((Chronometer)findViewById(R.id.chrono)).start();
}

resetChrono arrete simplement le chrono, et le réinitialise.

public void resetChrono(View target) {
	((Chronometer)findViewById(R.id.chrono)).stop();
	((TextView)findViewById(R.id.chrono)).setText("00:00");
	((Chronometer)findViewById(R.id.chrono))
                .setBase(SystemClock.elapsedRealtime());
}

Code complet de notre Activity :

package com.bunjix.tuto.Chronometer;

import android.app.Activity;
import android.os.Bundle;
import android.os.SystemClock;
import android.view.View;
import android.widget.Chronometer;
import android.widget.TextView;
import android.widget.Chronometer.OnChronometerTickListener;

public class Chronometre extends Activity implements OnChronometerTickListener {
   @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        ((Chronometer)findViewById(R.id.chrono))
                .setOnChronometerTickListener(this);
    }

	@Override
	public void onChronometerTick(Chronometer chronometer) {
		long elapsedTime = SystemClock.elapsedRealtime() - chronometer.getBase();
		int min = (int)(elapsedTime/60000);
		int sec = (int) ((elapsedTime/1000) % 60);
		String time = min<10? "0" + min : String.valueOf(min);
		time += ":";
		time += sec<10? "0" + sec : String.valueOf(sec);
		((Chronometer)findViewById(R.id.chrono)).setText(time);
	}

	public void startChrono(View target) {
		((Chronometer)findViewById(R.id.chrono))
                        .setBase(SystemClock.elapsedRealtime());
		((Chronometer)findViewById(R.id.chrono)).start();
    }
	public void stopChrono(View target) {
		((Chronometer)findViewById(R.id.chrono)).stop();
    }
	public void continueChrono(View target) {
		((Chronometer)findViewById(R.id.chrono)).start();
    }
	public void resetChrono(View target) {
		((Chronometer)findViewById(R.id.chrono)).stop();
		((TextView)findViewById(R.id.chrono)).setText("00:00");
		((Chronometer)findViewById(R.id.chrono))
                        .setBase(SystemClock.elapsedRealtime());
    }
}

Dans le même style ::

1. Développez un splash screen pour vos applications Android