Forums GAMERGEN

Dans la lancée, je vous fait encore un petit tuto pour créer une fonctionnalité sympa : un compteur tactile (augmentation/diminution de la valeur en posant puis déplaçant son doigt vers le haut/bas sur toute la surface de l'écran).

Voici une vidéo vous montrant le principe, sachant que dans celle-ci il est question de 4 compteurs différents côtes à côtes :
http://www.elviish.eu/Tutos/compteur.avi

Je vous laisse mettre vous-même en place le reste de l'application, positionner le textview, ...
Nous allons ici nous concentrer sur l'algorithme implémentant la fonctionnalité, rien de plus.
Attention ! Le layout principal, conteneur du TextView, doit OBLIGATOIREMENT être défini sur tout l'affichage, en choisissant l'attribut fill_parent pour la lageur et la hauteur !
Exemple :

Code: Select All Code

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
         <TextView
            android:id="@+id/tv"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            >
         </TextView>
</LinearLayout>


Etape 0 : Préparer ses variables

Code: Select All Code

public static final int valeurMax = 10;
// L'augmentation/diminution maximale en un mouvement continu.
// Plus cette valeur est haute, plus sensible sera la modification de la valeur.
// Ici j'ai choisi 10, la valeur que j'utilise dans mon application.

private float lastCoordY;
// Point de repère vertical sauvegardé lors du premier contact entre le doigt et l'écran

private int currentValue = 0;
// Valeur qui sera modifiée lors du mouvement du doigt, puis placée visible. A vous de choisir la valeur de départ, ici 0;

TextView tv;
// TextView qui servira a afficher la valeur actuelle du compteur
// A vous de le lier a votre textview, dans le onCreate() par exemple

private float screen_height = getWindowManager().getDefaultDisplay().getHeight();
// La hauteur en pixels de l'écran


Etape 1 : Définir la fonction chargée des évènements sur l'écran tactile

Code: Select All Code

public boolean onTouchEvent(MotionEvent e)
{
     switch(e.getAction())
     {
      case MotionEvent.ACTION_DOWN :
      // Evènement généré lors de l'appui sur l'écran
           break;
     case MotionEvent.ACTION_MOVE :
     // Evènement généré lors du déplacement du doigt sur l'écran
           break;
     case MotionEvent.ACTION_UP :
     // Evènement généré lors du retrait du doigt de l'écran
     // Ne sera pas utilisé dans ce tuto
           break;
     }

      return super.onTouchEvent(e);
}


Etape 2 : remplir la fonction

Code: Select All Code

case MotionEvent.ACTION_DOWN :
// Evènement généré lors de l'appui sur l'écran
      lastCoordY = e.getY();
      // On sauvegarde la coordonnée verticales du doigt sur l'écran, qui servira de repère "0" lors du mouvement
      break;

case MotionEvent.ACTION_MOVE :
// Evènement généré lors du déplacement du doigt sur l'écran
    float newCoordY = e.getY();
    // Si le déplacement se fait de bas en haut
    if (lastCoordY > newCoordY && lastCoordY - newCoordY >= screen_height / valeurMax)
     {
          currentValue ++; // On augmente la valeur du compteur
          lastCoordY = newCoordY; // Et on met notre point "0" a jour
     }
     // Sinon si le déplacement se fait de haut en bas
     else if (lastCoordY < newCoordY && newCoordY - lastCoordY >= screen_height / valeurMax)
     {
          currentValue --; // On diminue la valeur du compteur
          lastCoordY = newCoordY; // Et on met notre point "0" a jour
     }
     break;


Etape 3 : mettre à jour l'affichage, avec de la couleur suivant la valeur !
A insérer à la suite du code précédent, dans la même fonction, après la fin du switch ! De cette manière l'affichage sera mis à jour en temps réel, et non lors du retrait du doigt de l'écran (meilleure visualisation).

Code: Select All Code

int c;
// J'ai choisi ici d'afficher en vert la valeur si elle est supérieure à 10, en jaune si elle est supérieure à 5 et inférieure à 10 et en rouge sinon.
if (currentValue > 10) c = Color.GREEN;
else if (currentValue > 5) c = Color.YELLOW;
else c = Color.RED;
tv.setTextColor(c);
// Puis on met à jour l'affichage de la valeur avec la nouvelle valeur
tv.setText(currentValue + "");


J'espère que vous aurez apprécié ce tuto, si vous avez des commentaires ou des problèmes avec, je reste à votre disposition.

Le code source complet du compteur montré en exemple est disponible ici :
http://www.elviish.eu/Tutos/compteur.java

Merci,

Je vais tester de ce pas je te tiens au courant

Ok ^^

Si tu as une question / problème, hésites pas.

Bonjour, quel version de l'api utilise tu?

Ce code ne marche pas sur la version 2.2.

A l'époque je l'ai fait sur 1.5, mais il n'y a pas de raisons qu'il ne fonctionne pas sous 2.2.

Es-tu sûr d'avoir bien crée la structure de l'application autour ?

Par exemple est-ce que ton layout principal (qui contient ton textview) est bien déclaré comme fill_parent sur les 2 attributs hauteur et largeur ?
Puisque l'evenement de touch ne fonctionne que sur la surface du layout qui contient le textview. Si celui-ci est en wrap_content, alors seul les mouvements ne dépassant pas le texte, soit une toute petite surface, seront pris en compte.

Je vais éditer le tuto pour que cela soit plus clair.

C'est le R.id qui coince, il n'est plus reconnu!

C'est à dire ? Tu peux copier coller le message d'erreur s'il te plait ?

"R.id cannot be resolved". Eclipse ne le reconnait plus

Ah ok je vois. Non c'est normal.

R.id rassemble tout les identifiants que tu as crées.
Par exemple :

Code: Select All Code

         <TextView
            android:id="@+id/player1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            >
         </TextView>


Ici j'ai crée un TextView avec comme id player1. Cet id est rajouté dans R.id.
Tu ne peux accéder a R.id, par contre tu peux accéder a R.id.player1.

Tu as du oublier un bout quelque part ^^

Pour recuperer ton TextView dans ton code java :

Code: Select All Code

tv = (TextView) findViewById(R.id.player1);


Un peu sur le meme principe : Counter Axe Android

Code: Select All Code

package com.french.koala.counteraxeandroid;

import android.app.Activity;
import android.os.Bundle;
import android.view.MotionEvent;
import android.widget.TextView;

public class CounterAxeAndroid extends Activity {
   
   private int counter = 0;
   private TextView textViewCounter, textViewMessage;
   /** Called when the activity is first created. */
   @Override
   public void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.main);
      this.textViewCounter = (TextView) findViewById(R.id.counter);
      this.textViewCounter.setText(""+this.counter);
      this.textViewCounter.setTextSize(100);
      this.textViewMessage = (TextView) findViewById(R.id.message);
      this.textViewMessage.setTextSize(75);
   }

   @Override
   public boolean onTouchEvent(MotionEvent event) {
      switch (event.getAction()) {
      case MotionEvent.ACTION_DOWN:
         this.counter++;
         this.textViewCounter.setText(""+this.counter);
         if(this.counter == 1) {
            this.textViewMessage.setText("1 Smile");
         }
         else if(this.counter == 10) {
            this.textViewMessage.setText("Kid");
         }
         else if(this.counter == 20) {
            this.textViewMessage.setText("Small lover");
         }
         else if(this.counter == 30) {
            this.textViewMessage.setText("Warrior");
         }
         else if(this.counter == 40) {
            this.textViewMessage.setTextSize(20);
            this.textViewMessage.setText("Why don't try to chat up girls now ??");
         }
         else {
            this.textViewMessage.setText(null);
         }
         break;
      }
      return super.onTouchEvent(event);
   }
}

Code: Select All Code

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <TextView
        android:id="@+id/counter"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:layout_weight="1" />
    <TextView
        android:id="@+id/message"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:layout_weight="1" />
</LinearLayout>

Bonne nuit les petits malins