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

**mac-gyver** · 07/12/2015, 14h58

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**LeBzul** · 07/12/2015, 18h16

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**mac-gyver** · 08/12/2015, 15h42

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 Intent i = new Intent(MainActivity.this, ResultActivity.class);
                i.putExtra(NOTES, notePhrase);
                startActivity(i);

Dans la seconde activité :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ?

**LeBzul** · 08/12/2015, 16h15

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**mac-gyver** · 09/12/2015, 08h53

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**LeBzul** · 09/12/2015, 09h56

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

->

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
     super(context, attrs);
     init();

Le constructeur appel la methode init() :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

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

Composants graphiques Android

Vue hybride

Discussions similaires

Partager

Partager