Objets dessinés et listener

Version imprimable

16/12/2015, 08h58
mac-gyver

Objets dessinés et listener

Bonjour,

Je suis en train de coder une appli qui dessine un graphique dont la géométrie est calculée à partir de données elles aussi calculées.

Pour afficher le graphique, j'ai créé une nouvelle activité, avec une vue dans son layout pour y dessiner sur un canvas avec drawrect.

Or j'ai vu qu'il n'est pas possible d'"attacher" des listener (désolé si je n'emploie pas les bons termes, mais je suis débutant) pour pouvoir gérer un évènement sur ces objets (un clic par exemple).

Je lis partout que pour celà, il faut utiliser des imageview et pas des canvas. Mais ce que je comprends, c'est que ces imageviews se peuplent en allant chercher des bitmap dans les ressources, qui sont par définition des images prédéfinies.

N'y-a-t-il donc aucun moyen de dessiner des formes à géométrie variable et de les rendre "clicable" ?
16/12/2015, 10h03
Kupris

Comme proposé ici, tu pourrais créer une CustomView qui extends d'ImageView. Tu n'aurais ensuite plus qu'à la faire hériter de la méthode onDraw dans laquelle tu vas dessiner ton canvas.

Merci pour ta réponse. Je ne suis pas assez expérimenté pour traduire tes consignes en code. Il me faudrait un exemple. De mon coté, voilà ce que j'ai fais :

L'activité qui supporte la view :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
public class ResultActivity extends AppCompatActivity {
 
    private String txt;
    public int notes[] = new int[6];
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
       Intent i = getIntent();
       super.onCreate(savedInstanceState);
       setContentView(R.layout.activity_result_1);
       notes = i.getIntArrayExtra(MainActivity.NOTES);
       ResultView maView = (ResultView) findViewById(R.id.maVue); // récupération de MaView du Layout.
       maView.setNotes(notes); //La nouvelle variable ajouté dans MaView sera initialisé avec les valeur de " i.getIntArrayExtra(MainActivity.NOTES) "
       maView.invalidate(); //ou postInvalidate() qui va demander à la vue de se redessiner
    }
}

Le xml du layout associé :

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.xxxxx.atcs.ResultActivity">
 
    <com.co.and.xxxxx.atcs.ResultView
        android:id="@+id/maVue"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"/>
 
</RelativeLayout>

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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
 
public class ResultView extends View implements View.OnClickListener {
 
    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, monPaint3;
    private RectF rect;
    private String txt;
    public int[] notesType = new int[6];
    public String[] tTypes = {"PNF", "PNR", "ADU", "EAS", "EAR", "ESP"};
 
    private void init() {
 
            monPaint = new Paint();
            monPaint2 = new Paint();
            monPaint3 = 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.BLUE,
                Color.BLUE,
                Shader.TileMode.MIRROR));
            monPaint2.setAntiAlias(true);
            monPaint2.setDither(true);
            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);
            monPaint3.setDither(true);
            monPaint3.setStrokeJoin(Paint.Join.ROUND);
            monPaint3.setStrokeCap(Paint.Cap.ROUND);*/
            monPaint3.setStrokeWidth(12);
            monPaint3.setShader(new LinearGradient(0.40f, 0.0f, 100.60f, 100.0f,
                Color.BLUE,
                Color.BLUE,
                Shader.TileMode.CLAMP));
           monPaint3.setStyle(Paint.Style.FILL);
    }
 
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        int l = getWidth() - 5;
        int h = getHeight() - 5;
        //
        //  Affichage des axes
        //
        drawAxes(canvas, l, h);
        //
        // Affichages des barres de catégories.
        //
        canvas.drawRect(5 * l / 26, 7 * h / 8 - notesType[0] * 3 * h / 120, 7 * l / 26, 7 * h / 8, monPaint2);
        canvas.drawRect(8 * l / 26, 7 * h / 8 - notesType[1] * 3 * h / 120, 10 * l / 26, 7 * h / 8, monPaint2);
        canvas.drawRect(11 * l / 26, 7 * h / 8 - notesType[2] * 3 * h / 120, 13 * l / 26, 7 * h / 8, monPaint2);
        canvas.drawRect(14 * l / 26, 7 * h / 8 - notesType[3] * 3 * h / 120, 16 * l / 26, 7 * h / 8, monPaint2);
        canvas.drawRect(17 * l / 26, 7 * h / 8 - notesType[4] * 3 * h / 120, 19 * l / 26, 7 * h / 8, monPaint2);
        canvas.drawRect(20 * l / 26, 7 * h / 8 - notesType[5] * 3 * h / 120, 22 * l / 26, 7 * h / 8, monPaint2);
        //
        // Affichage de la valeur des catégories au sommet de la barre et leur nom en dessous.
        //
 
        for (int i = 1; i <= 5; i++) {
            txt = String.format("%d", notesType[i]);
            monPaint3.setTextSize(l * h / 14000);
            canvas.drawText(txt, (5 + (i * 3)) * l / 26, 7 * h / 8 - notesType[i] * 3 * h / 120 - l / 52, monPaint3);
            monPaint3.setTextSize(l * h / 18000);
            canvas.drawText(tTypes[i], (5 + (i * 3)) * l / 26, 7 * h / 8 + l * h / 15000, monPaint3);
        }
    }
 
 
    public int[] getNotes() {
        return notesType;
    }
 
    public void setNotes(int pnotes[]) {
        this.notesType = pnotes;
    }
 
    public void drawAxes(Canvas canvas, int l, int h) {
        monPaint3.setTextSize(l * h / 18000);
        canvas.drawLine(2 * l / 13 - 5, 7 * h / 8, 12 * l / 13, 7 * h / 8, monPaint);
        canvas.drawLine(2 * l / 13, 7 * h / 8 + 5, 2 * l / 13, h / 8, monPaint);
        canvas.drawLine(2 * l / 13, (h / 8) + ((12 * h) / 120), 2 * l / 13 + 5, (h / 8) + ((12 * h) / 120), monPaint);
        for (int i = 0; i <= 30; i++) {
            canvas.drawLine(2 * l / 13, h / 8 + i * 3 * h / 120, 2 * l / 13 + 5, h / 8 + i * 3 * h / 120, monPaint);
        }
        for (int i = 5; i <= 30; i = i + 5) {
            canvas.drawLine(2 * l / 13, h / 8 + i * 3 * h / 120, 2 * l / 13 + 10, h / 8 + i * 3 * h / 120, monPaint);
            txt = String.format("%d", 30 - i + 5);
            canvas.drawText(txt, 2 * l / 13 - l * h / 12000, h / 8 + (i - 5) * 3 * h / 120, monPaint3);
        }
    }
}

Ta classe ResultView modifiée (avec l'ajout du listener dans le init()) :

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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
import android.content.Context;
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.view.View;
import android.widget.ImageView;
 
public class ResultView extends ImageView {
 
    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, monPaint3;
    private RectF rect;
    private String txt;
    public int[] notesType = new int[6];
    public String[] tTypes = {"PNF", "PNR", "ADU", "EAS", "EAR", "ESP"};
 
    private void init() {
 
        monPaint = new Paint();
        monPaint2 = new Paint();
        monPaint3 = 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.BLUE,
                Color.BLUE,
                Shader.TileMode.MIRROR));
        monPaint2.setAntiAlias(true);
        monPaint2.setDither(true);
        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);
        monPaint3.setDither(true);
        monPaint3.setStrokeJoin(Paint.Join.ROUND);
        monPaint3.setStrokeCap(Paint.Cap.ROUND);
        monPaint3.setStrokeWidth(12);
        monPaint3.setShader(new LinearGradient(0.40f, 0.0f, 100.60f, 100.0f,
                Color.BLUE,
                Color.BLUE,
                Shader.TileMode.CLAMP));
        monPaint3.setStyle(Paint.Style.FILL);
    }
 
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        int l = getWidth() - 5;
        int h = getHeight() - 5;
        //
        //  Affichage des axes
        //
        drawAxes(canvas, l, h);
        //
        // Affichages des barres de catégories.
        //
        canvas.drawRect(5 * l / 26, 7 * h / 8 - notesType[0] * 3 * h / 120, 7 * l / 26, 7 * h / 8, monPaint2);
        canvas.drawRect(8 * l / 26, 7 * h / 8 - notesType[1] * 3 * h / 120, 10 * l / 26, 7 * h / 8, monPaint2);
        canvas.drawRect(11 * l / 26, 7 * h / 8 - notesType[2] * 3 * h / 120, 13 * l / 26, 7 * h / 8, monPaint2);
        canvas.drawRect(14 * l / 26, 7 * h / 8 - notesType[3] * 3 * h / 120, 16 * l / 26, 7 * h / 8, monPaint2);
        canvas.drawRect(17 * l / 26, 7 * h / 8 - notesType[4] * 3 * h / 120, 19 * l / 26, 7 * h / 8, monPaint2);
        canvas.drawRect(20 * l / 26, 7 * h / 8 - notesType[5] * 3 * h / 120, 22 * l / 26, 7 * h / 8, monPaint2);
        //
        // Affichage de la valeur des catégories au sommet de la barre et leur nom en dessous.
        //
 
        for (int i = 1; i <= 5; i++) {
            txt = String.format("%d", notesType[i]);
            monPaint3.setTextSize(l * h / 14000);
            canvas.drawText(txt, (5 + (i * 3)) * l / 26, 7 * h / 8 - notesType[i] * 3 * h / 120 - l / 52, monPaint3);
            monPaint3.setTextSize(l * h / 18000);
            canvas.drawText(tTypes[i], (5 + (i * 3)) * l / 26, 7 * h / 8 + l * h / 15000, monPaint3);
        }
    }
 
 
    public int[] getNotes() {
        return notesType;
    }
 
    public void setNotes(int pnotes[]) {
        this.notesType = pnotes;
    }
 
    public void drawAxes(Canvas canvas, int l, int h) {
        monPaint3.setTextSize(l * h / 18000);
        canvas.drawLine(2 * l / 13 - 5, 7 * h / 8, 12 * l / 13, 7 * h / 8, monPaint);
        canvas.drawLine(2 * l / 13, 7 * h / 8 + 5, 2 * l / 13, h / 8, monPaint);
        canvas.drawLine(2 * l / 13, (h / 8) + ((12 * h) / 120), 2 * l / 13 + 5, (h / 8) + ((12 * h) / 120), monPaint);
        for (int i = 0; i <= 30; i++) {
            canvas.drawLine(2 * l / 13, h / 8 + i * 3 * h / 120, 2 * l / 13 + 5, h / 8 + i * 3 * h / 120, monPaint);
        }
        for (int i = 5; i <= 30; i = i + 5) {
            canvas.drawLine(2 * l / 13, h / 8 + i * 3 * h / 120, 2 * l / 13 + 10, h / 8 + i * 3 * h / 120, monPaint);
            txt = String.format("%d", 30 - i + 5);
            canvas.drawText(txt, 2 * l / 13 - l * h / 12000, h / 8 + (i - 5) * 3 * h / 120, monPaint3);
        }
    }
 
    public void setOnClickListener() {
        this.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                //l'action du click
            }
        });
    }
}

16/12/2015, 18h31
mac-gyver
Merci pour les précisions.

Mais je n'y arrive encore pas.

Pour commencer, j'ai tenté de rajouté la ligne suivante :
Code:

1 2 3 4 public void onClick(View v) { //l'action du click Toast.makeText(v.getContext(), String.format("%d",v.getId()), Toast.LENGTH_LONG).show(); }
Déjà pour voir ce qui se passe. Et il ne se passe rien.

J'anticipe une autre question :

J'ai déjà utilisé OnClickListener et onClick dans une autre activité. Mais j'avais des objets clicables, et onClick me renvoie des paramètres, ce qui me permet, en faisant un test sur v.getId(), de savoir ou le clic s'est produit. Comment je fais ici pour savoir ou le clic a eu lieu ?
17/12/2015, 13h39
nicroman

Je pense que tu veux utiliser onTouch (et pas onClick).

onTouch te permet de détecter une pression à un endroit (tu recois les paramètres de position / pression éventuellement ), un mouvement, ou la fin de cette pression.

C'est le onTouch qui va appeler le onClick sur un objet (le onClick est "global" à la view: ou la view a été cliquée ou non).
17/12/2015, 14h09
Kupris
Citation:
Envoyé par mac-gyver

Merci pour les précisions.

Mais je n'y arrive encore pas.

Pour commencer, j'ai tenté de rajouté la ligne suivante :

Code:

1 2 3 4 public void onClick(View v) { //l'action du click Toast.makeText(v.getContext(), String.format("%d",v.getId()), Toast.LENGTH_LONG).show(); }

Déjà pour voir ce qui se passe. Et il ne se passe rien.

J'anticipe une autre question :

J'ai déjà utilisé OnClickListener et onClick dans une autre activité. Mais j'avais des objets clicables, et onClick me renvoie des paramètres, ce qui me permet, en faisant un test sur v.getId(), de savoir ou le clic s'est produit. Comment je fais ici pour savoir ou le clic a eu lieu ?
Si l'appel ne se fait pas, c'est que j'ai oublié l'appel du OnClick dans le init :mouarf:

Du coup à aucun moment ton listener n'est setté.

Comme le préconise nicroman, tu devrais plutôt définir un listener concernant l'event touch et utilisé l'objet MotionEvent ainsi retourné pour récupérer les positions qui t'intéressent.

Merci pour vos aides à tous. A force d'expérimentations, j'y suis arrivé. Voilà le code qui fonctionne :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
    @Override
    public boolean onTouchEvent(@NonNull MotionEvent event)
    {
        float x = event.getX();
        float y = event.getY();
        switch (event.getAction())
        {
            case MotionEvent.ACTION_DOWN:
                if ( x >= 5*l/26 && x <= 8*l/26 && y>= 7 * h / 8 - notesType[0] * 3 * h / 120 && y<= 7*h/8) {
                    maVue.setBackgroundColor(Color.YELLOW);
             }
                invalidate();
                break;
            default:
                break;
        }
        return true;
    }

J'arrive à récupérer les coordonnées x et y, et à détecter les "toucher" sur les parties du graphique qui m'intéressent. Je le visualise par un changement de la couleur du fond.

Show must goes on...