Groupe Entreprenant et Innovateur France Tutoriel 5 Mon Design Android 2D Cours Programmation Mobile Coach Arón HERRERA PONTE E-mail teaching@atipaxinti.comatipaxinti.com - 2011 -
SOMMAIRE 1. Introduction... 3 2. Objectifs... 3 3. Développement... 3 4. Analyse finale du tutoriel en rapport avec les objectifs initiaux... 18 5. Conclusion... 18 6. Bibliographie... 18 Visitez-nous au : www.atipaxinti.com 2
«Mon Design Android 2D» Tutoriel #5 1. Introduction Nous avons le grand plaisir de vous présenter le tutoriel #5, dans ce document nous allons commencer un nouveau chapitre lequel est dédié à l utilisation de la librairie Graphics 2D d Android. Nous implémenterons une application qui utilise des objets 2D comme par exemple: Rectangles, Cercles, Lignes et Arcs, de plus, nous utiliserons des couleurs et des styles pour chaque objet. Il faut dire que dans ce cas, nous n allons pas utiliser le fichier main.xml parce que l interface graphique sera développée en utilisant de code d Android. Ce tutoriel est le début de la programmation 2D sur Android. Nous vous conseillons de bien regarder le contenu de ce tutoriel car il est très intéressant. 2. Objectifs Création d une application en utilisant Android 2D Utilisation de composants : View et Canvas. Modification des propriétés des composants graphiques. Tester l application en utilisant l Android Virtual Device (AVD). 3. Développement Nous allons créer et implémenter notre première application sur Android 3.1. Ouvrir «Eclipse Galileo» Visitez-nous au : www.atipaxinti.com 3
«Mon Design Android 2D» Tutoriel #5 3.2. Sélectionner le dossier «workspace» où nous voulons sauvegarder nos projets. Important : Si nous ne voulons pas regarder autre fois cette fenêtre, nous devons activer avec un CHECK l option : Use this as the deafult and do not ask again. Ensuite, nous allons regarder le processus de démarrage d Eclipse Galileo Visitez-nous au : www.atipaxinti.com 4
«Mon Design Android 2D» Tutoriel #5 Création d un Projet Android sur Eclipse Galileo 3.3. Cliquer le menu «File» et sélectionner l option «New \ Project» 3.4. Sélectionner «Android Project» et cliquer le bouton «Next >» Visitez-nous au : www.atipaxinti.com 5
«Mon Design Android 2D» Tutoriel #5 3.5. Écrire le nom, sélectionner la plateforme et saissir les propriétés du projet. Visitez-nous au : www.atipaxinti.com 6
«Mon Design Android 2D» Tutoriel #5 Important : Cette application n utilise pas le fichier main.xml, nous allons créer l interface graphique en utilisant de code Android. Implémentation du code de l application Android 2D Création de la classe «DrawView.java» 3.6. Clic droit sur l icône du paquet «com.atipaxinti» Clic l option «New» Clic l option «Class» 3.7. Écrire le nom de la classe : «DrawView» et cliquer le bouton «Finish» Visitez-nous au : www.atipaxinti.com 7
3.8. Écrire le code suivant dans la classe «DrawView.java» DrawView.java package com.atipaxinti; import android.content.context; import android.graphics.canvas; import android.graphics.color; import android.graphics.paint; import android.graphics.rectf; import android.view.view; public class DrawView extends View { private Paint paint = new Paint(); private int x; private int y; private int prex; private int prey; private int width; private int height; private int edge; private final int angleini = 0; private final int anglefin = 360; private final int anglefin2 = 45; private RectF mrect; private boolean isinit; public DrawView(Context context) { super(context); isinit = false; } @Override public void ondraw(canvas canvas) { if(!isinit) { width = canvas.getwidth(); height = canvas.getheight(); x = width/2; y = height/2; prex = x; prey = y; edge = 80; } isinit = true; paint.setcolor(color.white); paint.setstyle(paint.style.fill); mrect = new RectF(preX, prey, prex + edge, prey + edge); canvas.drawarc(mrect, angleini, anglefin, true, paint); paint.setcolor(color.white); paint.setstyle(paint.style.stroke); mrect = new RectF(preX, prey, prex + edge, prey + edge); canvas.drawarc(mrect, angleini, anglefin, true, paint); paint.setcolor(color.yellow); paint.setstyle(paint.style.fill); Visitez-nous au : www.atipaxinti.com 8
mrect = new RectF(x, y, x + edge, y + edge); canvas.drawarc(mrect, angleini, anglefin, true, paint); paint.setcolor(color.red); paint.setstyle(paint.style.stroke); mrect = new RectF(x, y, x + edge, y + edge); canvas.drawarc(mrect, angleini, anglefin, true, paint); paint.setcolor(color.white); paint.setstyle(paint.style.fill); mrect = new RectF(x, y, x + edge, y + edge); canvas.drawarc(mrect, angleini, -anglefin2, true, paint); paint.setcolor(color.white); paint.setstyle(paint.style.stroke); mrect = new RectF(x, y, x + edge, y + edge); canvas.drawarc(mrect, angleini, - anglefin2, true, paint); paint.setcolor(color.red); paint.setstyle(paint.style.fill); mrect = new RectF(x+edge/4, y+edge/8, x+edge/4 + edge/4, y+edge/8 + edge/4); canvas.drawarc(mrect, angleini, anglefin, true, paint); paint.setcolor(color.red); paint.setstyle(paint.style.stroke); mrect = new RectF(x+edge/4, y+edge/8, x+edge/4 + edge/4, y+edge/8 + edge/4); canvas.drawarc(mrect, angleini, anglefin, true, paint); } paint.setcolor(color.red); paint.setstyle(paint.style.stroke); canvas.drawline(x+edge/2, y+edge/2, x+edge/2+(int)((edge/2)*math.cos(math.pi/4)), y+edge/2-(int)((edge/2)*math.sin(math.pi/4)),paint); canvas.drawline(x+edge/2, y+edge/2, x+edge, y+edge/2, paint); } 3.9. Il faut ouvrir la clase «StartDraw» et écrire le code suivant : StartDraw.java package com.atipaxinti; import android.app.activity; import android.graphics.color; import android.os.bundle; public class StartDraw extends Activity { private DrawView drawview; @Override public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); drawview = new DrawView(this); drawview.setbackgroundcolor(color.white); Visitez-nous au : www.atipaxinti.com 9
} } setcontentview(drawview); Création d un nouveau Android Virtual Device (AVD) Nous devons créer l émulateur afin d exécuter notre application. 3.10. Cliquer le menu «Windows» et cliquer l option «Android SDK and AVD Manager». Sélectionner l option «Virtual devices» et Cliquer le bouton «New» Visitez-nous au : www.atipaxinti.com 10
3.11. Saissir les données suivantes : Name, Target et Skin Cliquer le bouton «Create AVD», ensuite nous regarderons notre nouveau device : Visitez-nous au : www.atipaxinti.com 11
«Mon Design Android 2D» Tutoriel #5 Configuration du lanceur de l application (Run Configurations ) 3.12. Cliquer sur l icône Nous devons cliquer la petite flèche à droite : Cliquer l option «Run Configurations» Double Clic sur l item «Android Application» Visitez-nous au : www.atipaxinti.com 12
Saissir le nom : «testnew» et Cliquer le bouton «Browse...» pour sélectionner le projet. Visitez-nous au : www.atipaxinti.com 13
Sélectionner le projet : «StartDraw» Sélectionner l onglet «Target» pour choisir l Android Virtual Device avec laquelle nous allons exécuter notre application Visitez-nous au : www.atipaxinti.com 14
Sélectionner «advnew» Android 1.6 (Platform 1.6, API Level 4) et Cliquer le bouton «Apply» pour mettre à jour la configuration Cliquer le bouton «Run» Ensuite, le processus de démarrage de l application commence Visitez-nous au : www.atipaxinti.com 15
L Android Virtual Device est en train de démarrer... Nous regarderons notre nouveau device Visitez-nous au : www.atipaxinti.com 16
Important : Il faut faire clic sur l icône «MENU» pour afficher l application : Et voici notre design Visitez-nous au : www.atipaxinti.com 17
4. Analyse finale du tutoriel en rapport avec les objectifs initiaux Dans ce tutoriel, nous avons utilisé la librairie : «android.graphics» pour créer une application qui affiche la tête du Pacman. Basiquement, nous avons utilisé des rectangles, des arcs et des lignes et aussi des couleurs (Color.RED, Color.YELLOW, Color.WHITE et Color.BLACK) et de styles pour chaque objet (Style.FILL et Syte.STROKE). Par exemple, nous avons utilisé le style FILL pour avoir le background d un cercle et le style STROKE pour afficher que le contour du cercle. Nous avons créé notre design dans la méthode ondraw. Cette méthode appartient à la classe View d Android. La méthode ondraw a un paramètre de type Canvas lequel servira pour stocker les objets 2D que nous voulons afficher. La classe StartDraw créera un objet de type DrawView lequel sera utilisé comme la vue principale de l application. Nous faisons ça grâce au code suivant : setcontentview(drawview) C est-à-dire, notre vue de type «DrawView» sera la vue principale de l application. Ceci est la raison pour laquelle nous n utilisons pas de fichier main.xml. Finalement, nous créons notre Android Virtuel Device (AVD) pour tester notre application et nous créons un nouveau «Run Configuration» pour exécuter l application. 5. Conclusion Cette application montre, de manière simple, la création des objets 2D sur Android. Il suffit de créer une classe qui hérite de la classe android.view et d implémenter la méthode ondraw. Nous vous conseillons de suivre votre passion et de lire les tutoriels suivants. Bravo, Bravo et Bravo!!! 6. Bibliographie http://www.gamingdroid.com/index.php?option=com_content&view=article&id=4:el-canvas-deandroid&catid=8:juegos-2d&itemid=1 http://www.tutorialforandroid.com/2009/06/drawing-with-canvas-in-android.html http://www.helloandroid.com/tutorials/how-use-canvas-your-android-apps-part-1 http://www.helloandroid.com/tutorials/how-use-canvas-your-android-apps-part-2 http://bestsiteinthemultiverse.com/2008/11/android-graphics-example/ Visitez-nous au : www.atipaxinti.com 18