:: Enseignements :: ESIPE :: E4INFO :: 2013-2014 :: Interface Graphique avec Android ::

Dessin

L'objectif est d'implanter un mini-éditeur de dessin.

Exercice 1 - Dessiner sur une vue

Le but de l'exercice est de manipuler les touch event, de créer son propre composant de vue et de dessiner dessus.

Créer une vue vide nommée fr.upem.touchevent.GraphicsView qui prend tout l'écran. Pour cela, vous allez créer une classe fr.upem.touchevent.GraphicsView qui hérite de View. Puis, vous allez créer un layout XML avec un seul composant (la GraphicsView). Le composant vide sera décrit de la manière suivante dans le XML:
```
<fr.upem.touchevent.GraphicsView android:id="@+id/graphicsview" android:layout_width="match_parent" android:layout_height="match_parent"/>
```
Quelles sont les deux façons d'intercepter un événement de touché sur la vue GraphicsView ?
Faire en sorte qu'à chaque fois que l'utilisateur touche cette vue, un Toast soit affiché avec les coordonnées du point touché. Indice: réimplanter la méthode onTouchEvent
A quoi servent les méthodes onDraw et invalidate d'une vue ?
On souhaite maintenant afficher un cercle à l'endroit où l'utilisateur touche la vue. Ecrire le code dans le cas où l'on utilise un seul doigt (ou le pointeur de souris pour l'émulateur).
Modifier le code pour gérer le cas où l'on utilise plusieurs doigts en même temps.

Exercice 2 - Un mini-éditeur de dessin

On souhaite maintenant implanter un mini-éditeur de dessin, avec lequel on peut insérer des cercles ou des rectangles, soit bleus soit rouges, dans un canvas.

Ecrire un layout XML qui retranscrit l'interface ci-dessous. Noter que la partie à droite correspond à la vue sur laquelle on va dessiner (i.e. une GraphicsView cf. exercice précédent). Indice: penser à utiliser des RadioGroup et des RadioButton.

Ecrire une classe Shape qui contient deux champs: un Path et un entier indiquant une couleur.
Télécharger les classes ShapeModel et ShapeListener. A quoi correspondent-elles?
Faire en sorte que, lorsque l'on touche la GraphicsView, soit dessinée, à l'endroit du touché, une forme définie par les RadioButton sélectionnés (rectangle ou cercle; bleu ou rouge). Pour cela, utiliser les classes ShapeModel et ShapeListener. Nous donnons ci-dessous un exemple de rendu.

Nous souhaitons maintenant limiter à 10 le nombre de formes dessinées. Que faire sans modifier ShapeModel?