SurfaceView, utilisation simple

La « surfaceview » permet de dessiner sur la totalité de l’écran. La classe SurfaceView est une View qui permet de dessiner des Bitmap à la main à n’importe quel moment du cycle de vie de l’application, en s’affranchissant des contraintes de rafraichissement standard.

Elle n’est pas utilisable avec les fonctions standard de gestion des Views. Il est nécessaire de créer une sous-classe permet d’obtenir les contrôles nécessaires de cette vue.

1°) Création de la class (dans notre exemple EcranDessin),  qui manipulera les dessins à partir de la class SurfaceView :

 public class EcranDessin extends SurfaceView {  
 public EcranDessin(Context context) {  
 super(context);  
 }  
 }  

Comme les dessins sur cet écran peuvent être effectués à partir de n’importe où et n’importe quand, il faut que cette class soit dans un Thread. Il faut que ce Thread puisse réagir aux événements du téléphone (Pause (i.e. si on recoit un appel) et Resume (une fois l’appel terminé). Une manière simple et de la déclarer « Runnable » :

 public class EcranDessin extends SurfaceView implements Runnable{  
 public EcranDessin(Context context) {  
 super(context);  
 }  
 public void run() {  
 }  
 public void pause() {  
 }  
 public void resume() {  
 }  
 }  

Dans l’activité principale il faut définir une vue de type class view :

 public class EcranDessin extends SurfaceView implements Runnable{  
 public EcranDessin(Context context) {  
 super(context);  
 }  
 public class MainActivity extends Activity {  
 //-- Définition d'une vue v de type EcranDessin  
 EcranDessin v;  
 @Override  
 protected void onCreate(Bundle savedInstanceState) {  
 super.onCreate(savedInstanceState);  
 //-- Création d'une view à partir de la Class SurfaceView  
 v = new EcranDessin(this);  
 //-- Indique à l'activité d'utiliser la view v  
 setContentView(v);  
 }  

Dans l’activité principale, ajout des fonctions OnPaud et OnResume et attribution des actions correspondantes de la vue :

 @Override  
 protected void onPause() {  
 super.onPause();  
 v.pause();  
 }  
 @Override  
 protected void onResume() {  
 super.onResume();  
 v.resume();  
 }  

Gestion des exceptions et de la mécanique d’appel :

 public class EcranDessin extends SurfaceView implements Runnable{  
 //--  
 Thread t = null;  
 //-- Déclaration du "Holder" utile pour les manipulations  
 SurfaceHolder holder;  
 //-- Drapeau de contrôle  
 boolean isItOk = false;  
 public EcranDessin(Context context) {  
 super(context);  
 //-- lancement du Holder  
 holder = getHolder();  
 }  
 public void run() {  
 if (isItOk==true) {  
 //-- On peut dessiner  
 }  
 }  
 public void pause() {  
 //-- Zone de dessin indisponible  
 isItOk=false;  
 //-- Tant que on est en Pause  
 while (true) {  
 try {  
 t.join(); //--tente de relancer le Thread  
 }  
 catch (InterruptedException e)  
 {e.printStackTrace();}  
 break;  
 }  
 t=null;  
 }  
 public void resume() {  
 //-- Zone de deessin disponible  
 isItOk=true;  
 //-- On peut dessiner, donc on créé un Tread pour dessiner !  
 t = new Thread(this); //-- This appele ici la method run() de la class  
 t.start();  
 }  
 }  

2°) Implémentation d’une zone de dessin (canevas) :

           public void run() {            
           while (isItOk==true) {  
                //-- On peut dessiner si le holder est disponible  
                if (!holder.getSurface().isValid())  
                  continue;  
                //-- Définition d'un canevas, et veroullage le temps que l'on dessine dessus  
                Canvas c = holder.lockCanvas();  
                c.drawARGB(255, 150, 150, 10); //-- Remplissage du fond  
                holder.unlockCanvasAndPost(c); //-- Libération du dessin  
           }  
           }  

3°) Pour placer un BitMap :

On déclare une variable : Bitmap Bille;

Puis on l’initialise avec une ressource de l’application : Bille = BitmapFactory.decodeResource(getResources(),R.drawable.bille);

Enfin, on le place sur le canevas : c.drawBitmap(Bille, x – (Bille.getWidth()/2), y – (Bille.getHeight()/2), null);

Pour une interaction avec l’appui sur écran, on utilise la fonction OnTouch :

      @Override  
      public boolean onTouch(View v, MotionEvent me) {  
           //-- Récupération des coordonnées de l'endroit de l'écran touché en fonction de l'événement  
           try {  
                Thread.sleep(50); //-- Pour laisser un peu de temps...  
           } catch (InterruptedException e) {  
                e.printStackTrace();  
           }  
           switch (me.getAction())  
           {  
            case MotionEvent.ACTION_DOWN :  
                     x = me.getX();  
                     y = me.getY();  
                   break;  
            case MotionEvent.ACTION_UP :  
                     x = me.getX();  
                     y = me.getY();  
                 break;  
            case MotionEvent.ACTION_MOVE :  
                     x = me.getX();  
                     y = me.getY();  
                 break;  
           }            
           return true;  
      }  

4°) Le code complet de l’application est accessible ici