Forums GAMERGEN

[Viish]

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

[bajam]

Merci,

Je vais tester de ce pas je te tiens au courant

[Viish]

Ok ^^

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

[FrenchKoala]

Bonjour, quel version de l'api utilise tu?

Ce code ne marche pas sur la version 2.2.

[Viish]

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.

[FrenchKoala]

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

[Viish]

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

[FrenchKoala]

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

[Viish]

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);


[FrenchKoala]

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