Point sur les Bitmap, Canvas, view, paint et autres objets nécessaires aux dessins.

Version imprimable

Bonjour,

Je débute, autant en java, qu'en Android. Avec plus de 15 ans d'expérience en C et autres langages. Et c'est probablement la source de mes difficultés.
J'apprends par la pratique. Mon sujet d'apprentissage, censé m'apporter quelques bases, est le suivant :
- une première activité, affiche une vue avec des boutons. Une partie de ces boutons fait défiler des textes venant de la ressource string.xml. Une seconde partie génère des valeurs entières, que je stocke dans un tableau d'entier. et enfin un dernier bouton lance une seconde activité, en lui transférant le tableau de données par un intent.
Jusque là, c'est ok, j'ai réussi à faire ce que je voulais.
- Ce que je cherche à faire maintenant, c'est dessiner un graphe dans la vue (layout ? - voir plus bas) de la seconde activité, disons cinq rectangles. Et là je sèche, par manque de compréhension des concepts de base.
Ce que j'ai compris :
- il faut un bitmap, puis un canvas pour dessiner sur le bitmap, et enfin un paint.
Je pensais qu'il suffisait d'enchaîner tout celà dans onCreate. Mais rien ne se dessine.
En cherchant, je trouve que les dessins sont à effectuer dans la méthode de callback onDraw. Plus loin, je trouve : onDraw sera appelée à chaque fois que la vue juge que c'est nécessaire. Si vous voulez indiquer manuellement à la vue qu'elle doit se redessiner le plus vite possible, on peut le faire en utilisant la méthode void invalidate().
Là je ne comprends plus. Ce texte semble dire que les méthodes permettant de dessiner (par exemple c.drawRect(x, y, z, h, p) ou c est un objet de type canvas) sont à appeler dans une méthode qui est exécutée, en gros, lorsque le dessin s'exécute (si j'en crois son nom : onDraw...)
je sents confusément qu'il me manque à mettre en oeuvre un objet de type view. Mais j'ai beau lire et re-lire toutes les docs qui trainent, je ne comprends pas l'articulation / différence entre view et layout.
Quelqu'un peut-il m'expliquer les bases du dessin ? simple, pour commencer. Il ne s'agit pas de la grande artillerie permettant de faire des graphismes animés à grande vitesse à la candy crush. Juste dessiner/afficher des formes simples (lignes, rectangles) à géométrie fixée par des entiers variables, sur l'écran d'une activité.
Ci-dessous mes codes actuels :
Le manifest :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 <?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.co.and.xxxx.atcs" > <application android:allowBackup="true" android:icon="@mipmap/ic_launcher" android:label="@string/app_name" android:supportsRtl="true" android:theme="@style/AppTheme" > <activity android:name=".MainActivity" > <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> <activity android:name=".ResultActivity" > </activity> </application> </manifest>
Le java de l'activité dans lequel j'ai mis le code pour dessiner (un rectangle) :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 package com.co.and.xxxxx.atcs; import android.graphics.Bitmap; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.widget.Toast; import android.content.Intent; import static android.widget.Toast.LENGTH_LONG; import static com.co.and.paludetto.atcs.MainActivity.*; public class ResultActivity extends AppCompatActivity { private String txt; public int notes[] = new int[60]; @Override protected void onCreate(Bundle savedInstanceState) { Intent i = getIntent(); super.onCreate(savedInstanceState); setContentView(R.layout.activity_result_1); notes = i.getIntArrayExtra(MainActivity.NOTES); txt = notes[0]+" "+" "+notes[1]+" "+notes[2]+" "+notes[3]+" "+notes[4]; Toast.makeText(ResultActivity.this, "onCreate", Toast.LENGTH_LONG).show(); Toast.makeText(ResultActivity.this, txt, Toast.LENGTH_LONG).show(); /* c.drawColor(660);*/ Bitmap b = Bitmap.createBitmap(128,128, Bitmap.Config.ARGB_8888); Canvas c = new Canvas(b); Paint p = new Paint(Paint.ANTI_ALIAS_FLAG | Paint.DITHER_FLAG); p.setStyle(Paint.Style.STROKE); /* p.setColor(Color.parseColor("#66666666"));*/ p.setColor(Color.rgb(125, 125, 125)); p.setStrokeWidth(10); c.drawRect(100, 100, 200, 200, p); Toast.makeText(ResultActivity.this, "drawRect", Toast.LENGTH_LONG).show(); } public void onDraw(Canvas c) { Toast.makeText(ResultActivity.this, "onDraw", LENGTH_LONG).show(); Paint p = new Paint(Paint.ANTI_ALIAS_FLAG | Paint.DITHER_FLAG); p.setStyle(Paint.Style.STROKE); /* p.setColor(Color.parseColor("#66666666"));*/ p.setColor(Color.rgb(125, 125, 125)); p.setStrokeWidth(10); c.drawRect(100, 100, 200, 200, p); } }
et le layout de cette activité :
Code:

1 2 3 4 5 6 7 8 9 10 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" android:paddingBottom="@dimen/activity_vertical_margin" tools:context="com.co.and.paludetto.atcs.ResultActivity"> </RelativeLayout>
J'ai pas reproduit code et layout de la première activité qui ne pose à priori pas de problèmes, et qui n'ont aucune adhérence avec le sujet, si j'ai bien compris...

seuls les toasts dans onCreate envoient un texte. Donc onDraw n'est pas exécuté. Et rien ne se dessine sur mon écran tout blanc...

Que manque-t-il ?

Merci d'avance pour votre aide.

Salut,
Je suis pas très doué en explication; J’espère cela t'aideras un peu.

La meilleur méthode (selon moi) et de créer une nouvelle classe qui étend de View :

Code:

public class MyViewCustom extends View

C'est dans cette classe que tu vas aller dessiner tes formes mais avant cela il faut définir les différents constructeurs :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 public MyViewCustom (Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); init(); } public MyViewCustom (Context context, AttributeSet attrs) { super(context, attrs); init(); } public MyViewCustom (Context context) { super(context); init(); }
Il te faudra au minimum un objet Paint que l'on va configurer dans la methode init, et pour l'exemple un object RectF pour définir la zone de dessin.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 private Paint mPaint; private RectF rect; private void init() { rect = new RectF(20, 20, 100,100); mPaint = new Paint(); mPaint.setAntiAlias(true); mPaint.setDither(true); mPaint.setStyle(Paint.Style.STROKE); mPaint.setStrokeJoin(Paint.Join.ROUND); mPaint.setStrokeCap(Paint.Cap.ROUND); mPaint.setStrokeWidth(20); mPaint.setShader(new LinearGradient(0.40f, 0.0f, 100.60f, 100.0f, Color.RED, Color.RED, Shader.TileMode.CLAMP)); }
Ensuite, comme tu l'avais remarqué il faut implémenter la method onDraw qui va dessiner :
Code:

1 2 3 4 5 6 7 @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); canvas.drawOval(rect, mPaint); } }
Voila, tu as maintenant une belle view custom qui dessine ce que tu souhaites !
Il te reste plus cas la placer correctement dans ton layout.xml de ton activité en l'appelant :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 <RelativeLayout xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent"> <le.nom.du.package.MyViewCustom android:id="@+id/maViewCustom" android:layout_width="match_parent" android:layout_height="match_parent"/> </RelativeLayout>
Je t'avoue que je n'ai pas testé le code je le fais de tête; Il se peut qu'il y ai des petites erreurs... Mais, normalement ca devrais te dessiner un rond rouge.

Je te remerçie infiniment. Ton aide m'a débloqué. J'ai fait pas mal de TP et je pense maîtriser assez pour ce que je veux faire.

Par contre j'ai maintenant un autre problème. Les dimensions des objets que je veux dessiner sont calculées à partir de valeur issues de la première activité. J'avais réussis à les transmettre à la seconde activité par un intent, de la façon suivante :

Extraits de code de la première activité :
Code:

1 2 public final static String NOTES = "com.co.and.xxxxx.atcs.MainActivity.NOTES"; public int notePhrase[] = new int[60];
La première activité consiste à valoriser le tableau de 60 entiers.
Puis quelque part ailleurs dans l'activité, en réponse à un clic bouton :
Code:

1 2 3 Intent i = new Intent(MainActivity.this, ResultActivity.class); i.putExtra(NOTES, notePhrase); startActivity(i);
Dans la seconde activité :
Code:

1 2 3 4 5 6 7 public int notes[] = new int[60]; protected void onCreate(Bundle savedInstanceState) { Intent i = getIntent(); super.onCreate(savedInstanceState); setContentView(R.layout.activity_result_1); notes = i.getIntArrayExtra(MainActivity.NOTES); }
me permettait de retrouver mes 60 valeurs dans le tableau notes.

J'ai tenté de déplacer ce code dans la nouvelle classe de gestion de la vue, rajoutée dans la seconde activité grace à ton aide, dans la méthode init(), mais celà ne marche pas. Android studio me dit d'abord qu'il faut rajouter le "static import" qui va bien, puis une fois fait, me dit que getIntent() est "deprecated".... Et là, je sèche...

Comment partager des variables et leur contenu entre deux classes d'une même activité ? J'ai la vague impression que c'est du basique de chez basique, mais je ne trouve pas. Il n'y a pas l'équivalent de "public" entre classes ?

Euh oui, c'est du basic pour le coup :p
Il n'y a pas besoin de variable/classe static normalement (c'est à éviter au maximum).

Dans MaViewCustom, il faut que rajoute une variables note et un getter/setter :
Code:

1 2 3 4 5 6 7 8 private public int notes[] = new int[60]; public int[] getNotes() { return notes; } public void setNotes(int notes[]) { this.notes = notes; }
Il faut que tu récupère ta vue depuis le layout grace à l'id (dans mon exemple au dessus : android:id="@+id/maViewCustom").
Pour cela, dans ton onCreate de l'activité :
Code:

1 2 3 4 5 6 7 8 9 10 11 protected void onCreate(Bundle savedInstanceState) { Intent i = getIntent(); super.onCreate(savedInstanceState); setContentView(R.layout.activity_result_1); notes = i.getIntArrayExtra(MainActivity.NOTES); MaViewCustom maView = (MaViewCustom) findViewById(R.id.maViewCustom); // récupération de MaViewCustom du Layout. maView.setNotes(notes); //La nouvelle variable ajouté dans MaViewCustom sera initialisé avec les valeur de " i.getIntArrayExtra(MainActivity.NOTES) " maView.invalidate(); //ou postInvalidate() qui va demander à la vue de se redessiner }
J'espere que ca répond à ta question.
Je n'ai pas testé non plus, mais tu devrais pas être loin du résultats avec ce code la.

Merci.

Celà ne marche pas en l'état, mais je pense qu'on est pas loin. Il ne doit pas manquer grand chose, ou j'ai pas bien intégré ton code, l'a partie qui précède l'appel à setNotes peut être.

Je reposte mon code ci-dessous. La seule chose que j'ai ajouté, c'est un appel à getNotes dans l'Init de la view. Tu as défini cette méthode, mais elle n'était appelée nulle part. Mais celà ne marche pas mieux.

La définition du layout :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:paddingLeft="5dp"
    android:paddingRight="5dp"
    android:paddingTop="5dp"
    android:paddingBottom="5dp"
    tools:context="com.co.and.xxxxxx.atcs.ResultActivity">
 
    <com.co.and.xxxxxx.atcs.ResultView
        android:id="@+id/maVue"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"/>
 
</RelativeLayout>

Le code de la classe attachée à l'activité :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
package com.co.and.xxxxxx.atcs;
 
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.Toast;
import android.content.Intent;
 
import static android.widget.Toast.LENGTH_LONG;
import static com.co.and.xxxxx.atcs.MainActivity.*;
 
public class ResultActivity extends AppCompatActivity {
 
    private String txt;
    public int notes[] = new int[60];
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
       Intent i = getIntent();
       super.onCreate(savedInstanceState);
       setContentView(R.layout.activity_result_1);
       notes = i.getIntArrayExtra(MainActivity.NOTES);
       txt = notes[0]+" "+" "+notes[1]+" "+notes[2]+" "+notes[3]+" "+notes[4];
       /* Toast.makeText(ResultActivity.this, "onCreate", Toast.LENGTH_LONG).show();*/
       ResultView maView = (ResultView) findViewById(R.id.maVue); 
       maView.setNotes(notes); 
       maView.invalidate();
    }
}

Et le code de la vue :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
package com.co.and.xxxxxx.atcs;
 
import android.content.Context;
import android.content.Intent;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.LinearGradient;
import android.graphics.Paint;
import android.graphics.RectF;
import android.graphics.Shader;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.view.View;
import android.widget.Toast;
 
 
/**
 * Created by xxxxxxon 08/12/15.
 */
public class ResultView extends View {
 
    public ResultView (Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }
 
    public ResultView (Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }
 
    public ResultView (Context context) {
        super(context);
        init();
    }
 
    private Paint monPaint, monPaint2;
    private RectF rect;
    private String txt;
    public int[] notes = new int[60];
 
    private void init() {
 
        notes = getNotes();
        txt = notes[0]+" "+" "+notes[1]+" "+notes[2]+" "+notes[3]+" "+notes[4];
       Toast.makeText(super.getContext(), txt, Toast.LENGTH_LONG).show();
 
        monPaint = new Paint();
        monPaint2 = new Paint();
        monPaint.setAntiAlias(true);
        monPaint.setDither(true);
        monPaint.setStyle(Paint.Style.STROKE);
        monPaint.setStrokeJoin(Paint.Join.ROUND);
        monPaint.setStrokeCap(Paint.Cap.ROUND);
        monPaint.setStrokeWidth(2);
        monPaint.setShader(new LinearGradient(0.40f, 0.0f, 100.60f, 100.0f,
                Color.RED,
                Color.RED,
                Shader.TileMode.CLAMP));
        monPaint2.setAntiAlias(true);
        monPaint2.setDither(true);
        monPaint2.setStyle(Paint.Style.STROKE);
        monPaint2.setStrokeJoin(Paint.Join.ROUND);
        monPaint2.setStrokeCap(Paint.Cap.ROUND);
        monPaint2.setStrokeWidth(2);
        monPaint2.setShader(new LinearGradient(0.40f, 0.0f, 100.60f, 100.0f,
                Color.RED,
                Color.RED,
                Shader.TileMode.CLAMP));
        monPaint2.setStyle(Paint.Style.FILL_AND_STROKE);
 
    }
 
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
       /* Toast.makeText(super.getContext(), "draw", Toast.LENGTH_LONG).show();*/
        int l = getWidth() - 5;
        int h = getHeight() - 5;
        /*Toast.makeText(super.getContext(), l/2+" "+h/2, Toast.LENGTH_LONG).show();*/
        RectF rect = new RectF(5, 5, l, h);
        RectF rect2 = new RectF((l/2) - 50, (h/2) - 50, (l/2) + 50, (h/2) + 50);
        canvas.drawOval(rect, monPaint);
        canvas.drawRect(rect2, monPaint2);
    }
 
    public int[] getNotes() {
        return notes;
    }
 
    public void setNotes(int pnotes[]) {
        this.notes = pnotes;
    }
}

Merci encore pour ton aide

09/12/2015, 09h56
LeBzul
Je n'ai pas compris ce qui ne fonctionnait pas ?

En tout cas, tu as encore quelques lacunes en ce qui concerne le programmation orientée objet.
Les notion de getter/setter sont très importante, et je te conseil de lire quelques tuto (il y en a des centaines) la dessus; C'est simple à comprendre et carrement indispensable.
http://www.tutorialspoint.com/java/j...apsulation.htm

Une autre petite remarque, mettre des Toasts pour debug l'application n'est pas la meilleur méthode, utilise plutôt le logcat avec l'objet Log :
http://developer.android.com/tools/d...ng-studio.html
Code:

1 2 3 txt = notes[0]+" "+" "+notes[1]+" "+notes[2]+" "+notes[3]+" "+notes[4]; Toast.makeText(super.getContext(), txt, Toast.LENGTH_LONG).show();
->
Code:

1 2 3 txt = notes[0]+" "+" "+notes[1]+" "+notes[2]+" "+notes[3]+" "+notes[4]; Log.d("UneClef", "Mon texte : "+txt);
Si pour toi le problème est que ce Toast affiche pleins de 0, c'est normal.
Pour résumer rapidement ce qu'il se passe, voila l'enchainement des choses :

tu crées ta vue et donc passe dans le constructeur :
Code:

1 2 super(context, attrs); init();
Le constructeur appel la methode init() :
Code:

1 2 txt = notes[0]+" "+" "+notes[1]+" "+notes[2]+" "+notes[3]+" "+notes[4]; Toast.makeText(super.getContext(), txt, Toast.LENGTH_LONG).show();
Les valeurs de notes ne sont pas encore initialisé; pleins de 0 s'affiche.

Ensuite, dans ton activité, tu va setter la valeur de note :

Code:

maView.setNotes(notes)

Les valeurs de notes sont maintenant initialisé et la method onDraw est appelé.

Bref ton programme fais exactement ce qu'il est censé faire, le problème viens plus de ta compréhension du code.
Je te conseil vivement d'utiliser le LogCat et de mettre un log dans toutes tes methodes pour que tu puisses suivre/comprendre l'enchainement de tes actions.
09/12/2015, 12h00
mac-gyver

Quelques lacunes... Je pense que le terme est faible.

Effectivement, j'avais mal supposé l'ordre d'enchaînement du code des deux classes. La méthode Init de la classe de la vue est exécuté avant le onCreate de la classe de l'activité. Je pensais l'inverse.

Dans le onDraw, les variables sont bien valorisées. Et c'est bien à cet endroit que je vais les utiliser.

Merci pour tous tes conseils. Je sais qu'il faut un minimum de théorie avant la pratique , mais il y a tellement de nouveaux concepts que j'ai vraiment éprouvé le besoin de faire ce TP maintenant. Et le problème est que je n'arrive pas toujours à identifier seul les concepts à consulter face à un problème. La programmation objet n'est pas qu'un nouveau langage, c'est une façon de penser. Et seule l'expérience permet je pense d'implémenter et d'enchaîner les bons concepts pour traiter un sujet.

Heureusement il y a les forums. Autrement, je crois qu'il serait impossible de se passer de vrais formations, avec un formateur avec qui on peu discuter.
09/12/2015, 12h22
LeBzul

Citation:

Merci pour tous tes conseils. Je sais qu'il faut un minimum de théorie avant la pratique , mais il y a tellement de nouveaux concepts que j'ai vraiment éprouvé le besoin de faire ce TP maintenant. Et le problème est que je n'arrive pas toujours à identifier seul les concepts à consulter face à un problème. La programmation objet n'est pas qu'un nouveau langage, c'est une façon de penser. Et seule l'expérience permet je pense d'implémenter et d'enchaîner les bons concepts pour traiter un sujet.

Pas de soucis ! =)
Mon message précédent était peut être un peu sec, mais ce n'était pas le but. C'est en forgeant que l'on deviens forgerons ;)

Citation:

le problème est que je n'arrive pas toujours à identifier seul les concepts à consulter face à un problème

Je pense qu'on est tous un peu dans le même cas, on ne peut pas deviner qu'il existe un concept/manière de faire si on le voit pas/nous dit pas.
Une chose importante, pour bien progresser, est de toujours essayer de comprendre les mécaniques qui se cache derrière les bout de code que tu découvres (pas forcément de façons très poussé, mais plutôt la logique / le pourquoi il a fait comme ca.).